html {
  --virtual-viewport-height: 100%;
  scroll-behavior: smooth;
  height: var(--virtual-viewport-height);
  width: 100%;
  scrollbar-width: thin;
}

body {
  width: 100%;
  height: var(--virtual-viewport-height);
  margin: 0px;
  padding: 0;
  font-family: Nunito, sans-serif;
}

.main-container {
  width: 100%;
  height: 100%;
  background-color: white;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  overflow: hidden;
}

.content-container {
  width: 100%;
  height: 100%;
  max-width: 1250px;
  z-index: 0;
  contain: layout;
}

.main-footer {
  width: 100%;
  position: relative;
  bottom: 0;
}

/* 
    Just if there is a container inside the footer has margin.
    Otherwise it introduces undesired spacing.
 */
.main-footer:has(div) {
  margin-top: 10rem;
}

/* button#play-pause-button { */
/*   display: none; */
/*   background-color: transparent; */
/*   color: rgb(255, 255, 255); */
/*   border: none; */
/*   position: absolute; */
/*   top: 15px; */
/*   left: 10px; */
/**/
/*   transition: 0.35s opacity; */
/*   cursor: pointer; */
/*   z-index: 1; */
/**/
/*   & span { */
/*     opacity: 0.7; */
/**/
/*     &:hover { */
/*       opacity: 0.85; */
/*     } */
/*   } */
/* } */