* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: Sauvage;
    src: url(assets/fonts/11f0a5270357657d0677588be78abefc.woff);
}

:root {
    --purple: #a197f7;
    --navy: #05002b;
    background-color: #05002b;
}

@media screen and (max-width: 600px) {

    html,
    body {
        height: 100vh;
        width: 100vw;
        color: white;
        background-color: var(--navy);
        font-family: 'Sauvage';
        overflow: hidden;
    }

    .bg-container {
        height: auto;
    }

    .webgl {
        position: fixed;
    }

    .navbar {
        overflow: hidden;
        background-color: white;
        position: fixed;
        top: 0px;
        width: 100vw;
        z-index: 100;
    }

    .navbar a {
        float: right;
        display: block;
        color: #ce639e;
        text-align: center;
        justify-content: center;
        justify-items: center;
        padding: 20px 20px;
        text-decoration: none;
    }

    /* Change background on mouse-over */
    .navbar a:hover {
        color: #cca8bc;
    }


    .section {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        padding: 10vw;
        background-position: center;
        z-index: 999;
    }

    .section-two {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100vh;
        padding: 10vw;
        z-index: 999;
    }

    .gallery {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 5vw;
        overflow: hidden;
    }


    .img3 {
        height: 95vh;
        width: 95vw;
        position: absolute;

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

        filter: blur(8px);
        -webkit-filter: blur(8px);
        background: url(assets/images/ff1580950cdd713901061c676a1b3cb7.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        z-index: -1;
    }

    img {
        display: flex;
        position: relative;
        justify-content: center;
        border: none;
    }

    .icon {
        width: 100%;
        height: 100%;
        padding: 50px 50px;
        background: url(assets/images/5a5f4f38973e3d9a33fafa4957bf14ec.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }


    h1 {
        font-weight: 900;
        color: white;
        font-size: 17vw;
    }
    h2 .LoadingBar {
        font-weight: 900;
        color: white;
        font-size: 17vw;
    }

    h2 {
        font-weight: 300;
        color: white;
        font-size: 6.5vw;
    }

    h3 {
        font-weight: 300;
        color: white;
        font-size: 6vw;
    }

    h4 {
        font-weight: 300;
        color: white;
        font-size: 4vw;
    }

    p {
        color: white;
        font-size: 3.8vmin;
    }

    a {
        color: white;
        font-size: 3.8vmin;
    }

    a:hover {
        color: var(--purple);
        font-size: 3.8vmin;
    }

    figure {
        color: var(--purple);
        font-weight: 100;
        font-size: 1.6vmin;
    }

    .bg {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 90vw;
        height: 80vh;
        background: linear-gradient(rgba(254, 255, 209, 0.75), rgb(237, 179, 215), rgba(171, 229, 237, 0.75));
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        border-radius: 30px;
    }

    .bg-bg {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 90vw;
        height: 100vh;
        background: url(assets/images/97ad88df0c4e91a69aa0ecda66e86523.png) no-repeat;
        background-size: 100vw;
        background-position: center;
    }
    .bg-bg2 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 90vw;
        height: 100vh;
        background: url(assets/images/0a224f2da05016a96102b95042487d83.png) no-repeat;
        background-size: 100vw;
        background-position: center;
    }
    .bg-bg-build {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 90vw;
        height: 100vh;
        background: url(assets/images/b2e8eee9693221bdd743a9f1b0fce7a8.jpg) no-repeat;
        background-size: 100vw;
        background-position: center;
    }

    .bg-bg-bg {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        top: 25vh;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(254, 255, 209, 0.75), rgba(237, 179, 215, 0.75), rgba(171, 229, 237, 0.75));
    }

    .step-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width: 90vw;
        height: 50vh;
        gap: 3vw;
    }

    .item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        row-gap: 1vw;
        border-radius: 30px;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        width: 20vw;
        height: 20vw;
        overflow: hidden;
    }

    .img-one {
        background: url(assets/images/5a5f4f38973e3d9a33fafa4957bf14ec.jpg);
        background-size: cover;
        border-radius: 30px;
        filter: drop-shadow(5px 5px 5px rgba(20, 20, 20, 0.301));
        height: 100%;
        width: 100%;
    }

    .img-two {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 90vw;
        height: 100vh;
        background: url(assets/images/b78f81caf94306898c5e565f21c69836.png) no-repeat;
        background-size: 30vw;
        background-position: center;
    }

    .item-text {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        row-gap: 1vw;
        background-color: white;
        border-radius: 30px;
    }

    .img-ihb {
        background: url(assets/images/3874cefbb72d32b2c6e5b620ada164b6.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .img-objkt {
        background: url(assets/images/5d346d8e067ea520d7c6ac0e8a893a35.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .img-tab {
        background: url(assets/images/a6440d19f271d2c16f4e96bc1a39e257.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .img-design {
        background: url(assets/images/e318c514ed52015054d579460a7064d4.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .img-sync {
        background: url(assets/images/438701d4757fa6f4344d014b02c00c4c.gif);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .img-dezeen {
        background: url(assets/images/3c860919ac75035534cc3f7963a0e75c.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .img-archdaily {
        background: url(assets/images/d1a126f9c076bcbc9bb0aca10e80d900.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .img-thermory {
        background: url(assets/images/6333a9661a777a8585abc993e7b7f92e.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .img-nkd {
        background: url(assets/images/770f2a41ddb8a7da2a185e9f63d826cf.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .img-build {
        background: url(assets/images/1f984bcaa292cbc162ed878cf99f7f85.gif);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .img-bg {
        background: url(assets/images/dab41878f5371398ea5683c2f189fb38.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .img-discord {
        background: url(assets/images/1eb3445cca7f34ec523c2096e8e92646.png);
        height: 30%;
        width: 30%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .right-align {
        display: flex;
        align-items: center;
        justify-items: center;
        flex-direction: column;
        width: 50vw;
        height: 60vh;
    }

    .column-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 80vw;
        height: 100vh;
        gap: 3vw;
        z-index: 997;
    }

    .img-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        row-gap: 1vw;
        width: 100%;
        height: 40vh;
        overflow: hidden;
    }

    .grid {
        display: grid;
        margin: 30px;
        grid-template-columns: auto auto auto;
        justify-content: center;
        gap: 2vw;
    }

    .grid-panel {
        display: flex;
        background: var(--navy);
        filter: drop-shadow(5px 5px 5px rgba(20, 20, 20, 0.301));
        border-radius: 81px;
    }

    .grid-container {
        width: 25vw;
        gap: 10px;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .grid-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 10vw !important;
        height: 10vw !important;
        font-size: 30px;
    }

    model-viewer {
        width: 80%;
        height: 80%;
        --poster-color: transparent;
        margin: 0;
        border: 0;
        z-index: 100;
    }



    .button-icon {
        font-family: 'Sauvage';
        color: white;
        height: 50px;
        background: #ffffff00;
        border: white;
        border-style: solid;
        border-width: thin;
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
        border-radius: 30px;
        align-items: center;
    }

    .button-icon:hover {
        background: var(--purple);
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
        border-radius: 30px;
        border: white;
        border: 5px;
        cursor: pointer;
        align-items: center;

    }

    .button-highlight {
        font-family: 'Sauvage';
        color: white;
        height: 50px;
        background: var(--purple);
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
        border-radius: 30px;
        border: white;
        border: 5px;
        cursor: pointer;
        align-items: center;
        display: none;
    }

    .mobileTag
    {
        display: block;
        text-align: center;
    }

    .button-highlight:hover {
        background: #ffffff00;
        border: var(--purple);
        border-style: solid;
        border-width: thin;
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
        border-radius: 30px;
    }

    header {
        display: flex;
        position: fixed;
        width: 50vw;
        height: 75px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        row-gap: 10px;
        z-index: 100;
        border: #a197f7;
    }

    .header-right {
        display: flex;
        position: fixed;
        right: 0;
        width: 50vw;
        height: 75px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        row-gap: 10px;

    }

    .header-item {
        display: flex;
        cursor: pointer;
        height: 75px;
        width: 100px;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .header-item-right {
        display: flex;
        cursor: pointer;
        height: 75px;
        width: 100px;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .LoadingIconThree {
        background-image: url(assets/images/c34533ce2082441dcf8f2d333d61328c.png);
        background-size: cover;
        position: fixed;
        height: 10vw;
        width: 10vw;
        cursor: pointer;
    }

    a {
        color: white;
        font-size: 3.8vmin;
    }

    a:hover {
        color: var(--purple);
        font-size: 3.8vmin;
    }

    .loading-container {
        display: flex;
        justify-content: center;
        width: 100vw;
        z-index: 998;
        overflow: hidden;
        backdrop-filter: blur(5px);
    }
    model-viewer#reveal {
        --poster-color: transparent;
      }

    .loading-textContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        z-index: 998;
        width: 80vw;
        height: 100vh;
    
    }

    .loading-model {
        width: 100vw;
        height: 100vh;
    }


    .acc-container {
        font-family: 'Sauvage';
    }

    .acc-btn {
        font-family: 'Sauvage';
        width: 100%;
        cursor: pointer;
        text-align: left;
        transition: all 0.5s linear;
        background: none;
        border: 0;
    }

    .acc-btn.is-open:after {
        transform: rotate(90deg);
    }

    .acc-btn:hover,
    .acc-btn.is-open {
        filter: drop-shadow(1px 1px 2px #a197f7);
        font-weight: bold;
    }

    .acc-content {
        max-height: 0;
        color: rgba(0, 0, 0, 0.75);
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    .blurContainer {
        height: 75px;
        width: 100vw;
        position: fixed;
        backdrop-filter: blur(5px);
        z-index: 999;
        -webkit-mask-image: linear-gradient(black, transparent);
        mask-image: linear-gradient(black, transparent);
        display: flex;
    }

}

/*  */
@media screen and (min-width: 601px) {

    html,
    body {
        height: 100vh;
        color: white;
        background-color: var(--navy);
        font-family: 'Sauvage';
        scroll-snap-type: proximity;
        scroll-snap-points-y: repeat(100vh);
        scroll-snap-type: y proximity;
        scroll-behavior: smooth;

    }

    .bg-container {
        height: auto;
        scroll-snap-type: y mandatory;
    }

    .webgl {
        position: fixed;
        top: 0;
        left: 0;
        outline: none;
    }

    .navbar {
        overflow: hidden;
        background-color: white;
        position: fixed;
        top: 0px;
        width: 100vw;
        z-index: 100;
    }

    .navbar a {
        float: right;
        display: block;
        color: #ce639e;
        text-align: center;
        justify-content: center;
        justify-items: center;
        padding: 20px 20px;
        text-decoration: none;
    }

    /* Change background on mouse-over */
    .navbar a:hover {
        color: #cca8bc;
    }


    .section {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        padding-left: 10vw;
        padding-right: 10vw;
        background-position: center;
        scroll-snap-align: start;
        z-index: 999;
    }

    .section-two {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100vh;
        padding-left: 5vw;
        padding-right: 5vw;
        scroll-snap-align: start;
        z-index: 999;
    }

    .gallery {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 5vw;
        overflow: hidden;
    }


    .img3 {
        height: 95vh;
        width: 95vw;
        position: absolute;

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

        filter: blur(8px);
        -webkit-filter: blur(8px);
        background: url(assets/images/ff1580950cdd713901061c676a1b3cb7.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        z-index: -1;
    }

    img {
        display: flex;
        position: relative;
        justify-content: center;
        border: none;
    }

    .icon {
        width: 100%;
        height: 100%;
        padding: 50px 50px;
        background: url(assets/images/5a5f4f38973e3d9a33fafa4957bf14ec.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }


    h1 {
        font-weight: 900;
        color: white;
        font-size: 7vw;
    }

    h2 {
        font-weight: 300;
        color: white;
        font-size: 3.5vw;
    }

    h2 .LoadingBar {
        font-weight: 900;
        color: white;
        font-size: 3.5vw;
    }

    h3 {
        font-weight: 300;
        color: white;
        font-size: 3vw;
    }

    h4 {
        font-weight: 300;
        color: white;
        font-size: 2vw;
    }

    p {
        color: white;
        font-size: 1.8vmin;
    }

    a {
        color: white;
        font-size: 1.8vmin;
    }

    a:hover {
        color: var(--purple);
        font-size: 1.8vmin;
    }

    figure {
        color: var(--purple);
        font-weight: 100;
        font-size: 1.6vmin;
    }

    .bg {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 90vw;
        height: 80vh;
        background: linear-gradient(rgba(254, 255, 209, 0.75), rgb(237, 179, 215), rgba(171, 229, 237, 0.75));
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        border-radius: 30px;
    }

    .bg-bg {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 90vw;
        height: 100vh;
        background: url(assets/images/97ad88df0c4e91a69aa0ecda66e86523.png) no-repeat;
        background-size: 100vw;
        background-position: center;
    }
    .bg-bg2 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 90vw;
        height: 100vh;
        background: url(assets/images/0a224f2da05016a96102b95042487d83.png) no-repeat;
        background-size: 100vw;
        background-position: center;
    }
    .bg-bg-build {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 90vw;
        height: 100vh;
        background: url(assets/images/b2e8eee9693221bdd743a9f1b0fce7a8.jpg) no-repeat;
        background-size: 100vw;
        background-position: center;
    }


    .bg-bg-bg {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        top: 25vh;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(254, 255, 209, 0.75), rgba(237, 179, 215, 0.75), rgba(171, 229, 237, 0.75));
    }

    .step-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width: 90vw;
        height: 50vh;
        gap: 3vw;
    }

    .item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        row-gap: 1vw;
        border-radius: 30px;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        width: 20vw;
        height: 20vw;
        overflow: hidden;
    }

    .img-one {
        background: url(assets/images/5a5f4f38973e3d9a33fafa4957bf14ec.jpg);
        background-size: cover;
        border-radius: 30px;
        filter: drop-shadow(5px 5px 5px rgba(20, 20, 20, 0.301));
        height: 100%;
        width: 100%;
    }

    .img-two {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 90vw;
        height: 100vh;
        background: url(assets/images/b78f81caf94306898c5e565f21c69836.png) no-repeat;
        background-size: 30vw;
        background-position: center;
    }

    .item-text {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        row-gap: 1vw;
        background-color: white;
        border-radius: 30px;
    }

    .img-ihb {
        background: url(assets/images/3874cefbb72d32b2c6e5b620ada164b6.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .img-objkt {
        background: url(assets/images/5d346d8e067ea520d7c6ac0e8a893a35.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .img-tab {
        background: url(assets/images/a6440d19f271d2c16f4e96bc1a39e257.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .img-design {
        background: url(assets/images/e318c514ed52015054d579460a7064d4.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .img-sync {
        background: url(assets/images/438701d4757fa6f4344d014b02c00c4c.gif);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    
    .img-dezeen {
        background: url(assets/images/3c860919ac75035534cc3f7963a0e75c.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .img-archdaily {
        background: url(assets/images/d1a126f9c076bcbc9bb0aca10e80d900.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .img-thermory {
        background: url(assets/images/6333a9661a777a8585abc993e7b7f92e.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .img-nkd {
        background: url(assets/images/770f2a41ddb8a7da2a185e9f63d826cf.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .img-build {
        background: url(assets/images/1f984bcaa292cbc162ed878cf99f7f85.gif);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .img-bg {
        background: url(assets/images/dab41878f5371398ea5683c2f189fb38.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .img-ul {
        background: url(assets/images/2afb0ad890b116cd1bc41504e273bf07.png);
        height: 100%;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .img-discord {
        background: url(assets/images/1eb3445cca7f34ec523c2096e8e92646.png);
        height: 30%;
        width: 30%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .right-align {
        display: flex;
        align-items: center;
        justify-items: center;
        flex-direction: column;
        width: 50vw;
        height: 60vh;
    }

    .column-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width: 80vw;
        height: 100vh;
        gap: 3vw;
        z-index: 997;
    }

    .img-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        row-gap: 1vw;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .grid {
        display: grid;
        margin: 30px;
        grid-template-columns: auto auto auto;
        justify-content: center;
        gap: 2vw;
    }

    .grid-panel {
        display: flex;
        background: var(--navy);
        filter: drop-shadow(5px 5px 5px rgba(20, 20, 20, 0.301));
        border-radius: 81px;
    }

    .grid-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .grid-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 10vw !important;
        height: 10vw !important;
        font-size: 30px;
    }

    model-viewer {
        width: 80%;
        height: 80%;
        --poster-color: transparent;
        margin: 0;
        border: 0;
        z-index: 100;
    }

    .button-icon {
        font-family: 'Sauvage';
        color: white;
        height: 75px;
        background: #ffffff00;
        border: white;
        border-style: solid;
        border-width: thin;
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
        border-radius: 30px;
        align-items: center;
    }

    .button-icon:hover {
        background: var(--purple);
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
        border-radius: 30px;
        border: white;
        border: 5px;
        cursor: pointer;
        align-items: center;

    }

    .button-highlight {
        font-family: 'Sauvage';
        color: white;
        height: 75px;
        background: var(--purple);
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
        border-radius: 30px;
        border: white;
        border: 5px;
        cursor: pointer;
        align-items: center;

    }

    .button-highlight:hover {
        background: #ffffff00;
        border: var(--purple);
        border-style: solid;
        border-width: thin;
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
        border-radius: 30px;
    }

    header {
        display: flex;
        position: fixed;
        width: 50vw;
        height: 75px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        row-gap: 10px;
        z-index: 100000;
        border: #a197f7;
    }

    .header-right {
        display: flex;
        position: fixed;
        right: 0;
        width: 50vw;
        height: 75px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        row-gap: 10px;

    }

    .header-item {
        display: flex;
        cursor: pointer;
        height: 75px;
        width: 100px;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .header-item-right {
        display: flex;
        cursor: pointer;
        height: 75px;
        width: 100px;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .LoadingIconThree {
        background-image: url(assets/images/c34533ce2082441dcf8f2d333d61328c.png);
        background-size: cover;
        position: fixed;
        height: 3vw;
        width: 3vw;
        cursor: pointer;
    }

    a {
        color: white;
        font-size: 1.8vmin;
    }

    a:hover {
        color: var(--purple);
        font-size: 1.8vmin;
    }

    .loading-container {
        display: flex;
        justify-content: center;
        width: 100vw;
        z-index: 998;
        overflow: hidden;
    }

    .loading-textContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        z-index: 998;
        width: 80vw;
        height: 100vh;

    }

    .loading-model {
        width: 100vw;
        height: 100vh;
    }

    .acc-container {
        font-family: 'Sauvage';
    }

    .acc-btn {
        font-family: 'Sauvage';
        width: 100%;
        cursor: pointer;
        text-align: left;
        transition: all 0.5s linear;
        background: none;
        border: 0;
    }

    .acc-btn.is-open:after {
        transform: rotate(90deg);
    }

    .acc-btn:hover,
    .acc-btn.is-open {
        filter: drop-shadow(1px 1px 2px #a197f7);
        font-weight: bold;
    }

    .acc-content {
        max-height: 0;
        color: rgba(0, 0, 0, 0.75);
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    .blurContainer {
        height: 75px;
        width: 100%;
        position: fixed;
        backdrop-filter: blur(5px);
        z-index: 999;
        -webkit-mask-image: linear-gradient(black 60%, transparent);
        mask-image: linear-gradient(black 60%, transparent);
    }

    .mobileTag
    {
        display: none;
    }

}

/*# sourceMappingURL=main.css.map*/