body {
  #display: flex;
  min-height: 500px;
  justify-content: center;
  align-items: center;
  background: lightblue;
  font-weight: 500;
  font-size: 30pt;
  font-family: Verdana,"Rockwell",Helvetica,Serif;
}

input[type="submit"] {
  display: block;
  font-family: Verdana,"Rockwell",Helvetica,Serif;
  font-size: 50px;
  width: 220pt;
  height: 220pt;
  background: #fff;
  padding: 10px;
  border: 3px;
  outline: 2px;
  border-radius: 50%;
  color: #171717;
  transition: all 200ms;
  cursor: pointer;
}
input[type="submit"]:focus {
  background: transparent;
  color: transparent;
  border: none;
  border-top: solid 3px #f8a;
  border-left: solid 3px #fff;
  animation: spin 700ms linear infinite;
}
@keyframes spin {
  to {transform: rotate(360deg);}
}

a {
  text-decoration: none;
  color: black;
}

input[type="text"] {
  background: #f8a;
  border: 4pt;
  border-color: white;
  color: black;
  border-style: solid;
  height: 50pt;
  width: 80vw;
  font-size: 55pt;
  
}

input[type="text"]:focus {
  background: lightblue;
  border: 4pt;
  border-color: white;
  color: black;
  border-style: solid;
  height: 50pt;
  width: 80vw;
  font-size: 45pt;
  outline-color: black;
}

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

#containerdiv {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 4vw;
}

#containerdiv2 {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 4vw;
}