*,
body {
    margin: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

:root {
    --mainColorLighter: #2f4bff;
    --mainColor: #0E2DFF;
    --mainColorDarker: #00E5FF;
    --gearColorA: rgb(186, 186, 186);
    --gearColorB: rgb(153, 153, 153);

    --gear-size: 30rem; /* Pas deze variabele aan om de grootte te schalen */
    --tooth-width: calc(var(--gear-size) * 0.1667); /* Relatieve breedte van de tanden */
    --tooth-height: calc(var(--gear-size) * 1.3); /* Relatieve hoogte van de tanden */
    --center-size: calc(var(--gear-size) / 5); /* Grootte van het middelpunt */

    --textPrimary: #FFFFFF;
    /* textPrimary */
    --textSecondary: #FFFFFF;
    /* textSecondary */
    --constructionColor: #ffdb00;

    --fontHeading: "Montserrat", sans-serif;
    --fontHeadingAlt: "Poppins", sans-serif;
    --fontText: "Montserrat", sans-serif;
    --fontTextAlt: "Poppins", sans-serif;
}


body {
    font-family: var(--fontHeading);
    background-color: #000;
    background: linear-gradient(var(--mainColor) 0%, black 50%);
    color: var(--textPrimary);
    overflow: hidden;
}

.cls-1 {
    fill: #fff;
}

.cls-2 {
    fill: #ffdb00;
}


h1,
h2,
h3 {
    text-transform: uppercase;
    opacity: 1;
    animation: fadeUp 2s .5s cubic-bezier(0.075, 0.82, 0.165, 1) backwards;
}


a {
    opacity: 1;
    animation: fadeUp 2s .5s cubic-bezier(0.075, 0.82, 0.165, 1) backwards;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    height: 100dvh;
    overflow: hidden;
    width: 100vw;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.svg-container {
    z-index: -1;
    position: absolute;
    bottom: -1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    opacity: .1;
}
.gear {
    height: var(--gear-size);
    width: var(--gear-size);
    background-color: var(--mainColorDarker);
    border-radius: 50%;
    position: relative;
    animation: spinner 20s infinite linear;
}

.gear:nth-of-type(2) {
    background-color: var(--mainColorDarker);
}

.gear:nth-of-type(2) .tooth {
    background-color: var(--mainColorDarker);
}

.gear::after {
    content: "";
    position: absolute;
    top: calc(var(--gear-size) / 2 - var(--center-size) / 2);
    left: calc(var(--gear-size) / 2 - var(--center-size) / 2);
    z-index: 10;
    height: var(--center-size);
    width: var(--center-size);
    border-radius: 40%;
    background-color: black;
}

.tooth {
    background-color: var(--mainColorDarker);
    height: var(--tooth-height);
    width: var(--tooth-width);
    position: absolute;
    left: calc(var(--gear-size) / 2 - var(--tooth-width) / 2);
    top: calc((var(--gear-size) - var(--tooth-height)) / 2);
    border-radius: 18%;
}

.tooth:nth-child(1) { transform: rotate(30deg); }
.tooth:nth-child(2) { transform: rotate(60deg); }
.tooth:nth-child(3) { transform: rotate(90deg); }
.tooth:nth-child(4) { transform: rotate(120deg); }
.tooth:nth-child(5) { transform: rotate(150deg); }
.tooth:nth-child(6) { transform: rotate(180deg); }

.gear:nth-child(2) {
    margin-top: calc(var(--gear-size) * 0.9);
    margin-left: calc(var(--gear-size) * 0.1);
    animation: spinner-rev 20s linear infinite;
}

h1 {
    font-weight: 900;
    font-size: 2.5rem;
    display: flex;
    color: var(--constructionColor);
    gap: 1rem;
}

h1 svg {
    width: 3rem;
}

h2 {
    width: 600px;
    margin: 1rem;
}

main div:nth-of-type(1) svg {
    width: 8rem;
    animation: fadeUp 2s .5s cubic-bezier(0.075, 0.82, 0.165, 1) backwards;
    opacity: 1;
}


main>div {
    margin-top: auto;
}

img {
    width: 100%;
}

main .img-container {
    width: 8rem;
    margin: auto 0 1rem 0;
}

main>a {
    text-decoration: none;
    background-color: var(--mainColor);
    color: var(--textPrimary);
    padding: .5rem 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 2rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1rem 0;
    transition: .2s;
}

main>a:hover {
    background-color: #000c74;
}


p {
    font-size: .8rem;
    margin: .5rem 0;
}

main a svg {
    stroke: var(--textPrimary);
    stroke-width: 1;
    width: 1rem;
}


@keyframes fadeUp {
    from {
        opacity: 0;
        translate: 0 1rem;
    }
    to {
        opacity: 1;
        transform: 0 0;
    }
}


@media (max-width: 700px) {
    :root {
        --gear-size: 8rem;
    }
    body {
        overflow: hidden;
    }

    .svg-container {
        width: 100%;
        bottom: 20rem;
    }

    h1 {
        font-size: 1.3rem;
    }

    h2 {
        font-size: 1rem;
        width: 70vw;
    }

}



@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinner-rev {
    to {
        transform: rotate(-360deg);
    }
}