styles.css

:root {
--text-primary-color: #931621;
--text-secondary-color: #040303;
}
* {
  font-family: 'Indie Flower', cursive;
  font-size:x-large;
  margin: 0;
}

.about {
  text-align: center;
}

.about > ul {
  display: inline-block; text-align: left;
}
.twisted-text, .submit-button {
color: var(--text-primary-color);
}

.twisted-love-description {
  color: #164ee9;
}
.twisted-games-description {
  color: #E4AB1B;
}
.twisted-hate-description {
  color: #BD0000;
}
.twisted-lies-description {
  color: #178F20;
}
.form-colors, .form-colors-contact, .submit-button-contact, #h3-contact, .home-introduction, .about, .main-contact {
  color: var(--text-secondary-color);
}

.home-introduction {
  text-align: center;
}
.nav-bar {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
}

.nav-bar > ul > li {
  display: inline;
}

.nav-bar a {
  float: left;
  padding: 12px;
  color: var(--text-secondary-color);
 &:active, &:hover {
    color: var(--text-primary-color);
    background-color: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

.main-contact {
  text-align: center;
font-style: italic;
}
.book-rose {
  background: url("https://cdn.pixabay.com/photo/2014/08/16/18/17/book-419589_1280.jpg") center center no-repeat;  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
}
header > h1 {
  text-align: center;
  color: var(--text-primary-color);
}

@media (min-width: 550px) {
  .nav-bar > .fa-bars {
    display: none;
  }
}

/* nav > .fa-bars {
  display: none;
} */

@media (max-width: 549px){
  .hidden--mobile {
    display: none !important;
  }
}

.link {
  display: flex;
flex-direction: column;
}



.boxes-twisted1 {
  display: grid;
  grid-template-columns:45% 25%;
  gap: 30px;
}

.boxes-twisted2 {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 20px;
}

.home-introduction, .about, .main-contact {
  display: flex;
justify-content: space-evenly;
flex-direction: column;
}
.about {
  margin: 5% 0;
}


.twisted-img {
  display: flex;
  justify-content: flex-start;
  width: 80vh;
  height: 110vh;
}

.twisted-love-song {
  display: flex;
  justify-content: flex-start;
  width: 40vh;
  height: 50vh;
}
.twisted-games-song {
  display: flex;
  justify-content: flex-start;
  width: 45vh;
  height: 60vh;
}
.twisted-hate-song {
  display: flex;
  justify-content: flex-start;
  width: 40vh;
  height: 55vh;
}
.twisted-lies-song {
  display: flex;
  justify-content: flex-start;
  width: 40vh;
  height: 56vh;
}

#huang-books {
  font-size: 1.2em;
  height: auto;
  width: 92.5%;
  margin: auto;
}

#huang-books tbody {
  width: 100%;
}

#huang-books th {
  text-align: center;
}

#huang-books td,th {
  text-align: center;
  width: 25%;
  word-spacing: 10%;
}

#stars {
  font-size: 2rem;
}