body {
background-image: url("../../donutsandmugs.png");
height: 100%;
width: 100%;
background-repeat: repeat;
}

div {
font-family: sans-serif;
font-size: 70px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  font-family: sans-serif;
  font-size: 20pt;
  color: white;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


li a:hover:not(.active) {
  background-color: #111;
  color: white;
}

.active a{
  background-color: lightgray;
  color: black;
}

pre.one {
  font-family: sans-serif;
  font-size: 10px;
}

p.one {
  font-family: sans-serif;
  font-size: 20px;
  padding-top: 7px;
  padding-left: 20px;
  padding-right: 20px;
}

.background {
position: relative;
top: -91px;
background-color: rgba(255, 255, 255, .85);
width: 75%;
margin: auto;
margin-top: 60px;
margin-bottom: 40px;
border-style: solid;
border-color:  rgba(0, 0, 0, .8)
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.button {
  position: relative;
  font-family: sans-serif;
  font-size: 20pt;
  color: white;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-radius: 8px;
  top: 30px;
  left: 50px;
}

.button a{
font-family: sans-serif;
  font-size: 20pt;
  color: white;
  display: block;
  text-align: center;
text-decoration: none;
}

.button1 {
  background-color: #111;
  color: white;
  border: 2px solid lightgray;
  text-decoration: none;
}

.button1:hover {
  background-color: lightgray;
  color: black;
  border: 2px solid black;
  text-decoration: none;
}