* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-align: center;
}

html, body {
    height: 100%;
    font-family: Verdana;
    font-size: 20px;
}

#title {
    font-size: 48px;
}

.top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-content: flex-start;
    height: 15vh;
    width: 100vw;
}

.center_top {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    height: 100%;
    width: 80vw;
    padding-left: 20vw;
}

.right {
    display: flex;
    justify-content: flex-end;
    height: 100%;
    width: 20vw;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 70vh;
}

.bottom {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    align-content: flex-end;
    height: 15vh;
}

.slider_container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: row;
    height: 100%;
    width: 100%;
    position: relative;
}

#slides_container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: row;
    height: 100%;
    width: 80vw;
    overflow: hidden;
}

#slides_container * {
  font-size: 38px;
  border: 1px solid #000000;
  padding: 14px 40px;
  margin: 0 10px;
}

#precedent, #next {
  font-size: 48px;
  cursor: pointer;
  user-select: none;
}

#precedent {
  width:8vw;
  margin-left: 2vw;
}

#next {
  width:8vw;
  margin-right: 2vw;
}

#rolling {
  font-size: 48px;
  border: 1px solid #000000;
  padding: 14px 40px;
}

#discord_button {
  height: 100%;
}

.animate-roll {
  animation: zoom 0.4s ease-in-out forwards;
}

.button {
    font-size: 32px;
    padding: 14px 40px;
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.button:active {
  transform: translateY(2px);
}

div.center * {
  margin: 10px;
}



.common {
  background-image: linear-gradient(45deg, #d9d9d9, #b3b3b3);
  border: 2px solid #272727;
}

.rare {
  background-image: linear-gradient(45deg, #8cda92, #a6d9a6);
  border: 2px solid rgb(46, 95, 46);
}

.epic {
  background-image: linear-gradient(45deg, #bb8cda, #a68cd9);
  border: 2px solid rgb(92, 44, 104);
}

.legendary {
  background-image: linear-gradient(45deg, #dad98c, #b3b36a);
  border: 2px solid rgb(109, 108, 38);
}

.rainbow {
  background-image: linear-gradient(45deg, rgb(226, 73, 73), rgb(231, 169, 52), rgb(230, 230, 57), rgb(71, 224, 71), rgb(77, 77, 224), rgb(165, 78, 228), violet, rgb(235, 72, 72));
  border: 2px solid rgb(0, 0, 0);
}

@keyframes zoom {
  0% { transform: scale(1) }
  50% { transform: scale(1.3) }
  100% { transform: scale(1) }
}