:root {
  --button-width: 6vw;
  --text-box-width: 21vw;
  --line-spacing: 4vw;
  /* Keep the box slightly bigger then the text width so the text will not break and flow to the
  next line when rendered in default font while the custom font is loading. */
  --text-box-adjusted-width: calc(1.05 * var(--text-box-width));
}

main {
  height: 100%;
}

#grid {
  width: 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: calc(2 * var(--button-width)) calc(6vw + var(--text-box-adjusted-width)) 1fr calc(2 * var(--button-width));
  grid-column-gap: 0vw;
  align-items: center;
  justify-items: center;
}

#leftButtonContainer, #rightButtonContainer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#leftButton, #rightButton {
  width: var(--button-width);
  height: var(--button-width);
  font-size: 3vw;
  line-height: var(--button-width);
  border-radius: calc(2 * var(--button-width));
  background-color: rgba(0, 0, 0, 0.2);
  text-shadow: 0vw 0vw 1vw black, 0vw 0vw 2vw black, 0vw 0vw 2vw black;
  box-shadow: 0vw 0vw 0.3vw 0.3vw rgba(0, 0, 0, 0.2);
  color: var(--default-link-color);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: transform var(--scale-transition-time);
}

#leftButtonContainer:hover #leftButton, #rightButtonContainer:hover #rightButton {
  background-color: transparent;
  box-shadow: none;
  color: var(--default-link-hover-color);
  transform: scale(1.3, 1.3);
}

#leftButtonContainer:hover, #rightButtonContainer:hover {
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0vw 0vw 0.3vw 0.3vw rgba(0, 0, 0, 0.1);
}

@keyframes fadeinDelayed {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#textBox {
  width: var(--text-box-adjusted-width);
  justify-self: right;
  text-shadow: 0vw 0vw 2vw black, 0vw 0vw 4vw black;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0vw 0vw 1.5vw 1.5vw rgba(0, 0, 0, 0.1);
  color: var(--body-text-color);
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  animation: fadeinDelayed 1s;
}

#hello {
  font-size: calc(0.149 * var(--text-box-width));
  line-height: 100%;
}

#text0 {
  font-size: calc(0.078 * var(--text-box-width));
  margin-top: calc(1.3 * var(--line-spacing));
  line-height: 100%;
}

#nickname {
  font-size: calc(0.233 * var(--text-box-width));
  line-height: 100%;
}

#text1 {
  font-size: calc(0.116 * var(--text-box-width));
  margin-top: var(--line-spacing);
  line-height: 100%;
}

#carousel {
  font-size: 1.3vw;
}

.card {
  text-shadow: 0vw 0vw 2vw black, 0vw 0vw 4vw black;
  animation: fadeinDelayed 1s;
}

.card:hover {
  text-shadow: none;
}

#streamCard {
  font-size: 1.4vw;
}

#upto {
  font-size: 4vw;
}

#deepdive {
  font-size: 2.7vw;
}