:root
{
    --background: #EDE9E4;
    --black: #000000;
    --white: #FFFFFF;
    --red: #821722;
    --blue: #004A99;
    --skyblue: #B5C3CB;
}

body
{
    padding: 0;
    margin: 1rem;
    font-family: sans-serif;
    background-color: var(--background);
    color: var(--white); 
}

@media screen and (min-width: 300px) 
{
    #Logo {
        margin-left: 0rem;
        margin-right: 0rem;
        width: 100%;
        height: 16.5rem;
        margin-bottom: 0.5rem;
    }
}

@media screen and (min-width: 400px) 
{
    #Logo {
        margin-left: 0rem;
        margin-right: 0rem;
        width: 100%;
        height: 18.7rem;
        margin-bottom: 0.5rem;
    }
}

@media screen and (min-width: 600px) 
{
    #Logo {
        margin-left: 5.7rem;
        margin-right: 5.7rem;
        width: 100%;
        height: 350px;
    }
}

@media screen and (min-width: 800px) 
{
    #Logo {
        margin-left: 6.8rem;
        margin-right: 6.8rem;
        width: 100%;
        height: 27.5rem;
    }
}

@media screen and (min-width: 900px) 
{
    #Logo {
        margin-left: 6.8rem;
        margin-right: 6.8rem;
        width: 100%;
        height: 31rem;
    }
}

@media screen and (min-width: 1000px) 
{
    #Logo {
        margin-left: 9.1rem;
        margin-right: 9.1rem;
        width: 100%;
        height: 35.5rem;
    }
}

@media screen and (min-width: 1100px) 
{
    #Logo {
        margin-left: 9.1rem;
        margin-right: 9.1rem;
        width: 100%;
        height: 39.5rem;
    }
}

@media screen and (min-width: 1300px) 
{
    #Logo {
        margin-left: 28.2rem;
        margin-right: 28.2rem;
        width: 100%;
        height: 43.5rem;
    }
}



.button
{
    background-color: var(--white);
    padding: 15px;
    margin: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: var(--skyblue);
    border-radius: 10px;
    color: var(--black);
}

.button:hover
{
    background-color: var(--background);
    cursor: pointer;
}