@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');


.jersey-25-regular {
    font-family: "Jersey 25", sans-serif;
    font-weight: 400;
    font-style: normal;
}


#parallaxrising {
    height: 70rem;
    width: 100%;
    background-color: #181a1b;
    z-index: -100;
    margin: 0;
    transform: translateZ(-.50px) scale(1.05) translateX(0%) translateY(8vh);
}

#loading {
    padding: 10rem 0;
}

    #loading h1, h2 {
        margin: 2rem;
        font-family: "Inter";
    }

* {
    box-sizing: border-box;
}

video {
    padding: 1rem;
    margin: 3rem 0;
}



#about {
    border-radius: 10px;
    margin: 20px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}

    #about p {
        font-weight: 100;
    }



body, html {
    margin: 0;
}

* {
    box-sizing: border-box;
}

/*  text */
.external h3 {
    font-size: 1rem;
    font-family: "Inter", monospace;
}

#mainh {
    font-family: Righteous;
    color: white;
    z-index: 1000;
    position: absolute;
    float: left;
    font-size: 3em;
    width: 100%;
    top: 20%;
    left: 10%;
    margin: 0;
    z-index: 1;
}

#nonimmersive article {
    padding: 1em;
    margin: 2em;
    color: white;
    /*background-color:#181a1b;*/
    font-family: "Inter", sans-serif;
}

.toparticle {
    margin-top: 10em !important;
    font-size: 1.5em;
    width: 60%;
}

article text {
    font-weight: 200;
    font-family: "Jersey 25", monospace;
}

text {
    font-size: 1.7rem;
}

h1 {
    font-size: 8rem;
    font-family: "Jersey 25", monospace;
}

h2 {
    font-size: 2rem;
}

#immersive {
    max-height: 8rem !important;
}

    #immersive .header-right {
        max-height: 8em !important;
        padding: 0.5rem;
    }


/*background styles*/
.index {
    background-color: black;
}

.work {
    background-color: black;
}

.nonimmerse {
}

#scrolling {
    background-color: #181a1b;
    height: 1200px;
    margin: 0;
    padding: 0;
    top: 700px;
    width: 100%;
    position: fixed;
}

#nonimmersive {
    position: absolute;
    top: 100px;
    width: 100%;
    padding: 1em;
    /*background-color:#181a1b;*/
    z-index: 10; /* Ensures the header is above the A-Frame canvas */


    justify-content: space-between; /* Aligns logo and menu to opposite ends */
    align-items: center; /* Centers items vertically */
}

.vertical li {
}

.headshot {
    float: right;
    width: 50%;
    max-width: 200px;
    border-radius: 50%;
}
/* header*/
.nav-bar {
    position: absolute;
    top: 6.5em; /* Adjust based on the height of your header */
    width: 100%;
    background-color: #181a1b;
    display: none;
    z-index: 11; /* Ensure this is above the A-Frame canvas */
}

    .nav-bar a {
        float: none;
        display: block;
        text-align: left;
        font-size: 1.7em;
        padding: 12px 20px;
        text-decoration: none;
        font-family: "Jersey 25", monospace;
        color: white;
        border-bottom: 1px solid #ddd; /* Optional */
    }

.header {
    position: absolute;
    top: 0;
    width: 100%;
    background-color: #181a1b;
    z-index: 10; /* Ensures the header is above the A-Frame canvas */
    overflow: hidden;
    display: flex; /* Using flexbox for alignment */
    justify-content: space-between; /* Aligns logo and menu to opposite ends */
    align-items: center; /* Centers items vertically */
}

.immersivebtn {
    color: white;
    font-style: italic;
    float: right;
    margin: 1em 5em;
    font-family: "VT323", monospace;
    font-size: 1.2em;
}

