/* dark purple is #2a0f37
   light purple is #a05ac5
   blue is #1ec6c6
   pink is #dc36c8
   */

body {
  padding: 20px 0px 75px 0px;
  font-size: 16px;
  font-family: "Courier New";
  color: white;
  background-color: black;
}

#header{
  color: #2a0f37;
  text-align: center;
  padding: 5px;
  line-height: 50%;
}

#content  {
  color: black;
  margin: 50px auto;
  padding: 5px 75px;
  text-align: center;
  background-color: white;
  width: 1250px;
  height: auto;
  border-radius: 20px;
  border: dashed #a05ac5;
  box-shadow: 10px 10px #1ec6c6, -10px -10px #dc36c8;
}

#content a {
  color: #a05ac5;
}

#content a:hover{
  text-transform: uppercase;
  font-weight: bold;
} 

#willwont{
  padding: 0px 50px 50px 0px;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: 500px;
  grid-gap: 10px;
  display: flex;
  flex-direction: row;
}

#willtext{
  margin: auto;
  padding: 5px;
  width: 500px;
  height: 250px;
  border: solid #1ec6c6;
    border-radius: 5px;
}

#wonttext{
  margin: auto;
  padding: 5px;
  width: 500px;
  height: 250px;
  border: solid #dc36c8;
  border-radius: 5px;
}

#nav{
  margin: auto;
}

a.button1{
  padding: 10px;
  border-radius: 3px;
  margin: 50px;
  font-size: 28px;
  color: white;
  text-align: center;
  background-color: #dc36c8;
  text-decoration: none;
}

a.button2{
  padding: 10px;
  border-radius: 3px;
  margin: 50px;
  font-size: 28px;
  color: white;
  text-align: center;
  background-color: #1ec6c6;
  text-decoration: none;
}

a.button1:hover{
  background-color: #a05ac5;
  text-transform: uppercase;
}

a.button2:hover{
  background-color: #a05ac5;
    text-transform: uppercase;
}

.name{
  font-size: 21px;
  font-family: "Press Start 2P", Helvetica;
}