:root{

    --d100: 13, 14, 32;
    --d200: 45, 28, 127;

    --l100: 200, 179, 246;
    --l200: 176, 169, 229;

    --acc: 117, 70, 232;

}

*{
    padding: 0; margin: 0;
    box-sizing: border-box;
}

html, body{
    overflow: hidden;
}
body{
    min-height: 700px;
    height: 100dvh;

    display: flex;
    justify-content: center; align-items: center;

    perspective: 400px;
    
    font-size: 1.5em;
    font-family: "Roboto Mono";

    background-color: rgb(var(--l200));
    background-image: url("noise.png");
    color: rgb(var(--l100));

}

/*  */

@keyframes cube-rotation {
    from{
        transform: rotateX(0deg);
    }
    to{
        transform: rotateX(360deg);
    }
}

li{
    list-style: none;
}

a{
    text-decoration: none;
    color: rgb(var(--l100));
}

/* pointer lock change screen */

#access{
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;

    display: flex;
    align-items: end;

    z-index: 999;
    pointer-events: none;
    cursor: grab;
}

#access .bg-filter{
    width: 100%; height: 100%;
    position: absolute;

    display: flex; flex-direction: column;
    justify-content: center; align-items: center;

    backdrop-filter: blur(5px);
    opacity: 1;
    background-color: rgb(var(--d100));
    font-family: "Notable";
    text-align: center;

    transition: backdrop-filter .8s ease, opacity .8s ease;
    pointer-events: auto;
}
.bg-filter>h1{
    flex: 3;
    display: flex;
    align-items: end;
}
.bg-filter>p{
    flex: 2;
    display: flex;
    align-items: center;
    color: rgb(var(--acc));
    letter-spacing: 5px;
}
#access .footer{
    flex: 1;
    width: 90%;
    padding-block: 40px;

    display: flex;
    justify-content: space-between;
    align-items: end;

    font-family: "Roboto Mono";
    color: rgb(var(--l200));
    font-size: min(1em, 3vw);
}
#access .footer a{
    color: rgb(var(--l200));
    transition: color .3s ease;
}
#access .footer a:hover{
    color: rgb(var(--acc));
}
#access .bg-filter.hide{
    backdrop-filter: blur(0px);
    opacity: 0;
    pointer-events: none;
}

/* cube */

#cube{
    --square-length: 800px;
    min-width: var(--square-length); min-height: var(--square-length);
    position: relative;
    transform-style: preserve-3d;
    /* animation: cube-rotation infinite 10s linear; */

    pointer-events: none;
    color: rgb(var(--l100));
    cursor: grab;
}

#cube>div{
    --transform-factor: 1;
    --translate-calc: calc((var(--transform-factor) * var(--square-length)) / 2);
    /* background-color: red; */

    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;

    display: flex;
    justify-content: center; align-items: center;
    pointer-events: auto;
}

#cube>div>p{
    font-size: 4em;
    text-align: center;
}

#cube>div:nth-child(odd){
    --transform-factor: -1;
}

#cube>div:nth-of-type(1){
    background-color: rgb(var(--d100));
    transform: translateZ(var(--translate-calc));
}
#cube>div:nth-of-type(2){
    background-color: rgb(var(--d100));
    transform: translateZ(var(--translate-calc)) rotateY(180deg);
}
#cube>div:nth-of-type(3){
    background-color: rgb(var(--l100));
    color: rgb(var(--d100));
    transform: translateY(var(--translate-calc)) rotateX(90deg) rotateY(180deg) rotateZ(180deg);
}
#cube>div:nth-of-type(4){
    background-color: rgb(var(--l100));
    color: rgb(var(--d100));
    transform: translateY(var(--translate-calc)) rotateX(90deg);
}
#cube>div:nth-of-type(5){
    background-color: rgb(var(--d200));
    transform: translateX(var(--translate-calc)) rotateY(90deg);
}
#cube>div:nth-of-type(6){
    background-color: rgb(var(--d200));
    transform: translateX(var(--translate-calc)) rotateY(-90deg);
}

#cube.explose{
    display: flex; flex-direction: column;

    min-width: 100vw; height: 100dvh;

    position: absolute;
    top: 0; left: 0;

    pointer-events: all;

    overflow-y: scroll;
    overflow-x: hidden;

    padding: 5vw; gap: 5vw;
    cursor:auto;
}
#cube>div.explose{
    position: static;
    transform: none;

    width: 100%; min-height: 100vh;
    position: relative;

    font-size: 1.5vw;

    /* background-color: blue; */
}

#cube>div>div{
    width: 100%; height: 100%;
    padding: 20px;

    position: absolute;
    perspective: 800px;

    display: flex; flex-direction: column;
    justify-content: space-between;

    background-image: url("noise.png");
}

/* front wall */

.front-wall{
    display: flex; flex-direction: column;
    
    background-color: rgb(var(--d100));
}

.front-wall h1{
    flex: 3;
    display: flex; flex-direction: column;
    justify-content: end; align-items: start;

    font-size: 6em;
    line-height: .75;

    /* background-color: orange; */
}
.front-wall p{
    flex: 2;
    width: 70%;

    display: flex;
    align-items: center;

    color: rgb(var(--l200));

    /* background-color: red; */
}
.front-wall div{
    flex: 2;
    width: 40%;
    margin-left: auto;

    display: flex;
    justify-content: center;
    align-items: center;

    perspective: 800px;
    transform-style: preserve-3d;

    /* background-color: darkblue; */
}
.front-wall div span{
    --boxshadow-color: rgb(var(--d200));
    --hover-color: rgb(var(--d200));
    --txt-color: rgb(var(--l100));

    padding: 10px 25px;
    border-radius: 15px;
    cursor: pointer;

    background-color: rgb(var(--acc));
    color: rgb(var(--l100));
    font-family: "Notable";
}

