:root {
  --modal-bg: rgb(6, 48, 119);
  --blue-bg: #06015f8e;
  --btn-bg: #04025d;
  --btn-hover-color: #02007cbe;
  --pink-solid: #c40089;
  --pink-muted: #c4008979;
  --dark-bg: rgb(0, 0, 51);
}

body {
  background: var(--dark-bg);
  color: white;
}
h1 {
  font-family: "Press Start 2P", system-ui;
  margin-top: 20px;
  line-height: 1.3;
}
h2 {
  display: flex;
  font-family: "Press Start 2P", system-ui;
  font-size: small;
  margin-bottom: 0;
  align-items: flex-end;
}
.navbar {
  background: rgb(0, 0, 51);
  font-family: "Play", sans-serif;
}

.navbar a {
  color: white;
}
img {
  width: 200px;
  height: auto;
  margin: 20px 0;
  border: 4px double rgba(255, 255, 255, 0.674);
  padding: 20px 15px 0 15px;
  background: radial-gradient(circle, rgb(29, 49, 84) 32%, #042256 80%);
}

.whole-page {
  display: flex;
  margin-left: 20px;
}
#currently {
  margin-top: 10px;
  width: 100%;
  color: white;
  background-color: var(--btn-bg);
  border: 4px double rgba(255, 255, 255, 0.674);
  border-radius: 2px;
  font-family: "Play", sans-serif;
  padding: 2px;
}
.about-me {
  margin: 10px 30px;
}
.current-section {
  margin-top: 10px;
}
.current-button {
  display: block;
  margin-left: 0;
  color: white;
  background-color: var(--btn-bg);
  font-size: clamp(0.5rem, 1vw, 0.7rem);
  width: 100%;
  font-family: "Press Start 2P", system-ui;
  padding: 0.35rem 0.5rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  transition: all 200ms ease-in-out;
  border: 4px double rgba(255, 255, 255, 0.674);
}
.current-button:hover {
  color: white;
  background-color: var(--btn-hover-color);
  text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px var(--pink-solid),
    0 0 10px var(--pink-solid);
  text-decoration: none;
  transform: scale(1.05);
}
@media (max-width: 600px) {
  html,
  body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }

  h1 {
    font-size: clamp(0.5em, 1.5vh, 1em);
  }

  h2,
  .current-button {
    font-size: clamp(0.5em, 1vh, 1em);
  }

  img {
    width: 150px;
    height: auto;
  }

  select {
    font-size: clamp(0.5em, 1.3vh, 1em);
  }
}