body{
    background-color: #1c53a8;
    margin: 0%;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    perspective: 2000px;
    justify-content: center;
    cursor: crosshair;
}

#sheet{
    z-index: 2;
    height: 100vh;
    width: 110%;
    aspect-ratio: 1;
    display: grid;
    grid-template-rows: repeat(20, 1fr);
    grid-template-columns: repeat(21, 1fr);
    position: absolute;
    transform: translateY(-40rem) translateX(4rem) rotateX(45deg) rotateY(-5deg) rotateZ(20deg) scale(0.25);
}
/* #sheet:after {
    z-index: 3;
    background: radial-gradient(circle, transparent 25%, rgb(var(--background-rgb)) 80%);
  } */

.container{
    border: 4px ridge #5ba6ff;
    width: min-content;
    height: min-content;
    aspect-ratio: 1;
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(5, 1fr);
}

.panel{
    width: 4rem;
    height: 4rem;
    border: 1px solid rgb(156 229 251 / 75%);
    transition: background-color 1500ms;
}

.panel:hover{
    background-color: #5ba5ff5f;
    transition-duration: 0ms;
}


#content{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-content: flex-start;
    transform: translateX(-2rem) translateY(-1.75rem) rotateX(45deg) rotateY(-5deg) rotateZ(20deg) scale(1);
    z-index: 2;
    height: 70rem;
    width:fit-content;
    font-size: xx-large;
    font-family: "Graduate", serif;
    font-style: oblique;
    color: #dce9f9;
    font-size: 4.5rem;
    margin: 0px;
    overflow:scroll;
}

#content::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
#content::-webkit-scrollbar-thumb{
    background: #5ba5ff5f;
    border-radius: 10px;
    height: 1rem;
    width: 2px;
}

.contentSection{
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-family: "Chakra Petch", sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    position: sticky;
    top: 1px;
}

.icon{
    aspect-ratio: 1;
    flex:0 0 35px;
    max-height: 10vh;
    align-self: center;
}
.displayImg{
    width: 15%;
    height: auto;
    perspective: -2000px;
    transform: rotateX(20deg) rotateY(5deg) rotateZ(-15deg) scale(1.25);
}

#name{
    position: sticky;
    top: 0;
    margin: 0;
    z-index: 10;
    text-wrap: nowrap;
    font-size: 7.5vw;
}
#subtitle{
    position: sticky;
    top: 150px;
    font-size: 4.5vw;
    z-index: 3;
}

p{
    position: sticky;
    top: 250px;
    width: min-content;
    text-wrap:nowrap;
    font-size: 3rem;
}

a{
    position: sticky;
    width: min-content;
    color: #dce9f9;
    align-self: center;
    text-decoration: none;
    display: flex;
}


/* animation: BGAnimation 50s linear infinite; */

@keyframes BGAnimation {
    0%{background-position:100% 50%}
    100%{background-position:-33% 50%}
}

@keyframes fadeIn {
    0% {
        opacity: 0%;
    }
    100%{
        opacity: 100%;
    }
}

@keyframes setTitle{
    0%{
        transform: translateX(0rem) translateY(0rem) rotateX(-45deg) rotateY(5deg) rotateZ(-20deg) scale(1);
        perspective: -2000px;
    }
    100%{
        transform: translateX(0px);
    }
}