body 
{
    background: radial-gradient(
        circle at 20% 20%,
        hsl(209, 100%, 57%),
        hsl(211, 100%, 60%),
        hsl(211, 100%, 65%),
        hsl(212, 100%, 55%),
        hsl(211, 100%, 70%),
        hsl(210, 100%, 76%),
        hsl(209, 100%, 63%)
    );
    background-repeat: no-repeat;
    background-size: 200% 200%;
    background-attachment: fixed;
    animation: moveGradient 40s infinite ease-in-out;
}

@keyframes moveGradient {
    0% 
    {
        background-position: 0% 0%;
    }
    5% 
    {
        background-position: 50% 0%;
    }
    10% 
    {
        background-position: 100% 0%;
    }
    15% 
    {
        background-position: 100% 50%;
    }
    20% 
    {
        background-position: 50% 100%;
    }
    25% 
    {
        background-position: 100% 0%;
    }
    30% 
    {
        background-position: 0% 50%;
    }
    35% 
    {
        background-position: 0% 100%;
    }
    40% 
    {
        background-position: 0% 0%;
    }
    45% 
    {
        background-position: 50% 0%;
    }
    50% 
    {
        background-position: 100% 100%;
    }
    55% 
    {
        background-position: 100% 50%;
    }
    60% 
    {
        background-position: 50% 100%;
    }
    65% 
    {
        background-position: 100% 0%;
    }
    70% 
    {
        background-position: 0% 50%;
    }
    75% 
    {
        background-position: 0% 100%;
    }
    80% 
    {
        background-position: 0% 0%;
    }
    85% 
    {
        background-position: 50% 0%;
    }
    90% 
    {
        background-position: 100% 0%;
    }
    95% 
    {
        background-position: 100% 50%;
    }
    100% 
    {
        background-position: 0% 0%;
    }
}
main
{
    display:flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    user-select: none;
}

main > div
{
    width: auto;
    display: grid;
    text-align: center;
    margin-bottom: 130px;
}

main > div > h1
{
    font-size: 2.6em;
    letter-spacing: -1px;
    font-family: 'Courier New', Courier, monospace;
    margin: 10px;
}

main > div > h2
{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1em;
    font-weight: 500;
    margin: 10px;
}

main > div > button
{
    width: 190px;
    height: 40px;
    align-content: center;
    margin: auto;
    margin-top: 50px;
    font-family: 'Courier New', Courier, monospace;
    border: 1px solid black;
    border-radius: 5px;
    color: black;
    background-color: transparent;
    font-size: 1.15em;
    font-weight: 400;
    font-family: 'Courier New', Courier, monospace;
    cursor: pointer;
    transition: background-color 0.5s;
}

main > div > button:hover
{
    background-color:rgb(171, 190, 245) ;
}