/* -- META -- */
    /* - Variables - */
    * {
        padding: 0;
    }
    :root {
        --black: #090909;
        --gold1: #F9C655;
        --gold2: #F8A107;
        --gold3: #F8872E;
        --darkblue: #0f1a23;
        --blue: #153349;
        --midblue: #2248bb;
        --lightblue: #668cff;
        --bodycolor: #ececec;
    }
    .c {
        color: var(--midblue);
    }
    .button {
        background-color: var(--bodycolor);
        border: 4px solid black;
        padding: 10px;
        border-radius: 20px;
        font-weight: bold;
        font-family: ThiccBoi;
        font-size: 1rem;
        transition: 250ms;
        position: relative;
        z-index: 2;
    }
    .button:hover {
        cursor: pointer;
        background-color: #fefefe;
    }
    .wave {
        width: 100%;
        margin-bottom: -1px;
    }

    /* - Fonts - */
    @font-face {
        font-family: ThiccBoi;
        src: url(/fonts/thiccboi/THICCCBOI-Regular.ttf);
        font-weight: 600;
        font-display: swap;
    }
    @font-face {
        font-family: ThiccBoi;
        src: url(/fonts/thiccboi/THICCCBOI-ExtraBold.ttf);
        font-weight: 700;
        font-display: swap;
    }
    @font-face {
        font-family: ThiccBoi;
        src: url(/fonts/thiccboi/THICCCBOI-Black.ttf);
        font-weight: 800;
        font-display: swap;
    }

    /* - Animations - */
    @keyframes boxFlicker {
        0%, 19.9%, 22%, 62.9%, 64%, 64.9%, 70%, 100% {box-shadow: 0px 0px 20px 0px var(--lightblue);}
        20%, 21.9%, 63%, 63.9%, 65%, 69.9% {box-shadow: 0px 0px 5px 0px var(--lightblue);}
    }
    @keyframes fadeUp {
        from {opacity: 0; transform: translateY(20px)}
        to {opacity: 1; transform: translateY(0)}
    }
    @keyframes enterLeft {
        from {transform: translateX(-30vw)}
        to {transform: translateX(0)}
    }
    @keyframes enterRight {
        from {transform: translateX(40vw)}
        to {transform: translateX(0)}
    }
    @keyframes shootingStar {
        0% {opacity: 1; transform: translate(0, 0), rotate(-45deg)}
        20% {opacity: 1; transform: translate(100svh, 100svh)}
        25% {opacity: 0;}
        98% {opacity: 0;}
        99% {opacity: 1;}
    }

    /* - Curtain Overlay - */
    .overlay {  
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 10;
        left: 0;
        top: 0;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0, 0.9);
        overflow-x: hidden;
        transition: 0.5s;
    }
    .overlay-content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }
    .overlay a, .overlay p {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    .overlay a:hover, .overlay a:focus, .overlay p:hover, .overlay p:focus {
        color: #f1f1f1;
    }
    .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
        cursor: pointer;
    }
    @media screen and (max-height: 450px) {
        .overlay a {font-size: 20px}
        .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
        }
    }

    /* - Html, Body, Section - */
    html {
        scroll-behavior: smooth;
    }
    body {
        margin: 0;
        overflow-x: hidden;
        font-family: ThiccBoi, Arial, Helvetica, sans-serif;
        line-height: 1.7;
        box-sizing: border-box;
        background-color: var(--bodycolor);
    }
    section {
        padding: 50px 5%;
    }
    @media only screen and (min-width: 768px) {
        section {
            padding: 75px 5%;
        }
    }
   
/* -- TOP BAR -- */
@media only screen and (min-width: 0px) {
    #topBar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 6vh;
        background-color: var(--darkblue);
        padding: 10px 5%;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 99;
    }
    #logo {
        display: flex;
        align-items: center;
        color: var(--gold2);
        text-decoration: none;
        font-weight: bold;
        background: linear-gradient(var(--gold1), var(--gold3));
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    #logo span {
        margin-left: 0.5rem;
        font-size: 13px;
        text-align: center;
        font-weight: 800;
    }
    #navBar {
        display: none;
    }
    #menuIcon:hover {
        cursor: pointer;
    }
    #darkToggle {
        display: flex;
        flex-direction: column;
        color: white;
        align-items: center;
        font-weight: bold;
    }
    .switch {
        position: relative;
        display: inline-block;
        width: 45px;
        height: 20px;
    }
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        left: 4px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }   
    input:checked + .slider {
        background-color: var(--black);;
        box-shadow: 0 0 3px white;
    }
    input:checked + .slider:before {
        -webkit-transform: translateX(21px);
        -ms-transform: translateX(21px);
        transform: translateX(21px);
    }
    .slider.round {
        border-radius: 34px;
    }
    .slider.round:before {
        border-radius: 50%;
    }
  
}
@media only screen and (min-width: 900px) {
    #menuIcon {
        display: none;
    }
    #navBar {
        display: inline-block;
    }
    #navBar a {
        color: white;
        padding: 5px 0;
        text-decoration: none;
        margin: 0px 1rem;
        font-size: larger;
        font-weight: bold;
        transition: color 0.25s;
        width: max-content;
        position: relative;
    }
    #navBar a::after {
        content: '';
        height: 4px;
        width: 0%;
        background: var(--gold2);
        position: absolute;
        bottom: 0;
        left: 0;
        transition: 200ms;
    }
    #navBar a:hover::after {
        width: 100%;
    }
    #navBar .active {
        color: var(--gold2);
    }
    #navBar a:hover {
        color: var(--gold2);
    }
}

