body {
  height:100vh;
  background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

#h1{
text-align:center;
font-size:50px;
letter-spacing:10px;
color:#8f0af5;
line-height:70%;
animation: glow 5s linear infinite;
}
@keyframes glow{
0% , 35%{
color:#8f0af5;
text-shadow:none;
filter:brightness(120%);
}
70%, 100%{
  color:#f9f7fa;
  filter:brightness(150%);
  text-shadow:0 0 10px #8f0af5, 0 0 20px #8f0af5, 0 0 40px #8f0af5,
0 0 80px #8f0af5, 0 0 160px #8f0af5;
}
}

#center {
  display: flex;
  justify-content: center;
  align-items: center;
}
#column{
display:flex;
flex-direction:column;
align-items:center;
}

h2 {
  text-align: center;
  font-size: 45px;
  margin-bottom:20px;
}

input {
  background-color:inherit;
  text-align: center;
  margin: 20px 0px;
  padding: 10px;
  height: 20px;
  width: 200px;
  border-radius: 20px;
  border:2px solid black;
  color:black;
}

#box {
  margin-top:50px;
  background-color:rgb(255, 204, 255, 0.2);
  height: 420px;
  width: 320px;
  border: 5px #f700ff solid;
  border-radius: 20px;
  backdrop-filter:blur(50px);
}
#column a{
  color:black;
}


#submit {
  color:white;
  height: 40px;
  width: 120px;
  background-color:#ff00ff;
  border: 2px solid black;
  margin-top:30px;
}
#submit:hover{
font-weight:bold;
font-size:17px;
}

#navigation{
  display: flex;
  justify-content:flex-end;
  text-align:center;
}

#navigation li{
  list-style-type: none;
  margin:0px 5px;
}

#navigation a {
  text-decoration: none;
  color:white;
}

.navbutton{
  height: 22px;
  width: 100px;
  color:white;
  border-radius: 25px;
  border: 2px solid #ff00ff;
  box-shadow:inset 0px 0px 25px #ff33ff;
}
.navbutton:hover{
  background-color:#ff00ff;
  box-shadow:0px 0px 10px #ff00ff;
  font-size:17px;
  color:white;
  font-weight:bold;
}

footer{
text-align:center;
margin:30px 0px;
}