.main {
  
  background: linear-gradient(-45deg, #000000, #3f3f3f, #8d8d8d, #000000);
  background-size: 400% 400%;
  animation: gradient 45s ease infinite;
  height: 100vh;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.topnav { 
background-color: none;
overflow: hidden;
border: 5px solid white;
margin-left: auto;
margin-right: auto;
display: block;
position: relative;
text-align: center;
bottom: -1px;
top: -1px
}

.topnav a {
display: inline-block;
color: white;
text-align: center;
padding: 13px 35px;
text-decoration: none;
font-family: monospace;
font-size: 17px;
margin-left: 35px;
margin-top: 10px;
margin-bottom: 30px;
margin-right: 35px;
border: 2px solid white;
transition: all .2s ease-in-out;
width: 70px;
}

.topnav button {
margin: 50px


}

.topnav a:hover {
background-color: white;
color: black;
transform: scale(1.2, 1.2);
    
}


.topnav a.active {
background-color: white;
color: black;
transform: scale(1.2, 1.2); 
}

.topnav img {

display: block;
position: relative;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;

}


h1 {
    color: white;
    text-align: center;
    font-family: monospace;
    font-size: 38px;
}

p {
    color: white;
    text-align: center;
    font-family: monospace;
    font-size: 20px;
}

a.links {
    color: white;
    text-align: center;
    font-family: monospace;
    font-size: 38px;
    text-decoration: none;
}