html {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    background-color:grey;
}
h1 {
    margin-top: 2%;
    text-align: center;
    font-size: 3em;
}
p {
    margin-left: 20%;
    margin-right: 20%;
}
ul {
    margin-left: 20%;
    margin-right: 20%;
}
.cheese {
    height: 10%;
    filter: brightness(100%);
}
.manycheese {
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    filter: brightness(100%);
}
.cheese:hover {
    filter: brightness(150%);
}

.manycheese:hover {
    filter: brightness(150%);
}
.center {
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
}
button {
    text-align: center;
    margin-top: 1%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5em;
}
@keyframes greenback {
    0% {
        background-color: white;
    }
    100% { 
        background-color:lightgreen;
    }
}
@keyframes fromCenter {
    0% {
        position: fixed;
        top: 40%;
        left: 10%;
        right: 10%;
        opacity: 0;
    }
    65% {
        position: fixed;
        top: 40%;
        left: 10%;
        right: 10%;
        opacity: 1;
    }
    99% {
        position: fixed;
        top: 0%;
        left: 10%;
        right: 10%;
        opacity: 1;
    }
    100% {
        position: relative;
        margin-top: 30px;
        text-align: center;
        font-size: 3em;
    }
}
@keyframes blueBack {
    0% {
        background-color: lightgreen;
    }
    100% {
        background-color: lightsteelblue;
    }
}
@keyframes blueBack {
    0% {
        background-color: lightgreen;
    }
    100% {
        background-color: lightsteelblue;
    }
}
@keyframes goldBack {
    0% {
        background-color: lightsteelblue;
    }
    100% {
        background-color : goldenrod;
    }
}
@keyframes brownBack {
    0% {
        background-color: goldenrod;
    }
    100% {
        background-color: burlywood;
    }
}
@keyframes otherBlue{
    0% {
        background-color: burlywood;
    }
    100% {
        background-color: mediumaquamarine;
    }
}
@keyframes whiteBack {
    0% {
        background-color: grey;
    }
    100% {
        background-color: white;
    }
}
@keyframes otherGreenBack {
    0% {
        background-color: white;
    }
    100% {
        background-color: lightgreen;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity : 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity : 0;
    }
}