body {
  background: radial-gradient(circle, rgb(18, 5, 50), rgb(45, 10, 132));
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.tophead {
  display: grid;
  place-items: center;
  height: 10vh;
  box-sizing: border-box;
}

.tophead h1 {
  font-family: "Press Start 2P", monospace;
  font-size: 50px;
  color: rgb(25, 143, 52);
}

.level_grid {
  text-align: center;
  padding: 3rem;
}

.level_grid > div {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: calc(5%); 
  height: calc(10%);
  margin: 20px;
  padding: 4px;
  background: linear-gradient(90deg, rgb(19, 73, 189), rgb(161, 19, 208));
  border: 6px solid linear-gradient(90deg, rgb(162, 22, 201), rgb(27, 68, 255));
  border-radius: 60px;
  color: rgb(18, 182, 53);
  cursor: pointer;
  font-family: "Press Start 2P", monospace;
}

.level_grid > div:hover {
  transform: scale(1.3, 1.3);
  transition: 0.5s ease-in-out;
}

a:link, a:visited, a:active, a:hover{
    color:rgb(18, 182, 53);
    text-decoration: none;
}


.level_grid > a {
    text-decoration: none;
    color: rgb(18, 182, 53),
}

#Portfolio-button {
  position: absolute;
  left: 40%;
  right: 40%;
  font-family: 'Press Start 2P', monospace;
  padding: 10px;
  background-color: rgb(60, 9, 245);
  border-width: 3px;
  border-color: rgb(18, 182, 53);
  border-radius: 10px;
  color: rgb(18, 182, 53);
}

#Portfolio-button:hover {
  transform: scale(1.1, 1.1);
  transition: 0.3s ease;
  background-color: rgb(18, 182, 53);
  border-color: rgb(60, 9, 245);
  color: rgb(60, 9, 245);
}


/*
@media (max-width: 900px) {
  .level_grid > div {
    width: calc(50% - 1rem);
  }
}
*/
/* Responsive: one column on small screens */
/*
@media (max-width: 480px) {
  .level_grid > div {
    width: calc(100% - 1rem);
  }
}
*/