body {
  background-image: url("../images/bg.png");
  background-position: bottom center;
  background-attachment: fixed;
  background-size: contain;
  background-color: #6c3c30;
  font-family: Arial, Helvetica, sans-serif;
}

.imgContainer {
  position: absolute;
  z-index: -1;
  width: 100vw;
  height: 90vh;
  display: flex;
  justify-content: center;
}

.homeBook {
  padding-top: 4vw;
  width: 50vw;
  max-width: 90vw;
  height: 90vh;
}

.homeContainer {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 90vh;
  padding-top: 4vw;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.homeContainer div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-right: 4.5vw;
  padding-top: 4vw;
  gap: 0.6vw;
  width: 45%;
  color: #34000b;
}

.welcMsg {
  font-size: 2vw;
  padding-bottom: 0.5vw;
  color: #eae3d0;
}

.title {
  background-color: #86915b;
  display: flex;
  justify-content: center;
  align-items: center !important;
  padding: 2vw 7vw !important;
}

.title span {
  font-size: 7vw;
  font-weight: 700;
  color: white;
}

.loginSignupMsg {
  flex-direction: row !important;
  gap: 0.5vw;
  width: 100% !important;
  padding: 0vw !important;
  padding-top: 2vw !important;
  font-size: 2vw;
}

.loginSignupMsg span {
  color: #eae3d0;
}

.loginSignupMsg a:visited {
  color: #eae3d0;
}

.loginSignupMsg a:link {
  color: #eae3d0;
}

.loginSignupMsg a:hover {
  color: #86915b;
}

@media only screen and (max-width: 767px) {
  body {
    background-image: url("../images/bg_mobile.png");
  }

  .imgContainer {
    padding-top: 2vh;
  }

  .homeBook {
    width: 95vw;
    max-width: 100vw;
    height: 70vh;
  }

  .homeContainer {
    width: 100vw;
    height: 90vh;
    padding-top: 4vw;
  }

  .homeContainer div {
    padding-right: 4.5vh;
    padding-top: 4vh;
    gap: 0.6vh;
  }

  .welcMsg {
    font-size: 2.5vh;
    padding-bottom: 0.5vh;
  }

  .title {
    padding: 2vh 11vh !important;
  }

  .title span {
    font-size: 7vh;
  }

  .loginSignupMsg {
    gap: 0.5vh;
    width: 70vw !important;
    padding: 0vh !important;
    padding-top: 2vh !important;
    font-size: 4vw;
  }
}