html {
  font-size: 20px;
}

@media screen and (min-width: 320px) {
  html {
    font-size: 15px;
  }

  .button {
    width: 75px;
    height: 75px;
  }
}

@media screen and (min-width: 390px) {
  .button {
    width: 100px;
    height: 100px;
  }
}

@media screen and (min-width: 800px) {
  html {
    font-size: 17px;
  }
}

@media screen and (min-width: 1040px) {
  html {
    font-size: 20px;
  }

  .buttons {
    width: 40%;
    margin-top: 50px;
    margin-bottom: 100px;

    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 52px;
  }
}

body {
  font-family: "Poppins", "Segoe UI", Helvetica, Verdana, sans-serif;
  margin: 0;

  font-size: 1rem;
  line-height: 1.5;

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url("img/backgr-1920.webp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.buttons {
  margin-top: 50px;
  margin-bottom: 50px;
  display: flex;
  flex-direction: row;
  flex-direction: wrap;
  gap: 5vw;

  justify-content: center;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  font-size: 1rem;

  border: 2px solid rgba(180, 230, 255, 0.8);
  border-radius: 50%;

  background: radial-gradient(
    circle at 30% 25%,
    rgba(170, 225, 255, 0.45) 0%,
    rgba(60, 120, 210, 0.35) 35%
  );

  backdrop-filter: blur(8px);

  box-shadow: 0 0 10px rgba(80, 170, 255, 0.35),
    0 0 25px rgba(80, 170, 255, 0.25), inset 0 1px 3px rgba(255, 255, 255, 0.45),
    inset 0 -10px 20px rgba(0, 0, 0, 0.45);

  transition: transform 0.35s ease, box-shadow 0.35s ease;

  box-shadow: 0 0 8px #4ab6ff, 0 0 18px rgba(74, 182, 255, 0.5),
    0 0 35px rgba(74, 182, 255, 0.25);

  color: white;
  font-size: 1rem;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.button:hover {
  transform: translateY(-4px) scale(1.05);

  box-shadow: 0 0 18px rgba(80, 170, 255, 0.6),
    0 0 40px rgba(80, 170, 255, 0.45), inset 0 1px 3px rgba(255, 255, 255, 0.6),
    inset 0 -10px 20px rgba(0, 0, 0, 0.4);

  cursor: pointer;
}

img {
  height: 30%;
  width: 30%;
  min-height: 250px;
  min-width: 250px;
  max-height: 500px;
  max-width: 500px;

  margin-top: 5vw;

  border-radius: 50%;

  box-shadow: 0 0 20px rgba(80, 170, 255, 0.45),
    0 0 50px rgba(80, 170, 255, 0.25);

  /* box-shadow: 0 0 25px rgba(255, 255, 255, 0.5),
    0 0 60px rgba(80, 120, 255, 0.3); */
}

div {
  width: 100%;
  margin: 0;
}

h1 {
  font-family: "Lucida Console", "Poppins", Arial, sans-serif;
  font-weight: 300;
  /* text-shadow: 2px 2px 8px #0f0052; */
  text-shadow: 0px 0px 4px rgb(9, 25, 80);

  font-size: 3rem;

  background-color: rgba(0, 0, 0, 0.6);
  /* width: 30%;
  min-width: 250px;
  max-width: 500px; */

  color: white;
}

h1 .imie {
  font-family: "Dancing Script";
}

.hello {
  font-family: "Lucida Console", "Poppins", Arial, sans-serif;
  font-weight: 300;
  text-shadow: 0px 0px 2px rgb(9, 25, 80);

  margin: 20px 0;
  font-size: 1.2rem;

  background-color: rgba(255, 255, 255, 0.7);
  width: 30%;
  min-width: 250px;
  max-width: 500px;
}

a:link {
  text-decoration: none;
}

a:active {
  text-decoration: none;

  text-decoration-color: none;
}

a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}