@import url(reset.css);
@keyframes roulette_change {
  0% {
    top: 0px; }
  9% {
    top: 0px; }
  14% {
    top: -9vw; }
  23% {
    top: -9vw; }
  28% {
    top: -18vw; }
  37% {
    top: -18vw; }
  42% {
    top: -27vw; }
  53% {
    top: -27vw; }
  58% {
    top: -36vw; }
  67% {
    top: -36vw; }
  72% {
    top: -45vw; }
  81% {
    top: -45vw; }
  86% {
    top: -54vw; }
  91% {
    top: -54vw; }
  100% {
    top: 0px; } }
@keyframes color_change {
  0% {
    border-color: #61AFEF;
    color: #536370; }
  9% {
    border-color: #61AFEF;
    color: #536370; }
  14% {
    border-color: #98C370;
    color: #61AFEF; }
  23% {
    border-color: #98C370;
    color: #61AFEF; }
  28% {
    border-color: #E06C72;
    color: #98C370; }
  37% {
    border-color: #E06C72;
    color: #98C370; }
  42% {
    border-color: #C68C5C;
    color: #E06C72; }
  53% {
    border-color: #C68C5C;
    color: #E06C72; }
  58% {
    border-color: #C678DD;
    color: #C68C5C; }
  67% {
    border-color: #C678DD;
    color: #C68C5C; }
  72% {
    border-color: #56B6C2;
    color: #C678DD; }
  81% {
    border-color: #56B6C2;
    color: #C678DD; }
  86% {
    border-color: #536370;
    color: #56B6C2; }
  91% {
    border-color: #536370;
    color: #56B6C2; }
  100% {
    border-color: #61AFEF;
    color: #536370; } }
* {
  box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%; }

body {
  font-family: 'Lato', sans-serif;
  color: #ABB2BF;
  background-color: #282C34;  }
  body a {
    color: inherit;
    text-decoration: none; }
    body a:hover, body a:focus, body a:visited {
      color: inherit;
      text-decoration: none; }

.content {
  width: 80%;
  height: 50vh;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center; }

.box.header {
  font-family: 'Montserrat', sans-serif;
  font-size: 7vw;
  transition: color 0.5s;
  color: inherit; }
  .box.header .name:hover {
    color: #FF855A; }
.box.roulette {
  border-left: 0.5vw solid #61AFEF;
  border-right: 0.5vw solid #61AFEF;
  height: 9vw;
  text-transform: capitalize;
  overflow: hidden;
  width: 90%;
  animation: color_change 10s infinite;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px; }
  .box.roulette .words {
    position: relative;
    height: 9vw;
    top: 0;
    animation: roulette_change 10s infinite; }
    .box.roulette .words .word {
      height: 9vw;
      font-size: 9vw;
      line-height: 9vw;
      display: table;
      text-align: center;
      width: 100%;
      text-transform: uppercase; }
.box.current .title {
  text-align: center; }
.box.medias {
  width: 100%;
  text-align: center; }
  .box.medias a {
    font-size: 4.5vw;
    padding: 10px; }

/*# sourceMappingURL=style.css.map */

.tooltip {
    position: relative;
    display: inline-block;
    opacity: 1;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 110%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}