@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Andika:ital,wght@0,400;0,700;1,400;1,700&display=swap");

body {
  background-color: #020202;
  color: #fff;
  font-family: poppins;
  width: 60vw;
  min-width: 300px;
  max-width: 500px;
  margin: 0 auto;
  border: 3px solid gold;
  padding: 30px;
  margin-top: 30px;

  h1 {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
  }
}

.style {
  // font-size: 80px;
  background: transparent;
  border: none;
  border-radius: 40px;
  // border: 3px solid #fff;
  padding: 7px;
  width: 120px;

  cursor: pointer;

  img {
    display: block;
    margin: 0 auto;

    width: 60px;
    animation: Bellaintroload 3s forwards;
  }

  &:hover {
    border: 3px solid #fff;
  }
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 30px;

  h3 {
    font-size: 16px;
    font-family: andika;
    color: #f2f2f2;
  }

  // justify-content: space-between;
}

.result {
  font-size: 25px;
  font-weight: 700;
  margin-top: 50px;
}

.moves {
  font-size: 16px;
}

.score {
  margin-top: 60px;
  font-size: 18px;
}

.reset {
  background-color: gold;
  color: #fff;
  font-weight: 700;
  border: none;
  font-size: 15px;
  padding: 10px 15px;
}

img {
  width: 20px;
}

.score-display {
  display: grid;
}

@keyframes Bellaintroload {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }

  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}