body {
    margin: 0;
}

.main {
    display: flex;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    background-color: black;
    color: white;
    margin: 0;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 50px;
}

@keyframes vibrate {
  0% {
    left: 0px;
  }
  25% {
    left: 10px;
  }
  50% {
    left: 0px;
  }
  75% {
    right: 10px;
  }
  100% {
    right: 0px;
  }
}

.vibrating-text {
    position: relative;
    animation-name: vibrate;
    animation-iteration-count: 5;
    animation-duration: 0.5s;
}

a {
    color: rgb(255, 255, 187);
}

a:visited {
    color: rgb(217, 181, 255);
}

div.center-text {
    text-align: center;
}

div.scroll-container {
    width: 50vw;
    overflow: auto;
    white-space: nowrap;
    padding: 10px;
}

div.scroll-container iframe {
    padding: 10px;
}

div.hover-container {
    position: relative;
    background-color: rgb(85, 10, 113);
    width: 50vw;
    height: 60px;
    border: 1px solid white;
}

div.hover-container .prompt,
div.hover-container .answer {
    display: flex;
    justify-content: center;
    align-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
}

div.hover-container .prompt {
    opacity: 1;
    transition-duration: 0.3s;
}

div.hover-container .answer {
    opacity: 0;
    transition-duration: 0.3s;
}

div.hover-container:hover .prompt {
    opacity: 0;
    transform: translate(-5%, -0%);
}

div.hover-container:hover .answer {
    opacity: 1;
}