* {
  margin: 0;
  padding: 0;
}

html {
  font-family: "Montserrat";
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url(img/bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.circle {
  position: relative;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.outter-circle {
  width: min(80vw, 80vh);
  height: min(80vw, 80vh);
  border: solid 5px turquoise;
  transform: rotate(0deg);
}

.middle-circle {
  width: min(60vw, 60vh);
  height: min(60vw, 60vh);
  border: solid 5px greenyellow;
}

.inner-circle {
  width: min(40vw, 40vh);
  height: min(40vw, 40vh);
  border: solid 5px orangered;
}

.compass {
  position: absolute;
  width: min(20vw, 20vh);
  height: min(20vw, 20vh);
  background: url(img/compass.png);
  background-size: cover;
  background-position: center;
  transform: rotate(0deg);
}

.pokemon {
  width: min(20vw, 20vh);
  height: min(20vw, 20vh);
  position: absolute;
  filter: drop-shadow(2px 2px 0 white) drop-shadow(-2px 2px 0 white)
    drop-shadow(2px -2px 0 white) drop-shadow(-2px -2px 0 white);
  transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform: rotate(0deg);
}

.pk-1 {
  right: max(-10vw, -10vh);
}

.pk-2 {
  left: max(-10vw, -10vh);
}

.pk-3 {
  top: max(-10vw, -10vh);
}

.pk-4 {
  bottom: max(-10vw, -10vh);
}