@import url("https://themes.googleusercontent.com/fonts/css?kit=UB_-crLvhx-PwGKW1oosDmnsGYXHFOhXXyT2a4mcyUA");
body {
  overflow: hidden;
  height: 100vh;
}
.content {
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.socials {
  padding: 2vw;
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  width: 50vw;
}
.socials div {
  display: flex;
  justify-content: center;
  border-radius: 50%;
  background-color: white;
  align-items: center;
  width: 7vw;
  height: 7vw;
}
.socials div:hover {
  filter: invert();
}
a {
  text-decoration: none;
  color: blue;
  outline: none;
}
a:visited {
  color: blue;
}

.logo {
  width: 25%;
  position: relative;
}
.logo img {
  width: 100%;
  border-radius: 50%;
}
.logo img:hover {
  filter: invert();
}

.name {
  padding: 2vh;
  font-size: 8vh;
  font-family: "Bilbo Swash Caps";
  font-weight: bold;
}
.text {
  text-transform: uppercase;
}

.menu {
  background: #000;
  display: flex;
  color: white;
  text-decoration: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 50%;
  padding: 1vh 1vw;
  position: absolute;
}

.click {
  height: 5vw;
  width: 5vw;
  /* left: 53vw; */
  /* top: 50vh; */
  top: 60%;
  right: 20%;
  animation-duration: 0.7s;
  padding: 0.3vh;
  font-size: 1vw;
}

.gameMenu {
  height: 15vw;
  width: 15vw;
  left: 20vw;
  top: 20vh;
  font-size: 1vw;
  animation-duration: 0.7s !important;
}

.aboutMenu {
  height: 10vw;
  width: 10vw;
  right: 25vw;
  top: 10vh;
  font-size: 1vw;
  animation-duration: 0.3s !important;
}

.click:hover {
  background: white;
  color: #000;
  border: 1px solid black;
}
.menu a {
  color: white;
}
.animateIn {
  animation: circle-in-center;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.animateOut {
  animation: circle-out-center;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.hidden {
  display: none !important;
}

.menu span {
  display: block;
  padding: 1vh 1.5vw;
  border-radius: 1vh;
  text-decoration: none;
}
.menu span:hover {
  background: white;
  color: #000;
  text-decoration: none;
}
.menu span:hover a {
  background: white;
  color: #000;
  text-decoration: none;
}

@keyframes circle-in-center {
  0% {
    scale: 0;
    clip-path: circle(0%);
  }
  1% {
    scale: 1;
    clip-path: circle(0%);
  }
  100% {
    clip-path: circle(125%);
  }
}

@keyframes circle-out-center {
  0% {
    clip-path: circle(125%);
  }
  99% {
    clip-path: circle(0%);
    scale: 1;
  }
  100% {
    scale: 0;
    clip-path: circle(0%);
  }
}

@media only screen and (max-width: 600px) {
  .content {
    /* justify-content: center; */
    width: 100%;
  }
  .logo {
    width: 50%;
  }

  .name {
    padding: 1vw;
    font-size: 6xvh;
  }
  .socials {
    justify-content: space-evenly;
    width: 100%;
    margin-top: 4vh;
  }
  .socials div {
    width: 20vw;
    height: 20vw;
  }
  .socials img {
    width: 100%;
  }
  .click {
    font-size: 1.5vh;
    width: 8vh;
    height: 8vh;
  }
  .gameMenu {
    font-size: 3vw;
    width: 40vw;
    height: 40vw;
    top: unset;
    bottom: 0;
    left: 0;
    border-radius: 0;
  }
}