@font-face {
    font-family: "Candyslim";
    src: url("fonts/Candyslim.ttf") format("truetype");
}
@font-face {
    font-family: "TT";
    src: url("fonts/TT_Turns_Trial_Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Delio";
    src: url("fonts/Delio.ttf") format("truetype");
}

:root {
    --bg        : #130B39;
    --dark      : #02071a;
    --text      : #F0F1FA;
    --headings  : #c056ad;
    --primary   : #AD66FF;
    --link      :rgb(231, 7, 153);
    --secondary : #738195;
    --gray      : #B3B3C4;

    --spacing-tiny   : 10px;
    --spacing-small  : 20px;
    --spacing-medium : 40px;
    --spacing-large  : 80px;
    --spacing-xl     : 120px;
    --spacing-xxl    : 180px;

    --gutter : 20vw;

    --text-tiny   : 12px;
    --text-small  : 16px;
    --text-medium : 22px;
    --text-large  : 30px;
    --text-xl     : 56px;
    --text-xxl    : 80px;
}

/* desktop */
@media only screen and (max-width: 1600px) {
    :root {
        --spacing-tiny   : 5px;
        --spacing-small  : 15px;
        --spacing-medium : 30px;
        --spacing-large  : 60px;
        --spacing-xl     : 90px;
        --spacing-xxl    : 160px;

        --gutter : 10vw;

        --text-tiny   : 10px;
        --text-small  : 12px;
        --text-medium : 16px;
        --text-large  : 22px;
        --text-xl     : 48px;
        --text-xxl    : 60px;
    }
}

/* tablet */
@media only screen and (max-width: 900px) {
    :root {
        --gutter : 5vw;

        --text-tiny   : 10px;
        --text-small  : 12px;
        --text-medium : 14px;
        --text-large  : 20px;
        --text-xl     : 40px;
        --text-xxl    : 50px;
    }
    #navigation #sprite2 {
        left: -10% !important;
        opacity: 0.4 !important;
        height: 70% !important;
    }
    #hero #sprite1 {
        bottom: -5% !important;
        height: 100% !important;
    }
}

/* mobile */
@media only screen and (max-width: 500px) {
    :root {
        --gutter : 20px;
        --text-tiny   : 10px;
        --text-small  : 12px;
        --text-medium : 14px;
        --text-large  : 18px;
        --text-xl     : 24px;
        --text-xxl    : 36px;
    }
    #hero #sprite1 {
        height: 70% !important;
        opacity: 0.5 !important;
    }
    #navigation #sprite2 {
        left: -15% !important;
        height: 50% !important;
        opacity: 0.5 !important;
    }
    footer #sprite3 {
        bottom: 50% !important;
        right: -5% !important;
        height: 90% !important;
    }
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg);
    min-height: 100vh;
    min-width: 100vw;
}
html::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
    background: linear-gradient(165deg, #170110, var(--bg), var(--dark));
}

