body {
font-family: 'Quicksand';
margin: 0;
padding: 0;
background-color: #212326;
}

/* HEADER */

#header {
background-color: #3db1cc;
padding: 1rem;
color: #212326;
text-align: center;
}

#menu {
display: inline-block;
vertical-align: middle;
margin-right: 2rem;
}

#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu li {
display: inline-block;
}

#menu li a {
display: block;
padding: 1rem;
color: #212326;
font-weight: bold;
text-decoration: none;
font-size: 1.5rem;
}

#menu li a:hover {
color: #3db1cc;
background-color: #fff;
}

/* HEADER */

/* DIVERS */

.DNF:after {
display: block;
content: "";
width: 250px;
height: 250px;
margin: auto;
margin-top: 2rem;
background-image: url(/img/dnf.png);
background-size: contain;
background-repeat: no-repeat;
}

/* DIVERS */

/* CONTENT */

#content_wrapper {
background-color: #f9f9fb;
padding: 2rem 5%;
}

#content {}

#content table a {
color: #000;
text-decoration: underline;
}

#content a:hover {
text-decoration: none;
}

h1 {
text-align: center;
font-size: 2.8rem;
}

h2 {
text-align: center;
color: #d9472b;
font-size: 2.5rem;
}

h3 {
text-align: center;
color: #3db1cc;
font-size: 2rem;
}

h4 {
text-align: center;
}

div {
overflow-y: auto;
box-sizing: border-box;
}

/* CONTENT */

/* FOOTER */

#footer {
background-color: #212326;
padding: 1rem;
color: #FFF;
}

#footer a {
color: #FFF;
font-size: 1.1rem;
}

#footer a:hover {
text-decoration: none;
}

/* FOOTER */

@media (max-width: 1300px) {

#menu {
display: block;
margin: 0;
}

#header form {
display: block;
margin: 0;
}

}