.logo {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

    .logo img {
        max-height: 2em; /* Adjust the size of your logo if needed */
        margin: 0 auto;
        padding: 0 auto;
    }

.header-right {
    display: flex;
    align-items: center;
    margin-right: 2em;
}

.icon {
    font-size: 1em; /* Increases the size of the burger icon */
    max-height: 4em;
    cursor: pointer;
    padding: 20px; /* Add padding for easier clicking */
}

.header img {
    height: 4em;
    padding: 0;
    margin: 0;
}

.header a {
    float: left;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 2em;
    line-height: 2em;
    border-radius: 4px;
}

    .header a.logo {
        padding: 0;
        margin: 0;
        font-weight: bold;
    }

.burger-menu {
    font-size: 1em;
}

.header a:hover {
}

.header a.active {
    background-color: cornflowerblue;
    color: white;
}

.nav-bar a:hover {
    background-color: mediumpurple;
}



/* Services Section */
.services {
    border-radius: 20px;
}

    .services h3 {
        float: left;
        width: 100%;
        margin-top: 0;
        font-size: 2.5em;
    }

.service {
    border-radius: 10px;
    backdrop-filter: blur(10px);
    margin: 20px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    font-size: 1.7em;
    padding: 0em;
    list-style-type: none;
    max-width: 20em;
    font-family: "Jersey 25", sans-serif;
}

    .service img {
        width: 90%;
        resize: both;
    }

    .service:hover {
        transform: translateY(-5px);
    }

.linkstyling {
    color: aqua;
    z-index: 100;
}

    .linkstyling:hover {
        color: mediumpurple;
    }

    .linkstyling:visited {
        color: mediumpurple;
    }

    .linkstyling:active {
        color: lightblue;
    }



/* fancy framing */
::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

::-webkit-scrollbar-button {
    width: 1px;
    height: 1px;
}

.external {
    overflow: hidden;
    height: 100vh;
    background-color: #181a1b;
}

.horizontal-scroll-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vh;
    transform: rotate(-90deg) translate3d(0,-100vh,0);
    transform-origin: right top;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    height: 100vw;
    perspective: 1px;
    transform-style: preserve-3d;
    padding-bottom: 10rem;
}

