body {
    background-color: #2b4d59;
}

header{
    text-align: center;
    color: white;
    background: rgb(57,153,142);
    background: radial-gradient(circle, rgba(57,153,142,1) 13%, #fac635 46%, rgba(255,170,103,1) 62%);
    font-family: 'Fredoka One', cursive;
}

header a {
    color: white;
    text-align: center;
    font-family: 'Lato', sans-serif;
}
main {
    font-family: 'Montserrat', sans-serif;
}

.card.one {
    background-color: rgba(57,153,142,1);
}
.card.two {
    background-color: #fac635;
}
.card.three {
    background-color: #ffaa67;
}
.card.four {
    background-color: #da674a;
}

.card{
    color: #2b4d59;

}
.card a {
    background-color: white;
    color: rgb(57,153,142);
}

.modal {
    color: black;
}

.side_button {
    background-color: white;
    text-align: center;
    color: #2b4d59;
}

figure{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    font-size: small;
    text-align: center;
}

.quiz {
    background-color:#2b4d59 ;
    color: white;
    display: block;
    height: 25rem;
    width: 25rem;
    justify-content: center;
    align-items: center;
}

.quiz li {
    background-color:#2b4d59 ;
}

.quiz button {
    background-color: #ffaa67;
    color: #2b4d59;
}

.docImg {
    background-color: #2b4d59;
    color: white;
}

.hide1, .hide2, .hide3, .hide4, .hide5 {
    display: none;
}

.start-button {
    margin-left: 33%;
}

#draggable { width: 150px; height: 150px; padding: 0.5em; }