@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&family=Poppins:wght@300&display=swap');
header,
footer,
nav,
ul,
li,
main {
    border: 0;
    padding: 0;
    margin: 0;
}

body {
    background: url(istockphoto.jpg);
    font-family: 'Poppins', sans-serif;
}

.container {
    max-width: 65%;
    margin: 0 auto;
    background: black;
    padding: 5px;
}

h1,
h2,
h3 {
    font-family: 'Metal Mania', cursive;
    font-weight:500;
    color: rgb(112, 136, 216);
}

nav {
    background: rgb(112, 136, 216);
    text-align: center;
}

nav ul li {
    display: inline-block;
    padding: 2%;
    text-align: center;
    font-family: 'Metal Mania', cursive;
}

nav ul li a {
    text-decoration: none;
    text-align: center;
    font-size: 24px;
    color: black;
    font-weight: bold;
}

h1 {
    text-align: center;
    font-size: 40px;
}

.hh1 {
    text-align: center;
    font-size: 65px;
}

.donut {
    width: 60%;
    height: 270px;
    float: left;
    padding-right: 10px;
}

p{
    padding: 1px;
    margin: 1px;
    font-size: 14px;
}

label {font-size:14px;}

article {
    background: white;
    padding: 0.5%;
}

input{
    display: block;
}

#clear{
    clear: both;
}
footer {
    clear: both;
    background: black;
    text-align: center;
    padding: 1%;
    color: #ffffff;
}
footer a {
    text-decoration: none;
    color: #ffffff;
}

.featured {
    width: 50%;
    margin-left:auto;
    margin-right:auto;
    border: 5px solid black ;
    border-radius: 5px;
    padding:20px;
}

h4 {
    margin:2px;
}