@keyframes main-title {
    0% {
        --color1: rgb(0,0,0);
        --color2: rgb(0,0,0);
    }
    0.31% {--color1: rgb(0,1,0)}
    0.62% {--color1: rgb(0,2,0)}
    0.94% {--color1: rgb(0,3,0)}
    1.25% {--color1: rgb(0,4,0)}
    1.56% {--color1: rgb(0,5,0)}
    1.88% {--color1: rgb(0,6,0)}
    2.19% {--color1: rgb(0,7,0)}
    2.5% {--color1: rgb(0,8,0)}
    2.81% {--color1: rgb(0,9,0)}
    3.12% {--color1: rgb(0,10,0)}
    3.44% {--color1: rgb(0,11,0)}
    3.75% {--color1: rgb(0,12,0)}
    4.06% {--color1: rgb(0,13,0)}
    4.38% {--color1: rgb(0,14,0)}
    4.69% {--color1: rgb(0,15,0)}
    5.0% {--color1: rgb(0,16,0)}
    5.31% {--color1: rgb(0,17,0)}
    5.62% {--color1: rgb(0,18,0)}
    5.94% {--color1: rgb(0,19,0)}
    6.25% {--color1: rgb(0,20,0)}
    6.56% {--color1: rgb(0,21,0)}
    6.88% {--color1: rgb(0,22,0)}
    7.19% {--color1: rgb(0,23,0)}
    7.5% {--color1: rgb(0,24,0)}
    7.81% {--color1: rgb(0,25,0)}
    8.12% {--color1: rgb(0,26,0)}
    8.44% {--color1: rgb(0,27,0)}
    8.75% {--color1: rgb(0,28,0)}
    9.06% {--color1: rgb(0,29,0)}
    9.38% {--color1: rgb(0,30,0)}
    9.69% {--color1: rgb(0,31,0)}
    10.0% {--color1: rgb(0,32,0)}
    10.31% {--color1: rgb(0,33,0)}
    10.62% {--color1: rgb(0,34,0)}
    10.94% {--color1: rgb(0,35,0)}
    11.25% {--color1: rgb(0,36,0)}
    11.56% {--color1: rgb(0,37,0)}
    11.88% {--color1: rgb(0,38,0)}
    12.19% {--color1: rgb(0,39,0)}
    12.5% {--color1: rgb(0,40,0)}
    12.81% {--color1: rgb(0,41,0)}
    13.12% {--color1: rgb(0,42,0)}
    13.44% {--color1: rgb(0,43,0)}
    13.75% {--color1: rgb(0,44,0)}
    14.06% {--color1: rgb(0,45,0)}
    14.38% {--color1: rgb(0,46,0)}
    14.69% {--color1: rgb(0,47,0)}
    15.0% {--color1: rgb(0,48,0)}
    15.31% {--color1: rgb(0,49,0)}
    15.62% {--color1: rgb(0,50,0)}
    15.94% {--color1: rgb(0,51,0)}
    16.25% {--color1: rgb(0,52,0)}
    16.56% {--color1: rgb(0,53,0)}
    16.88% {--color1: rgb(0,54,0)}
    17.19% {--color1: rgb(0,55,0)}
    17.5% {--color1: rgb(0,56,0)}
    17.81% {--color1: rgb(0,57,0)}
    18.12% {--color1: rgb(0,58,0)}
    18.44% {--color1: rgb(0,59,0)}
    18.75% {--color1: rgb(0,60,0)}
    19.06% {--color1: rgb(0,61,0)}
    19.38% {--color1: rgb(0,62,0)}
    19.69% {--color1: rgb(0,63,0)}
    20.0% {--color1: rgb(0,64,0)}
    20.31% {--color1: rgb(0,65,0)}
    20.62% {--color1: rgb(0,66,0)}
    20.94% {--color1: rgb(0,67,0)}
    21.25% {--color1: rgb(0,68,0)}
    21.56% {--color1: rgb(0,69,0)}
    21.88% {--color1: rgb(0,70,0)}
    22.19% {--color1: rgb(0,71,0)}
    22.5% {--color1: rgb(0,72,0)}
    22.81% {--color1: rgb(0,73,0)}
    23.12% {--color1: rgb(0,74,0)}
    23.44% {--color1: rgb(0,75,0)}
    23.75% {--color1: rgb(0,76,0)}
    24.06% {--color1: rgb(0,77,0)}
    24.38% {--color1: rgb(0,78,0)}
    24.69% {--color1: rgb(0,79,0)}
    25.0% {--color1: rgb(0,80,0)}
    25.31% {--color1: rgb(0,81,0)}
    25.62% {--color1: rgb(0,82,0)}
    25.94% {--color1: rgb(0,83,0)}
    26.25% {--color1: rgb(0,84,0)}
    26.56% {--color1: rgb(0,85,0)}
    26.88% {--color1: rgb(0,86,0)}
    27.19% {--color1: rgb(0,87,0)}
    27.5% {--color1: rgb(0,88,0)}
    27.81% {--color1: rgb(0,89,0)}
    28.12% {--color1: rgb(0,90,0)}
    28.44% {--color1: rgb(0,91,0)}
    28.75% {--color1: rgb(0,92,0)}
    29.06% {--color1: rgb(0,93,0)}
    29.38% {--color1: rgb(0,94,0)}
    29.69% {--color1: rgb(0,95,0)}
    30.0% {--color1: rgb(0,96,0)}
    30.31% {--color1: rgb(0,97,0)}
    30.62% {--color1: rgb(0,98,0)}
    30.94% {--color1: rgb(0,99,0)}
    31.25% {--color1: rgb(0,100,0)}
    31.56% {--color1: rgb(0,101,0)}
    31.88% {--color1: rgb(0,102,0)}
    32.19% {--color1: rgb(0,103,0)}
    32.5% {--color1: rgb(0,104,0)}
    32.81% {--color1: rgb(0,105,0)}
    33.12% {--color1: rgb(0,106,0)}
    33.44% {--color1: rgb(0,107,0)}
    33.75% {--color1: rgb(0,108,0)}
    34.06% {--color1: rgb(0,109,0)}
    34.38% {--color1: rgb(0,110,0)}
    34.69% {--color1: rgb(0,111,0)}
    35.0% {--color1: rgb(0,112,0)}
    35.31% {--color1: rgb(0,113,0)}
    35.62% {--color1: rgb(0,114,0)}
    35.94% {--color1: rgb(0,115,0)}
    36.25% {--color1: rgb(0,116,0)}
    36.56% {--color1: rgb(0,117,0)}
    36.88% {--color1: rgb(0,118,0)}
    37.19% {--color1: rgb(0,119,0)}
    37.5% {--color1: rgb(0,120,0)}
    37.81% {--color1: rgb(0,121,0)}
    38.12% {--color1: rgb(0,122,0)}
    38.44% {--color1: rgb(0,123,0)}
    38.75% {--color1: rgb(0,124,0)}
    39.06% {--color1: rgb(0,125,0)}
    39.38% {--color1: rgb(0,126,0)}
    39.69% {--color1: rgb(0,127,0)}
    40.0% {--color1: rgb(0,128,0)}
    40.31% {--color1: rgb(0,129,0)}
    40.62% {--color1: rgb(0,130,0)}
    40.94% {--color1: rgb(0,131,0)}
    41.25% {--color1: rgb(0,132,0)}
    41.56% {--color1: rgb(0,133,0)}
    41.88% {--color1: rgb(0,134,0)}
    42.19% {--color1: rgb(0,135,0)}
    42.5% {--color1: rgb(0,136,0)}
    42.81% {--color1: rgb(0,137,0)}
    43.12% {--color1: rgb(0,138,0)}
    43.44% {--color1: rgb(0,139,0)}
    43.75% {--color1: rgb(0,140,0)}
    44.06% {--color1: rgb(0,141,0)}
    44.38% {--color1: rgb(0,142,0)}
    44.69% {--color1: rgb(0,143,0)}
    45.0% {--color1: rgb(0,144,0)}
    45.31% {--color1: rgb(0,145,0)}
    45.62% {--color1: rgb(0,146,0)}
    45.94% {--color1: rgb(0,147,0)}
    46.25% {--color1: rgb(0,148,0)}
    46.56% {--color1: rgb(0,149,0)}
    46.88% {--color1: rgb(0,150,0)}
    47.19% {--color1: rgb(0,151,0)}
    47.5% {--color1: rgb(0,152,0)}
    47.81% {--color1: rgb(0,153,0)}
    48.12% {--color1: rgb(0,154,0)}
    48.44% {--color1: rgb(0,155,0)}
    48.75% {--color1: rgb(0,156,0)}
    49.06% {--color1: rgb(0,157,0)}
    49.38% {--color1: rgb(0,158,0)}
    49.69% {--color1: rgb(0,159,0)}
    50.0% {--color1: rgb(0,160,0)}
    50.31% {--color1: rgb(0,161,0)}
    50.62% {--color1: rgb(0,162,0)}
    50.94% {--color1: rgb(0,163,0)}
    51.25% {--color1: rgb(0,164,0)}
    51.56% {--color1: rgb(0,165,0)}
    51.88% {--color1: rgb(0,166,0)}
    52.19% {--color1: rgb(0,167,0)}
    52.5% {--color1: rgb(0,168,0)}
    52.81% {--color1: rgb(0,169,0)}
    53.12% {--color1: rgb(0,170,0)}
    53.44% {--color1: rgb(0,171,0)}
    53.75% {--color1: rgb(0,172,0)}
    54.06% {--color1: rgb(0,173,0)}
    54.38% {--color1: rgb(0,174,0)}
    54.69% {--color1: rgb(0,175,0)}
    55.0% {--color1: rgb(0,176,0)}
    55.31% {--color1: rgb(0,177,0)}
    55.62% {--color1: rgb(0,178,0)}
    55.94% {--color1: rgb(0,179,0)}
    56.25% {--color1: rgb(0,180,0)}
    56.56% {--color1: rgb(0,181,0)}
    56.88% {--color1: rgb(0,182,0)}
    57.19% {--color1: rgb(0,183,0)}
    57.5% {--color1: rgb(0,184,0)}
    57.81% {--color1: rgb(0,185,0)}
    58.12% {--color1: rgb(0,186,0)}
    58.44% {--color1: rgb(0,187,0)}
    58.75% {--color1: rgb(0,188,0)}
    59.06% {--color1: rgb(0,189,0)}
    59.38% {--color1: rgb(0,190,0)}
    59.69% {--color1: rgb(0,191,0)}
    60.0% {--color1: rgb(0,192,0)}
    60.31% {--color1: rgb(0,193,0)}
    60.62% {--color1: rgb(0,194,0)}
    60.94% {--color1: rgb(0,195,0)}
    61.25% {--color1: rgb(0,196,0)}
    61.56% {--color1: rgb(0,197,0)}
    61.88% {--color1: rgb(0,198,0)}
    62.19% {--color1: rgb(0,199,0)}
    62.5% {--color1: rgb(0,200,0)}
    62.81% {--color1: rgb(0,201,0)}
    63.12% {--color1: rgb(0,202,0)}
    63.44% {--color1: rgb(0,203,0)}
    63.75% {--color1: rgb(0,204,0)}
    64.06% {--color1: rgb(0,205,0)}
    64.38% {--color1: rgb(0,206,0)}
    64.69% {--color1: rgb(0,207,0)}
    65.0% {--color1: rgb(0,208,0)}
    65.31% {--color1: rgb(0,209,0)}
    65.62% {--color1: rgb(0,210,0)}
    65.94% {--color1: rgb(0,211,0)}
    66.25% {--color1: rgb(0,212,0)}
    66.56% {--color1: rgb(0,213,0)}
    66.88% {--color1: rgb(0,214,0)}
    67.19% {--color1: rgb(0,215,0)}
    67.5% {--color1: rgb(0,216,0)}
    67.81% {--color1: rgb(0,217,0)}
    68.12% {--color1: rgb(0,218,0)}
    68.44% {--color1: rgb(0,219,0)}
    68.75% {--color1: rgb(0,220,0)}
    69.06% {--color1: rgb(0,221,0)}
    69.38% {--color1: rgb(0,222,0)}
    69.69% {--color1: rgb(0,223,0)}
    70.0% {--color1: rgb(0,224,0)}
    70.31% {--color1: rgb(0,225,0)}
    70.62% {--color1: rgb(0,226,0)}
    70.94% {--color1: rgb(0,227,0)}
    71.25% {--color1: rgb(0,228,0)}
    71.56% {--color1: rgb(0,229,0)}
    71.88% {--color1: rgb(0,230,0)}
    72.19% {--color1: rgb(0,231,0)}
    72.5% {--color1: rgb(0,232,0)}
    72.81% {--color1: rgb(0,233,0)}
    73.12% {--color1: rgb(0,234,0)}
    73.44% {--color1: rgb(0,235,0)}
    73.75% {--color1: rgb(0,236,0)}
    74.06% {--color1: rgb(0,237,0)}
    74.38% {--color1: rgb(0,238,0)}
    74.69% {--color1: rgb(0,239,0)}
    75.0% {--color1: rgb(0,240,0)}
    75.31% {--color1: rgb(0,241,0)}
    75.62% {--color1: rgb(0,242,0)}
    75.94% {--color1: rgb(0,243,0)}
    76.25% {--color1: rgb(0,244,0)}
    76.56% {--color1: rgb(0,245,0)}
    76.88% {--color1: rgb(0,246,0)}
    77.19% {--color1: rgb(0,247,0)}
    77.5% {--color1: rgb(0,248,0)}
    77.81% {--color1: rgb(0,249,0)}
    78.12% {--color1: rgb(0,250,0)}
    78.44% {--color1: rgb(0,251,0)}
    78.75% {--color1: rgb(0,252,0)}
    79.06% {--color1: rgb(0,253,0)}
    79.38% {--color1: rgb(0,254,0)}
    100% {--color1: rgb(0,255,0)}
}

