style.css

/**
 * Your CSS goes here.
 */

body {
  font-family: "Merienda", cursive;
  text-align: center;
  text-indent: 0.5cm;
  padding: 0;
  margin: 0;
  font-size: auto;
  word-spacing: 3px;
}

button {
  font-family: "Merienda", cursive;
}

.loading-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}

.content {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  width: 100%;
}

.hidden {
  display: none;
}

.loading {
  width: 100%;
  height: 100vh;
  background-image: url("assets/img.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0% 80%;
  display: flex;
}

.logo-load {
  width: 500px;
  height: fit-content;
  margin: 4rem auto;
}

.progress-load-num {
  font-size: 70px;
  color: white;
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  font-weight: 300;
  padding-bottom: 20px;
}

.progress-bar {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 7px;
  background-color: rgba(255, 255, 255, 0.411);
  border-radius: 50px;
}

.progress-fill {
  width: 10px;
  height: 7px;
  background-color: rgb(255, 255, 255);
  border-radius: 50px;
}

.start-page {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.loading,
.start-page {
  position: fixed;
  top: 0;
  left: 0;
}

.bab1,
.bab2 {
  position: relative;
  width: 100%;
  height: 50vh;
  background-size: 100% 100%;
}

.bab1 {
  background-image: url("assets/bab1.jpg");
}

.bab2 {
  background-image: url("assets/bab2.jpg");
  display: flex;
  flex-direction: column;
  align-items: center;
}

.start-btn {
  max-width: max-content;
  border: 4px solid #ffb904;
  color: #ffb904;
  padding: 6px 50px;
  font-size: 1.7rem;
  border-radius: 20px;
  background-color: #372c28;
  margin-top: 11rem;
  box-shadow: 1px 1px 10px 2px #ffb80448;
  cursor: pointer;
}

.start-btn:active {
  background-color: #3d302b;
  border: 4px solid #ffc940;
  color: #ffc940;
}

.action-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sound-btn {
  margin-top: 2rem;
  color: #ffc940;
  font-size: 1.2rem;
  display: flex;
}

.checkbox {
  position: relative;
  border: 3px solid #ffc940;
  width: 20px;
  height: 20px;
  margin-right: 0.8rem;
  border-radius: 5px;
  cursor: pointer;
  z-index: 5;
}

.checkbox img {
  width: 38px;
  position: absolute;
  top: -13px;
  left: -5px;
  z-index: 4;
  opacity: 0;
}

.bab1Anim {
  animation: openBoard1 2s linear;
}

.bab2Anim {
  animation: openBoard2 2s linear;
}

.bab1Anim,
.bab2Anim {
  box-shadow: 1px 1px 60px 5px #372c28;
  -webkit-animation-fill-mode: forwards;
  /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;
  /* FF 5+ */
  -o-animation-fill-mode: forwards;
  /* Not implemented yet */
  -ms-animation-fill-mode: forwards;
  /* IE 10+ */
  animation-fill-mode: forwards;
}

@keyframes openBoard1 {
  from {
    top: 0px;
  }

  to {
    top: -50vh;
    display: none;
  }
}

@keyframes openBoard2 {
  from {
    top: 0px;
  }

  to {
    top: 50vh;
    display: none;
  }
}

.container {
  display: none;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  background-image: url("/assets/jumanji.png");
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.prev-edit {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 5rem;
}

.madLibsEdit,
.madLibsPreview {
  background-image: url("assets/paper.png");
  background-size: cover;
  line-height: 1.7;
  width: 25%;
  padding: 2rem 3.5rem;
  height:fit-content
  
}

.madLibsPreview {
  line-height: 1.9;
}

/* the text for our two stories (one where we input and preview) */

.editText,
.previewText {
  color: #1a0501;
  text-align: justify;
  font-weight: 600;
}

/* styling the span  */
.spanText {
  color: white;
  text-shadow: 2px 2px 4px rgba(3, 155, 0, 0.72);
}

/* styling for the logo on the main page */

.logoContainer {
  top: 1rem;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

#inLogo {
  width: 250px;
}

.input {
  border: none;
  text-align: center;
  display: inline;
  font-family: inherit;
  font-size: inherit;
  border-radius: 5px;
  padding: none;
  width: 80px;
}

/* style for music and reset button */

#resetButton,
#musicButton {
  background-color: #c99a73;
  font-size: 16px;
  letter-spacing: 2px;
  text-decoration: none;
  color: black;
  cursor: pointer;
  border-radius: 10px;
  border: none;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px;
  margin-bottom: 20px;
  margin-right: 30px;
  width: 100px;
  font-weight: bold;
}

button:hover {
  filter: brightness(130%);
}

/* for when it goes under a certain width */
@media (max-width: 786px) {
  .container {
    align-items: center;
    flex-direction: column;
    height: fit-content;
  }

  .prev-edit {
    flex-direction: column;
    margin-top: 8rem;
    align-items: center;

  }

  .madLibsEdit,
  .madLibsPreview {
    padding: 1.8rem;
    width: 95%;
    height: fit-content;
    box-sizing: border-box;
    margin-bottom: 1rem;
  }

  #musicButton,
  #resetButton {
    margin-top: 30px;
    margin-bottom: 10px;
  }

  .logo-load {
    width: 250px;
  }

  .loading {
    background-position: 50% 0%;
  }
}

.play_music {
  display: hidden;
}