body {
  font-family: 'Nunito', sans-serif;
  background-color: #006600;
  border: 5px solid #000000;
  border-radius: 2px;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  margin-bottom: 40px;
  max-width: 1000px;
  min-width: 100px;
}
p {
  color: white;
}
h1 {
  color: white;
}
h2 {
  color: white;
}
h1.title {
  font-family: 'Fredoka One', cursive;
  padding-top: 40px;
}
html {
  background-image: repeating-linear-gradient(to right, black, maroon);
}
small {
  font-size: 55%;
}
.navbar {
margin-top: 20px;
max-width: 700px;
min-width: 10px;
overflow: hidden;
position: fixed;
tops: 0;
background-color: #555;
border: 3px solid #000000;
margin-left: 15%;
margin-right: 15%
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background: #ddd;
color: black;
}
@media all and (max-width: 414px) {
p {
font-size: 1em;
}
.navbar {
margin-left: 15%;
margin-right: 15%;
}
.navbar a {
font-size: 0.5em;
}
}
@media all and (max-width: 414px) {
p {
font-size: 1em;
}
.navbar {
margin-left: 4%;
margin-right: 4%;
}
.navbar a {
font-size: 0.5em;
}
}
@media all and (max-width: 520px) {
  .navbar{
  margin-left: 1%;
  margin-right: 1%;
}
}
@media all and (min-width: 1023px) {
 .navbar {
margin-left: 23%;
margin-right: 23%;
 }
}
@media all and (min-width: 1260px) {
 .navbar {
margin-left: 20%;
margin-right: 20%;
 }
}

@media all and (min-width: 1920px) {
 .navbar {
margin-left: 14%;
margin-right: 14%;
 }
}