.scroll-text {
    font-family: "vox", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 300%;
    color: white;
}

@keyframes scroll-arrow {
    0% {transform: translateY(-20pt) rotate(45deg);}
    50% {transform: translateY(20pt) rotate(45deg);}
    100% {transform: translateY(-20pt) rotate(45deg);}
}

.scroll-arrow {
    border: solid white;
    border-width: 0 10pt 10pt 0;
    display: inline-block;
    padding: 3px;
    
    height: 15pt;
    width: 15pt;

    position: relative;

    transform: translateY(-20pt) rotate(45deg);

    animation-name: scroll-arrow;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.title-div
{
    height: 100%;
    align-items: center;
}

.main-title
{
    font-family: "vox", sans-serif;
    font-weight: 700;
    font-style: normal;

    font-size: 6em;

    position: absolute;
    bottom: 0px;

    text-align: center;
    width: 100%;

    --color2: rgb(0,0,0);
    background-image: linear-gradient(var(--color1), var(--color2));
    background-clip: text;
    color: transparent;

    animation-name: main-title;
    animation-timeline: scroll();
}

@font-face {
    font-family: Ofont;
    src: url(fonts/OFont.ttf);
}

.text-logo
{
    font-family: Ofont;
    font-size: 6.2em;

    position: absolute;
    bottom: 0px;
    margin-left: 780px;

    text-align: center;
    width: 10%;

    --color2: rgb(0,0,0);
    background-image: linear-gradient(var(--color1), var(--color2));
    background-clip: text;
    color: transparent;

    animation-name: main-title;
    animation-timeline: scroll();
}

.content-div
{
    height: 75%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}


.socials-div
{
    margin-top: auto;
    width: 100%;
    height: 50pt;
}