html {
    background-color: cornsilk;
}

h1 {
    text-align: center;
    font-family: "Futura", sans-serif;
    font-weight: bold;
}

h2 {
    text-align: center;
    font-family: "Futura", sans-serif;
}


#container {
    background-color: black;
    height: 700px;
    width: 1050px;
    outline: 16px solid black;
    outline-offset: 4px;
    margin: 80px auto;
    padding: 10px;
}

.circle {
    height: 120px;
    width: 120px;
    border-radius: 50%;
}

.rectangle {
    height: 100px;
    width: 200px;
}

.thin {
    height: 25px;
    width: 90px;
}

.square {
    height: 110px;
    width: 90px;
}

#whitecircle1 {
    background-color: cornsilk;
    margin-left: 20px;
    margin-top: 20px;
}

#whitecircle2 {
    background-color: cornsilk;
    margin-left: 200px;
    margin-top: -250px;
}

#whitecircle3 {
    background-color: cornsilk;
    margin-left: 700px;
    margin-top: -570px;
}

#whitecircle4 {
    background-color: cornsilk;
    margin-left: 830px;
    margin-top: -120px;
}

#whitecircle5 {
    background-color: cornsilk;
    margin-left: 700px;
    margin-top: 10px;
}

#whitecircle6 {
    background-color: cornsilk;
    margin-left: 830px;
    margin-top: -120px;
}

#whitecircle7 {
    background-color: cornsilk;
    margin-left: 700px;
    margin-top: 10px;
}

#whitecircle8 {
    background-color: cornsilk;
    margin-left: 700px;
    margin-top: 10px;
}

#whitecircle9 {
    background-color: cornsilk;
    margin-left: 700px;
    margin-top: 30px;
}

#whitecircle10 {
    background-color: cornsilk;
    margin-left: 570px;
    margin-top: -120px;
}

#bluecircle1 {
    background-color: cadetblue;
    margin-left: 160px;
    margin-top: -120px;
}

#bluecircle2 {
    background-color: cadetblue;
    margin-left: 300px;
    margin-top: -120px;
}

#rectangle1 {
    background-color: cornsilk;
    margin-left: 440px;
    margin-top: -30px;
}

#rectangle2 {
    background-color: cornsilk;
    margin-left: -10px;
    margin-top: 100px;
}

#rectangle3 {
    background-color: cornsilk;
    margin-left: 880px;
    margin-top: 100px;
}

#thinwhite1 {
    background-color: cornsilk;
    margin-left: 40px;
    margin-top: 90px;
}

#thinwhite2 {
    background-color: cornsilk;
    margin-left: 40px;
    margin-top: 25px;
}

#thinwhite3 {
    background-color: cornsilk;
    margin-left: 40px;
    margin-top: 25px;
}

#thinwhite4 {
    background-color: cornsilk;
    margin-left: 40px;
    margin-top: 25px;
}

#greyblock {
    background-color: darkgrey;
    margin-left: 350px;
    margin-top: -170px;
}

#redblock {
    background-color: firebrick;
    margin-left: 900px;
    margin-top: -200px;
}

/* Button */ 

.buttons {
    list-style-type: none;
}

.buttons a {
    background-color: cornsilk;
    color: black;
    border: 4px solid black;
    border-radius: 25px;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    display: block;
    width: 200px;
    margin: auto;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: bold;
    transition: background-color 0.4s, border 0.4s, color 0.4s;
}

.buttons a:hover{
    background-color: black;
    color: white;
    border: 4px solid cornsilk;
    border-radius: 25px;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    display: block;
    width: 200px;
    margin: auto;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: bold;
}