body {
    margin: 0;
    color: var(--text);
    overflow-x: hidden;
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body * {
    line-height: 1.1;
    font-family: 'Delio';
}

body h3, body h4, body h5, body b {
    color: var(--headings);
}

body h1 {
    font-family: 'Candyslim';
    font-size: var(--text-xxl);
}
body h2 {
    font-size: var(--text-xl);
}
body h3 {
    font-size: var(--text-large);
}
body h4, body p, body span, body li {
    font-size: var(--text-medium);
}
body small {
    font-size: var(--text-small);
}

body li {
    list-style: inside;
}

body p, body small, body li {
    line-height: 1.8;
    font-family: 'TT';
    letter-spacing: 1.3px;
}
body a {
    color: var(--link);
    font-weight: 700;
}

body button {
    color: var(--text);
    transition: all 0.3s;
    background-color: var(--primary);
    padding: var(--spacing-small);
    font-size: var(--text-large);
}

body button.small {
    padding: var(--spacing-small);
    font-size: var(--text-medium);
    background-color: var(--gray);
    filter: drop-shadow(5px 5px var(--link));
}
body button.big {
    padding: var(--spacing-small);
    font-size: var(--text-xl);
    padding: var(--spacing-medium);
    background-color: var(--link);
}

body button.secondary {
    background-color: var(--secondary);
    filter: none;
}

button:hover {
    scale: 1.05;
    filter: drop-shadow(5px 5px var(--link));
}
button.secondary:hover {
    scale: 1.05;
    filter: drop-shadow(5px 5px var(--primary));
}

body > div:not(#navbar, #hero) {
    padding: 0 var(--gutter);
    margin-bottom: var(--spacing-xxl);
}

.content {
    gap: var(--spacing-small);
}
.gap-lg {
    gap: var(--spacing-large);
}

.card {
    transition: scale 0.3s, drop-shadow 0.3s;
    background: var(--dark);
    border: solid 2px var(--primary);
    padding: var(--spacing-medium);
    gap: var(--spacing-tiny);
}
.card.col-span-full {
    /* border: solid 2px var(--link); */
    background: linear-gradient(210deg, #513078, var(--dark) 30%);
}
.card:not(.col-span-full) *:not(h3) {
    display: none;
}

.card * {
    color: var(--text);
}
.card:not(.col-span-full):hover {
    scale: 1.02;
    filter: drop-shadow(5px 5px var(--link));
}

#navbar {
    max-height: 100vh;
    transition: all 0.6s;
    z-index: 100;
    width: 100%;
    position: fixed;
    left: 0; top: 0;
    padding: var(--spacing-small) var(--gutter);
    background: linear-gradient(var(--dark) 50%, rgba(0,0,0,0));
    gap: 0px;
}
#navbar:has(.hamburger[aria-expanded="true"]){
    background: linear-gradient(var(--dark) 10%, rgba(0,0,0,0.5));
    backdrop-filter: blur(10px);
    gap: var(--spacing-small);
}

#navbar img {
    transition: all 0.6s;
    height: var(--spacing-large);
}
#navbar:has(.hamburger[aria-expanded="true"]) img {
    transition: all 0.6s;
    height: var(--spacing-xxl);
}

#navbar .nav {
    overflow: hidden;
    transition: all 0.6s;
    opacity: 0;
    height: 0vh;
    pointer-events: none;

    overflow-y: scroll;
    max-height: 100%;
    scrollbar-width: none;
}

#navbar:has(.hamburger[aria-expanded="true"]) .nav {
    opacity: 1;
    height: 100vh;
    pointer-events: all;
}

#navigation a {
    font-size: var(--text-large);
    color: var(--text);
    padding: var(--spacing-medium) 0px var(--spacing-small) 0px;
    border-top: solid 2px var(--gray);
    position: relative;
    z-index: 2;
}

#navigation #sprite2 {
    opacity: 0.8;
    mask-image: linear-gradient(rgba(0,0,0,1) 30%, rgba(0,0,0,0));
    position: absolute;
    bottom: 0; left: 0;
    height: 85%; width: auto;
    object-fit: cover;
    z-index: 1;
}

#hero {
    min-height: 70vh;
    background: var(--dark);
    padding: var(--spacing-xl) var(--gutter);
    margin-bottom: var(--spacing-xxl);
}

#hero img:not(#sprite1) {
    opacity: 0.8;
    mask-image: linear-gradient(rgba(0,0,0,1) 30%, rgba(0,0,0,0));
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}
#hero #sprite1 {
    opacity: 0.8;
    mask-image: linear-gradient(rgba(0,0,0,1) 30%, rgba(0,0,0,0));
    position: absolute;
    bottom: -15%; right: 0;
    height: 115%; width: auto;
    object-fit: cover;
    z-index: 1;
}
#hero *:not(img) {
    z-index: 2;
}
#hero .content *:not(img, a, button) {
    text-shadow: 0px 3px 7px black;
    background-color: rgba(0,0,0,0.25);
    box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.25);
    padding: var(--spacing-small);
}

#partners, #partner, footer {
    background: var(--dark);
    padding: var(--spacing-large) var(--gutter) !important;
}

footer {
    position: relative;
}

footer #sprite3 {
    mask-image: linear-gradient(rgba(0,0,0,1) 30%, rgba(0,0,0,0));
    position: absolute;
    bottom: 0; right: 0;
    height: 130%; width: auto;
    object-fit: cover;
    z-index: 1;
}
footer * {
    position: relative;
    z-index: 2;
}

#mood img {
    border: 2px solid var(--primary);
}