.spinner {
  animation: spin 3s linear infinite;
}

.mover {
  animation: oskarmove 2s forwards;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes oskarmove {
  from {
    top: calc(50vh - (10vw + 10vh)/4);
    left: calc(50vw - (10vw + 10vh)/4)
  }

  to {
    top: 1vw;
    left: 1vh
  }
}


@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope/Manrope-VariableFont_wght.ttf");
}

#oskar {
  height: calc((7vw + 7vh)/2);
  width: calc((7vw + 7vh)/2);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#leaguetitle {
  text-align: center;
  font-size: 3vh;
  margin: auto;
  font-weight: 600;
  color: rgb(82, 81, 81);
  font-family: 'Manrope', sans-serif, bold;
}

#loadertext {
  text-align: center;
  margin: auto;
  font-weight: 600;
  color: rgb(82, 81, 81);
  font-family: 'Manrope', sans-serif, bold;
}

#loader {
  position: absolute;
  left: calc(50vw - (10vw + 10vh)/4);
  top: calc(50vh - (10vw + 10vh)/4);
}

#card-holder {
  margin: 1rem;
}

body {
  font-family: 'Manrope', sans-serif;
  /* font-family: 'Helvetica', sans-serif, ; */
  color: rgb(82, 81, 81);
  background-color: rgba(243, 239, 220, 0.993);
}

.row-container {
  display: flex;
  flex-flow: row;
}

.team-card {
  max-width: 700px;
  background-color: rgb(219, 210, 197);
  margin: 1rem auto;
  padding: 0.5rem;
}

.center {
  position: absolute;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
}

.opponent {
  margin: auto;
  padding: 2px;
  background-color: rgba(255, 8, 0, 0.425);
  font-size: 1.5rem;
}

.dot {
  padding: 0.1rem 0.4rem;
  margin: 0.1rem 0;
  border-radius: 20%;
}

.dot-color-green {
  background-color: rgba(59, 221, 86, 0.445);
}

.dot-color-yellow {
  background-color: rgba(255, 241, 47, 0.555);
}

.dot-color-red {
  background-color: rgba(255, 47, 47, 0.445);
}