:root{
    --bg-top: rgba(255, 166, 0, 0.192);
    --bg-bottom: #008bba35;
    --bg-middle: rgba(77, 77, 77, 0);

    --overlay-top: rgba(255, 255, 255, 0.107);
    --overlay-bottom: rgba(255, 255, 255, 0);

    --bg-colour: rgb(32, 32, 32);

    --text-shadow: 5px 5px 0px rgba(0, 0, 0, 0.5);
}

body{
    background-color: var(--bg-colour);
    background-image: linear-gradient(
        to bottom, 
        var(--bg-top), 
        var(--bg-middle),
        var(--bg-middle),
        var(--bg-middle),
        var(--bg-middle),
        var(--bg-middle),
        var(--bg-middle),
        var(--bg-bottom)
    ),
    linear-gradient(
        to bottom, 
        var(--overlay-top), 
        var(--overlay-bottom)
    );
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
}

h1{
    font-family: "Roboto", Verdana, sans-serif;
    font-size: 4vw;
    color: white;
    text-shadow: var(--text-shadow);
    letter-spacing: 0.6rem;
    margin: 0;
    padding: 10px;
    transform: scale(1, 1);
}