@font-face {
    font-family: "Cascadia Mono";
    src: url('../fonts/CascadiaMono-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 700;
    font-style: normal;
}

@font-face {
    font-family: "Cascadia Mono";
    src: url('../fonts/CascadiaMono-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 700;
    font-style: italic;
}

:root {
    --road-color: #E8E8E8;
    --line-color: #D9D9D9;
    --light-shading: #dfdfdf;
    --medium-shading: #D9D9D9;
    --dark-shading: #C5C5C5;
    --very-dark-shading: #A0A0A0;
    --house-height: 7.5rem;
    --house-width: 20rem;
    --road-width: 20rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --road-color: #414141;
        --line-color: #676767;
    }
}

main {
    position: absolute;
    width: 100vw;
    height: 100dvh;
    padding-inline: clamp(5rem, 25vw + 1rem, 30rem);
    padding-bottom: clamp(2rem, 5vh, 5rem);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

.about-me {
    padding: 2rem;
    background: var(--background-color);
    z-index: 1;
    color: var(--text-color);
    animation: fadeIn 500ms ease-out, aboutMeSpawnAnimation 500ms ease-out forwards;
    box-shadow: var(--very-dark-shading) 0 0 0.25rem 0.25rem;
}

.about-me h2 {
    margin-bottom: 1rem;
    font-size: clamp(1rem, 2vw + 0.5rem, 3rem);
}

.about-me h2::after {
    content: '';
    display: block;
    width: 12%;
    height: 0.25rem;
    background: var(--text-color);
    margin-top: 0.25rem;
}

.about-me p {
    font-size: clamp(0.75rem, 0.5vw + 0.5rem, 2rem);
    line-height: 1.5;
}


.pfp {
    object-fit: contain;
    width: clamp(10rem, 24vw + 1rem, 25rem);
    height: 20rem;
    animation: fadeIn 500ms ease-out forwards, pfpIdleAnimation 5s ease-in-out infinite;
    z-index: 1;
    transition: scale 255ms cubic-bezier( 0.17, 0.89, 0.32, 1.27 );
}

.pfp:active {
    scale: 1.1;
}
/* Scene */

.scene {
    background-color: var(--background-color);
    background-image: radial-gradient(var(--bg-pattern-color) 15%, transparent 16%);
    background-size: 2.5rem 2.5rem;
    perspective-origin: var(--perspective-origin);
    perspective: var(--perspective);
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
}

.road {
    background: var(--road-color);
    width: var(--road-width);
    height: 100%;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: rotate3d(1, 0, 0, 75deg);
    box-shadow: var(--very-dark-shading) 0 1.5rem 0.5rem 0.5rem;

}

.road-lines {
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
            to top,
            transparent, transparent 1rem,
            var(--line-color) 1rem,
            var(--line-color) 3rem
    );
    background-size: 1rem 9rem;
    background-repeat: repeat-y;
    background-position: center;
    animation: moveLines 3s linear infinite;
}

.buildings {
    height: 100%;
    width: var(--house-width);
    transform-style: preserve-3d;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: 1.5rem;
    background: var(--very-dark-shading);
    box-shadow: var(--very-dark-shading) 0 0 1rem 1rem;
    transform: rotate3d(1, 0, 0, 75deg);
    overflow: visible;
    transform-origin: center;
}

.building {
    position: relative;
    background: var(--dark-shading);
    width: 100%;
    height: var(--house-height);
    transform-style: preserve-3d;
    overflow: visible;
    transform-origin: top;
    animation: moveBuildings 3s linear infinite;
}

.building .front {
    position: relative;
    background: var(--medium-shading);
    width: 100%;
    height: var(--house-height);
    transform-origin: top;
}

.left .front {
    transform: rotateY(90deg) translateX(calc(var(--house-width) / 2 * -1)) translateZ(calc(var(--house-width) / 2));
}

.right .front {
    transform: rotateY(-90deg) translateX(calc(var(--house-width) / 2)) translateZ(calc(var(--house-width) / 2));
}

.building .side {
    position: absolute;
    background: var(--dark-shading);
    width: var(--house-width);
    height: var(--house-width);
    left: 0;
    transform: translateZ(var(--house-width)) rotateX(-90deg);
    transform-origin: top;
}

.building .roof {
    position: absolute;
    background: var(--light-shading);
    width: 100%;
    height: var(--house-height); /* length of the roof slope */
    top: 0;
    transform-origin: top;
    transform: translateZ(var(--house-width)) /* move roof up by half its height */
}

/* Animations */

@keyframes moveLines {
    0% {
        background-position: center 0;
    }
    100% {
        background-position: center calc(var(--house-height) * 1 - 1.5rem);
    }
}

@keyframes moveBuildings {
    0% {
        transform: translateY(calc(var(--house-height) * -1 - 1.5rem));
    }
    100% {
        transform: translateY(0);
    }

}

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

@keyframes pfpIdleAnimation {
    0% {
        transform: translateY(5vh) rotate(-5deg);
    }
    50% {
        transform: translateY(8vh) rotate(-3deg);
    }
    100% {
        transform: translateY(5vh) rotate(-5deg);
    }
}

@media (max-width: 1024px) {
    .road {
        width: calc(var(--road-width) * 0.65);
    }

    .buildings {
        width: calc(var(--house-width) * 0.65);
    }

    .left .front {
        transform: rotateY(90deg) translateX(calc(var(--house-width) / 2 * -1 * 0.65)) translateZ(calc(var(--house-width) / 2 * 0.65));
    }

    .right .front {
        transform: rotateY(-90deg) translateX(calc(var(--house-width) / 2 * 0.65)) translateZ(calc(var(--house-width) / 2 * 0.65));
    }

    .building .side {
        width: calc(var(--house-width) * 0.65);
        height: calc(var(--house-width) * 0.65);
        transform: translateZ(calc(var(--house-width) * 0.65)) rotateX(-90deg);
    }

    .building .roof {
        transform: translateZ(calc(var(--house-width) * 0.65))
    }

    .scene {
        justify-content: space-between;
    }
}

@media (max-width: 768px) {

    main {
        padding-left: 5vw;
        padding-right: 5vw;
        padding-bottom: 5vh;
    }

    .scene {
        /*perspective: calc(var(--perspective) * 0.75);*/
    }

    .road {
        width: calc(var(--road-width) * 0.45);
    }

    .buildings {
        width: calc(var(--house-width) * 0.45);
    }

    .left .front {
        transform: rotateY(90deg) translateX(calc(var(--house-width) / 2 * -1 * 0.45)) translateZ(calc(var(--house-width) / 2 * 0.45));
    }

    .right .front {
        transform: rotateY(-90deg) translateX(calc(var(--house-width) / 2 * 0.45)) translateZ(calc(var(--house-width) / 2 * 0.45));
    }

    .building .side {
        width: calc(var(--house-width) * 0.45);
        height: calc(var(--house-width) * 0.45);
        transform: translateZ(calc(var(--house-width) * 0.45)) rotateX(-90deg);
    }

    .building .roof {
        transform: translateZ(calc(var(--house-width) * 0.45))
    }
}

@media (max-width: 480px) {
    .road {
        width: calc(var(--road-width) * 0.3);
    }

    .road-lines {

    }

    .buildings {
        width: calc(var(--house-width) * 0.4);
    }

    .left .front {
        transform: rotateY(90deg) translateX(calc(var(--house-width) / 2 * -1 * 0.4)) translateZ(calc(var(--house-width) / 2 * 0.4));
    }

    .right .front {
        transform: rotateY(-90deg) translateX(calc(var(--house-width) / 2 * 0.4)) translateZ(calc(var(--house-width) / 2 * 0.4));
    }

    .building .side {
        width: calc(var(--house-width) * 0.4);
        height: calc(var(--house-width) * 0.4);
        transform: translateZ(calc(var(--house-width) * 0.4)) rotateX(-90deg);
    }

    .building .roof {
        transform: translateZ(calc(var(--house-width) * 0.4))
    }
}

@media (max-width: 780px) and (orientation: landscape), (max-height: 580px) and (orientation: landscape) {
    .scene {
        perspective: 4rem;
    }

    .pfp {
        display: none;
    }

    main {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}