.img-wrapper {
    transform: rotate(90deg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    transform-origin: 50% 50%;
    transform: rotate(90deg) translateZ(.1px) scale(0.9) translateX(0px) translateY(-3vh);
    transition: 1s;
}

.slower {
    transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(-10vh);
}

.slower1 {
    transform: rotate(90deg) translateZ(-.25px) scale(1.05) translateX(0%) translateY(8vh);
}

.slower2 {
    transform: rotate(90deg) translateZ(-.3px) scale(1.3) translateX(0%) translateY(2vh);
}

.slower-down {
    transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(16vh);
}

.faster {
    transform: rotate(90deg) translateZ(.15px) scale(0.8) translateX(0%) translateY(14vh);
}

.faster1 {
    transform: rotate(90deg) translateZ(.05px) scale(0.8) translateX(0%) translateY(10vh);
}

.fastest {
    transform: rotate(90deg) translateZ(.22px) scale(0.7) translateX(-10vh) translateY(-15vh);
}

.last {
    transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(25vh) translateY(-8vh);
}

.scroll-info {
    position: absolute;
    left: 1rem;
}

.scroll-info {
    top: 1rem;
}

.img-wrapper a {
    overflow: hidden;
    display: block;
    padding: 1vh;
    background: white;
    box-shadow: 0 10px 50px #33363b;
}

.img-wrapper img {
    max-width: 45vh;
    max-height: 50vh;
    transition: .5s;
    vertical-align: top;
}

.scroll-info {
    display: flex;
    align-items: center;
}

.icon svg {
    width: 50px;
    fill: currentcolor;
}


/* end of scroll stuff */
/*Modal stuff*/
.modal-window {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.25);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
}

    .modal-window:target {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .modal-window > div {
        max-width: 100%;
        width: 40rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 2em;
        background: white;
    }

    .modal-window header {
        font-weight: bold;
        font-family: "Inter", monospace;
    }

.modal-window {
    font-family: "Inter", monospace;
}

    .modal-window h2 {
        font-family: "Inter", monospace;
        font-size: 2rem;
    }

    .modal-window p {
        font-size: 1rem;
    }

    .modal-window img {
        max-width: 60%;
        min-width: 30%;
        float: right;
        padding: 1rem;
    }


.modal-close {
    color: #aaa;
    line-height: 50px;
    font-size: 100%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 70px;
    text-decoration: none;
}

    .modal-close:hover {
        color: black;
    }

.modal-window > div {
    border-radius: 3px;
}

.modal-window div:not(:last-of-type) {
    margin-bottom: 15px;
}

.btn {
    color: aqua;
}

    .btn:hover {
        color: aquamarine;
    }

    .btn:visited {
        color: lightgreen;
    }

    .btn:active {
        color: lightblue;
    }

#grid {
    backdrop-filter: blur(2px);
    position: fixed;
    z-index: -1;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.3 ), only screen and (-o-min-device-pixel-ratio: 13/10 ), only screen and (min-resolution: 120dpi ) {
    /* Your code to swap higher DPI images */
    #scrolling {
        height: 1600px;
        margin: 0;
        padding: 0;
        top: 1200px;
        width: 100%;
        position: fixed;
    }

    #grid {
        position: fixed;
        height: 1200px;
        z-index: -1;
    }

    .nav-bar {
        top: 8rem;
    }

        .nav-bar a {
            font-size: 3rem;
            padding: 1.5rem;
        }

    .logo img {
        object-fit: contain;
        max-height: 7rem;
    }

    .header {
        /*   height:140px;-->*/
    }

    .service {
        width: 99%;
        backdrop-filter: none;
        border-radius: 10px;
    }

    #nonimmersive article {
        padding: 1em;
        margin: 1em;
    }

    .toparticle {
        margin-top: 10em !important;
        font-size: 3em;
    }

    .vertical li {
        padding: 0.5em;
        margin: 2em 0;
        font-size: 3em;
        width: 100%;
        list-style-type: none;
        font-family: "Jersey 25", sans-serif;
        max-width: 95%;
    }

    .immersivebtn {
        color: white;
        font-style: italic;
        float: right;
        margin: 2em 0.5em 1em 0.5em;
        font-family: "VT323", monospace;
        font-size: 2.8em;
    }

    #mainh {
        font-size: 5em;
    }


    h1 {
        font-size: 5rem;
    }

    h2 {
        font-size: 4rem;
    }

    text {
        font-size: 3.5rem;
    }

    .header-right {
        font-size: 2rem;
    }

    .modal-window {
        position: fixed;
        background-color: transparent;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
        visibility: hidden;
        opacity: 0;
        transition: all 0.3s;
        overflow: scroll;
    }



        .modal-window > div {
            max-width: 100%;
            width: 100%;
            position: absolute;
            top: 10rem;
            left: 0;
            transform: translate(0, 0);
            padding: 2em;
            border-radius: 0;
        }



        .modal-window h2 {
            font-family: "VT323", monospace;
            font-size: 4rem;
        }

        .modal-window p {
            font-size: 2rem;
            padding: 1rem;
        }

        .modal-window img {
            max-width: 99%;
            min-width: 50%;
            padding: 1rem;
        }


    .modal-close {
        line-height: 100px;
        font-size: 3rem;
        right: 8rem;
        width: 3rem;
    }

    #mainh {
        position: fixed;
    }

        #mainh:after {
            content: "   ->";
        }


    .external h3 {
        font-size: 3rem;
        font-family: "Inter", monospace;
    }

    #whatwe {
        background-color: #181a1b;
    }

    .external {
        overflow: scroll;
        height: 80vh;
        background-color: #181a1b;
    }

    .horizontal-scroll-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100vh;
        transform-origin: right top;
        overflow-y: scroll;
        overflow-x: scroll;
        padding: 0;
        height: 100vw;
        perspective: 1px;
        transform-style: preserve-3d;
        padding-bottom: 10rem;
    }

    .img-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 60vh;
        transform-origin: 50% 50%;
        transform: rotate(90deg) translateZ(.1px) scale(0.9) translateX(0px) translateY(-3vh);
        transition: 1s;
    }



    .last {
        transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(25vh) translateY(-8vh);
    }

    .scroll-info {
        position: absolute;
        left: 1rem;
    }

    .scroll-info {
        top: 1rem;
    }
}

@media screen and (max-width: 700px) {
    .nav-bar {
        top: 4rem; /* Adjust based on the height of your header */
    }

        .nav-bar a {
            font-size: 1rem;
            padding: 12px 20px;
        }

    .logo img {
        max-width: 99%;
        object-fit: contain;
    }

    .icon {
        font-size: 1rem; /* Increases the size of the burger icon */
        max-height: 5rem;
        cursor: pointer;
        padding: 20px; /* Add padding for easier clicking */
    }

    .header img {
        height: 5rem;
        padding: 0;
        margin: 0;
    }

    .header a {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

    .burger-menu {
        font-size: 2rem;
    }
}