@charset "UTF-8";

html {
    box-sizing: border-box;
    font-size: 100%;
}

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

body {
    margin: 0;
    padding: 0;
    font-family: "LEMON MILK BOLD", sans-serif;
    color: var(--text-color);


    margin: 0;
    /*height: 200vh;*/
    background: linear-gradient(to bottom, #000000 0%,#03056F 20%,#000000 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}

img {
    display: block;
    height: auto;
}

img.bg {

}

h1, h2, h3 {
    font-weight: 700;
    margin-top: 0;
}

h1 {
    font-size: 2.625rem;
    font-size: clamp(2.625rem, 1.77rem + 3.64vw, 4.5rem);
    line-height: 1;
    margin-block-end: 1.25rem;
}

h1.hero__title {
    font-size: 4.625rem;
    font-size: clamp(4.625rem, 0.6197rem + 17.0892vw, 16rem);
    /*letter-spacing: 20px;*/
    line-height: 1.5;
}

@media (min-width: 56.25em) {
    h1.hero__title {
        margin-top: 200px;
    }
}

h1.hero__headline {

    text-align: center;
    margin-bottom: 140px;
}

.gradline {
    color: transparent;
    -webkit-text-stroke: 1px white;
    text-stroke: 1px white;

    /* Gradient fill */
    background: linear-gradient(120deg, #000000, #2580C3);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;

    /* Animation */
    animation: gradientShift 5s ease-in-out infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


p.hero__description {
    text-align: center;
    font-family: "LEMON MILK BOLD", sans-serif;
    font-weight: bold;
    font-size: clamp(1.375rem, 1.1109rem + 1.1268vw, 2.125rem);
}
h2 {
    font-size: 2.25rem;
    font-size: clamp(2.25rem, 1.91rem + 1.45vw, 3rem);
}

h2.hero__content {
    text-align: center;
    font-size: 6.625rem;
    line-height: 1.5;
    background: linear-gradient(45deg, #000428, #004e92, #000428);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px white;
    text-stroke: 2px white;
    margin-block-end: 1.25rem;
}

div.hero {
    margin-top: 200px;
}

@media (min-width: 56.25em) {
    div.hero {
        margin-top: 300px;
    }
}

div.info {
    margin-top: 250px;
}

@media (min-width: 56.25em) {
    div.info {
        margin-top: 350px;
    }
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-top: 0;
    font-size: 1.125rem;
}

p.medium {
    font-size: 1.25rem;
    font-size: clamp(1.25rem, 1.136rem + 0.485vw, 1.5rem);
}

p.large {
    font-size: 1.5rem;
    font-size: clamp(1.5rem, 1.386rem + 0.485vw, 1.75rem);
}

a, a:visited, a:active {
    text-decoration: none;
}


.hero__title {

    text-align: center;
}

form {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

div.register {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    margin-top: 200px;
    margin-bottom: 200px;
}

@media (min-width: 56.25em) {
    div.register {
        width: 40%;
        margin-top: 320px;
    }
}

.formal {
    text-align: center;
    width: 100%;
    font-size: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);
    margin-bottom: 10px;
}

input {
    width: 100%;
    text-align: center;
    font-size: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);
    margin-bottom: 30px;
    border-radius: 10px;
}


.button {
    margin-top: 50px;
    border-radius: 60px;
    font-family: "LEMON MILK BOLD";
}



:root {
    --background-color: hsl(0,0%,100%);
    --text-color: hsl(100,100%,100%);
}

@font-face {
    font-family: "LEMON MILK BOLD";
    src: url("fonts/LEMONMILK-Bold.otf");
}

@font-face {
    font-family: "LEMON MILK REGULAR";
    src: url("fonts/LEMONMILK-Regular.otf");
}