/* -- HEADERS --*/
@media only screen and (min-width: 0px) {
    #header {
        height: 20svh;
        text-align: center;
        color: white;
        background: linear-gradient(
            rgba(25, 25, 25, 1) 10%,
            rgba(45, 45, 45, 1)
        ); 
    }
    #header h1 {
        font-size: calc(2rem + 1vw);
    }
    #header .c {
        color: var(--gold1)
    }
}

/* -- FORMS -- */
@media only screen and (min-width: 0px) {
    #phoneBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        background-color: #dfdfdf;
        border-radius: 50px;
        padding: 1rem;
        margin: 2rem 0;
    }
    #phoneBox a {
        color: black;
        text-decoration: none;
        font-weight: bold;
        transition: 200ms;
    }
    #phoneBox a:hover {
        color: var(--gold2);
        text-decoration: underline;
    }
    #formBox, form {
        display: flex;
        flex-direction: column;
    }
    #formBox {
        background-color: #dfdfdf;
        padding: 5%;
        border-radius: 50px;
        text-align: center;
    }
    label {
        display: none;
    }
    input, textarea {
        width: 99%;
        font-family: ThiccBoi, Arial, Helvetica, sans-serif;
        font-size: 1rem;
        padding: 1%;
        margin-top: 1rem;
    }
    textarea {
        resize: none;
    }
    #formBox button {
        align-self: center;
        margin-top: 2rem;
    }
}
@media only screen and (min-width: 768px) {
    #contact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 2rem;
        align-items: center;
    }
}

/* -- FOOTER -- */
@media only screen and (min-width: 0px) {
    #footer {
        background-color: var(--darkblue);
        color: white;
        display: flex;
        flex-direction: column;
        padding-top: 2rem;
        padding-bottom: 0;
    }
    #footer h2 {
        text-align: center;
    }
    #footerLogo {
        display: flex;
        flex-direction: column;
    }
    #socials img {
        width: 12.5%;
        max-width: 75px;
        margin: 0 0.1443rem;
    }
    #footerGrid {
        display: grid;
        grid-template-columns: 1fr;
        grid-row-gap: 2rem;
        margin: 2rem 0;
    }
    .footer-list {
        display: flex;
        flex-direction: column;
    }
    .footer-list h3 {
        margin: 0;
        font-size: 1.5rem;
    }
    .footer-list ul {
        padding: 0;
        list-style-type: none;
        line-height: 2.5;
    }
    .footer-list a {
        color: white;
        padding: 5px 0;
        text-decoration: none;
        transition: color 0.25s;
        font-weight: bold;
        position: relative;
    }
    .footer-list a:hover {
        color: var(--gold2);
    }
    .footer-list a::after {
        content: '';
        height: 4px;
        width: 0%;
        background: var(--gold2);
        position: absolute;
        bottom: 0;
        left: 0;
        transition: 200ms;
    }
    .footer-list a:hover::after {
        width: 100%;
    }
    #copyrightBox {
        text-align: center;
        font-size: 12px;
        padding: 10px;
        a {
          color: white;
          text-decoration: none;
          transition: color 200ms;
        }
        a:hover {
            color: yellow;
        }
    }
}
@media only screen and (min-width: 768px) {
    #footerGrid {
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 5%;
    }
    .footer-list {
        text-align: center;
    }
}

.dark {
    --bodycolor: var(--darkblue);
    #topBar, #footer {
        background-color: var(--black);
    }
    section {
        background-color: var(--darkblue);
        color: white;
    }
    .button {
        background: var(--darkblue);
        color: white;
        border: 4px solid var(--darkblue);
        animation: boxFlicker 5s infinite;
    }
    .button:hover {
        background: var(--blue);
        border: 4px solid var(--blue);
    }
    .c {
        color: var(--gold2);     
    }
    #header {
        background-image: url(images/background-dark.svg);
    }
    #formBox, #phoneBox {
        background-color: var(--black);
        box-shadow: 0px 0px 20px 0px var(--lightblue);
    }
    #phoneBox a {
        color: white;
    }
    #phoneBox a:hover {
        color: var(--gold2);
    }
    input, textarea {
        background-color: var(--darkblue);
        color: white;
        border: none;
    }
}