@font-face {
  font-family: Roboto;
  src: url(Roboto-Regular.ttf);
}

body {
  margin: 0;
  background-color: darkgrey;

  font-family: Roboto, Sans;
  font-size: 12pt;
  user-select: none;
}

.wrapper {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-width: 60rem;
  max-width: 72rem;
}

.draft-container {
  
}

.card-container {
  display: flex;
  /*min-height: 33rem;*/
  flex-wrap: wrap;
  overflow-x: visible;
  padding: 1rem;
  justify-content: center;
}

@keyframes appear {
  0% {
    opacity: 0;
    bottom: -10rem;
  }

  80% {
    bottom: 0.3rem;
  }
  100% {
    opacity: 1;
    bottom: 0rem;
  }
}

.box {
  border-radius: 2px;
  backdrop-filter: blur(2px);
  padding: 10px;
  /*box-shadow: 0px 5px 5px 0px rgba(0,0,0, 0.04);*/
  background-color: #c3c3c3;
}

.cc {
  position: relative;
  animation-name: appear;
  animation-duration: 0.3s;
  margin: 0.75rem;
}

.card {
  width: 20rem;
  border: 1px solid black;
  min-height: 30rem;
  text-align: center;
}

.card.disabled {
  color: #666;
}

.card:hover {
  border: 1px solid white;
}

.select-indicator {
  border-radius: 100rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid black;

  position:absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;

  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
  vertical-align: middle;
}

.select-indicator:hover {
  border: 1px solid white;
}

.card-text {
  margin: 0 2pt;
}

.card-title {
  font-size: 1.5rem;
  padding: 0.1rem 0;
}

.card-points {
  color: grey;
}

.draft-header {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.info {
  line-height: 1.5rem;
  height: 1.5rem;
  border-radius: 2px;
  text-align: center;

  border: 1px solid white;

  margin: 0.3rem;
}

.card-browser {
  width: 100%;
}

.card-browser-button {
  border: 1px solid black;
}

.card-browser-button:hover {
  border: 1px solid white;
}

.card-browser-header {
  
}

.card-browser>.card-container>.cc {
  animation-name: none;
}

.selected {
  border: 1px solid white;
}