html,body {
  padding: 0;
  height: 100%;
  margin: 0;
  background: black;
}

p {
  margin: 0;
  padding: 0;
  color: white;
  text-align: center;
}

#buttonsContainer{
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: center;
}
button {
  color: white;
  background: none;
  padding: 5px;
  border: 1px solid white;
  margin: 2%;
  border-radius: 10px;
}button:hover {
  cursor: pointer;
  background-color: white;
  color: black;
  transform: scale(1.2);
  animation-name: btnHover;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
@keyframes btnHover {
  0% {box-shadow: 0 0 0 0px white;}
  100% {box-shadow: 0 0 0 5px black;}
}
.btnClicked {
  transform: scale(1.2);
  background-color: white;
  color: black;
  animation-name: btnFloating;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier();
}
@keyframes btnFloating {
  20% {translate: 0 -5px;}
}

.container {
  padding-top: 15vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 80vh;
}

#rhapsodizer {
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 100px;
  user-select: none;
}
#elem {
  padding: 5px;
  border: 2px solid white;
  animation-name: rh;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}#elem:hover{
  background-color: white;
  cursor: pointer;
  animation-name: rhOver;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}#elem:hover p{
  color: black;
}
@keyframes rh {
  90% {rotate: 0deg;}
  100% {rotate: 360deg;}
}
@keyframes rhOver {
  from {rotate: 0deg;}
  to {rotate: 360deg;}
}

#writer {
  padding: 10px 0 10px 0;
  font-size: 20px;
  user-select: none;
}#cursor {
  padding: 10px 0 10px 0;
  font-size: 20px;
  user-select: none;
  color: white;
  animation: cursorAnim 1s ease-in-out none infinite;
}
@keyframes cursorAnim {
  50% {color: transparent;}
}

#canvasContainer {
  max-width: 400px;
  margin: 0 auto;
  position: relative;
}
#quotesContainer {
  width: 400px;
  height: 400px;
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  color: white;
  align-content: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.content{
  width: 40%;
  align-self: center;
  padding: 30px;
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  border: 1px solid white;
  margin: 20px;
  border-radius: 20px;
  animation-name: togglingContent;
  animation-duration: 1s;
}
.hidden{
  display: none;
}
@keyframes togglingContent {
  0% {opacity: 0; translate: 0 10px;}
  100% {opacity: 1; translate: 0 0px;}
}

#footer{
  padding: 5px;
  text-align: center;
  user-select: none;
}
#tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

#tooltip #tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 15px;
  border: 1px solid white;
  padding: 15px;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -100px;
}

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

@media only screen and (max-width: 600px) {
  #rhapsodizer {
    font-size: 6vw;
  }
  .content {
    width: auto;
  }
}