/* back wall */

.back-wall{
    background-color: rgb(var(--d100));
    justify-content: space-evenly;
}

.back-wall .header{
    flex: 1;
}

.timeline{
    font-size: .6em;
    flex: 10;
    display: flex; flex-direction: column;
    justify-content: center;
    position: relative;
}

.timeline .wrapper{
    height: 500px;
    padding-left: 10px;
    overflow-y: scroll;

    box-shadow: inset 11px 0 0 rgb(var(--d200));
}

.timeline .wrapper div{
    display: flex;
    flex-direction: column;
    align-items: start; justify-content: space-between;
    z-index: 2;
    gap: 10px;
    padding-bottom: 10px;

    cursor: ns-resize;
}

.wrapper div h3{
    width: fit-content;
    padding: 5px 16px;
    
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: rgb(var(--d200));
}

.wrapper div p{
    padding-block: 4px;
    padding-inline: .5vw;
    margin-left: 1vw;

    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;

    background-color: rgb(var(--l200));
    color: rgb(var(--d100));
}

/* ceiling */

.ceiling{
    background-color: rgb(var(--d100));
    text-align: center;
    color: rgb(var(--l100));
}

.ceiling p{
    font-size: 1em;
    font-weight: bold;
}

.ceiling ul{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    transform-style: preserve-3d;
}

.ceiling li{
    --boxshadow-color: rgb(var(--acc));
    --hover-color: rgb(var(--acc));
    --txt-color: rgb(var(--l100));
    flex: 1;

    min-width: 40%;
    padding: 40px;
    border-radius: 20px;
    background-color: rgb(var(--l100));
    color: rgb(var(--d200));
}

/* floor */

.floor{
    width: 100%; height: 100%;
    position: absolute;

    display: flex; flex-direction: column;
    justify-content: space-evenly;
    padding: 20px;
    
    background-color: rgb(var(--d100));
    text-align: center;
    color: rgb(var(--l100));
}

.floor>p{
    font-size: 1em;
    font-weight: bold;
}

.floor ul{
    display: flex;
    gap: 30px;
    padding: 30px;
    transform-style: preserve-3d;
}

.floor li{
    --boxshadow-color: rgb(var(--acc));
    --hover-color: rgb(var(--acc));
    --txt-color: rgb(var(--l100));

    flex: 1;
    background-color: rgb(var(--l100));
    padding-block: 20px;
    border-radius: 15px;
    color: rgb(var(--d200));
}

/* side wall left */

.side-wall-left{
    background-color: rgb(var(--d200));
    text-align: center;
    font-size: 1em;
}

.side-wall-left h2{
    flex: 1;
    display: flex;
    justify-content: center; align-items: center;

    font-size: 1.8em;
}


.side-wall-left ul{
    flex: 3;
    /* display: flex; flex-direction: column;
    justify-content: space-evenly; */

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
    transform-style: preserve-3d;
}

.side-wall-left li:nth-of-type(1){
    grid-area: 1 / 1 / 2 / 5;
}
.side-wall-left li:nth-of-type(2){
    grid-area: 1 / 5 / 2 / 7;
}
.side-wall-left li:nth-of-type(3){
    grid-area: 2 / 1 / 3 / 7;
}
.side-wall-left li:nth-of-type(4){
    grid-area: 3 / 1 / 4 / 4;
}
.side-wall-left li:nth-of-type(5){
    grid-area: 3 / 4 / 4 / 7;
}

.side-wall-left li{
    --boxshadow-color: rgb(var(--l100));
    --hover-color: rgb(var(--d100));
    --txt-color: rgb(var(--l100));

    display: flex; flex-direction: column;
    align-items: center;
    text-align: left;
    padding: 20px;

    border: 1px solid rgb(var(--l200));
    border-radius: 15px;
}

.side-wall-left li span{
    flex: 1;
    display: flex;
    align-items: end;
    margin-left: auto;

    font-size: .8em;
    text-align: right;
    color: rgb(var(--l200));

}

/* side wall right */

.side-wall-right{
    background-color: rgb(var(--d200));
    text-align: center;
    font-size: 1em;
}

.side-wall-right>div{
    flex: 1;
    display: flex; flex-direction: column;

}
.side-wall-right h2{
    font-size: 2.5em;
}

.side-wall-right ul{
    counter-reset: project;

    flex: 3;
    display: flex; flex-direction: column;
    justify-content: start;
}

.side-wall-right li{
    counter-increment: project;
    display: flex;
    padding-block: 10px;

    font-size: .8em;
    border-bottom: 1px solid rgb(var(--l100));
}

.side-wall-right li>span{
    flex: 1;
}
.side-wall-right li > span::after {
    content: counter(project, decimal-leading-zero);
    font-family: "Notable";
}

.side-wall-right li>a{
    flex: 10;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.hover-effect{
    cursor: pointer;
    transform: translateZ(0px);
    transition: all .5s ease;
    transform-style: preserve-3d;
}
.hover-effect:hover{
    transform: translateZ(30px);
    box-shadow: 0 0 10px var(--boxshadow-color);
    background-color: var(--hover-color);
    color: var(--txt-color)
}

.title{
    font-size: 2em;
    font-family: "Notable";
}