/* Font family */
@font-face {
  font-family: "EastmanAlternateTrial-Extrabold";
  src: url("../assets/fonts/EastmanAlternateTrial-Extrabold.otf");
  font-weight: 700;
}

@font-face {
  font-family: "EastmanAlternateTrial-Bold";
  src: url("../assets/fonts/EastmanAlternateTrial-Bold.otf");
  font-weight: 600;
}

@font-face {
  font-family: "EastmanAlternateTrial-RegularOffset";
  src: url("../assets/fonts/EastmanAlternateTrial-RegularOffset.otf");
  font-weight: 400;
}

@font-face {
  font-family: "EastmanAlternateTrial-Regular";
  src: url("../assets/fonts/EastmanAlternateTrial-Regular.otf");
  font-weight: 400;
}

@font-face {
  font-family: "EastmanAlternateTrial-Medium";
  src: url("../assets/fonts/EastmanAlternateTrial-Medium.otf");
  font-weight: 500;
}

@font-face {
  font-family: "Midnight Champion";
  src: url("../assets/fonts/Midnight-Champion.otf");
  font-weight: 400;
}

/* General */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f5eedc;
  font-family: "EastmanAlternateTrial-Regular";
  height: 100svh;
  width: 100svw;
  overflow-x: hidden;
}

.title {
  font-family: "EastmanAlternateTrial-Extrabold";
  color: #f17b61;
  text-shadow: 2px 5px 4px black;
  -webkit-text-stroke: 2px black;
}

.bg-img {
  background-position: center;
  background-size: cover;
}
@media (max-height: 400px) {
  .home,
  .library {
    background-size: contain !important;
    background-repeat: no-repeat;
  }
}

/* Home */
.home {
  background-image: url("../assets/img/section1.svg");
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 75px;
  align-items: center;
  justify-content: center;
}

.home .title {
  font-size: 50px;
  word-spacing: 100vw;
  text-align: center;
  line-height: 45px;
}

.arrow {
  width: 200px;
  height: auto;
  transform: rotate(80deg);
  cursor: pointer;
}

.start {
  position: relative;
}

.open {
  display: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 200px;
  text-wrap: nowrap;
  font-family: "EastmanAlternateTrial-Bold";
  font-size: 30px;
}

/* Library */
.library {
  background-image: url("../assets/img/section2.svg");
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.library .title {
  font-size: 34px;
}

/* About me */
.about-me {
  background-image: url("../assets/img/section33.svg");
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.about-me .title {
  font-size: 34px;
  text-align: center;
}

.about-container {
  max-width: 1600px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-self: center;
  height: 100%;
  justify-content: center;
}

.icon {
  display: flex;
  align-items: center;
  gap: 7px;
}

.author {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-self: center;
  align-items: center;
}

.author-img {
  border-radius: 100%;
  width: 100px;
  height: 100%;
}

.social {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-self: center;
}

.description {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-self: center;
}

.description p {
  font-size: 12px;
  line-height: 14px;
  font-family: "EastmanAlternateTrial-RegularOffset";
}

.description span,
.project-desc span {
  font-family: "EastmanAlternateTrial-Bold";
}

.cards {
  width: 100%;
  max-width: 1920px;
  height: 100%;
  align-content: center;
  display: flex;
  flex-direction: column;
  padding: 0 25px;
  justify-content: center;
}

.card {
  background-color: #F3D0C0;
  margin: 5px;
  display: flex;
  cursor: pointer;
  justify-content: space-between;
  transition: transform 300ms ease-in-out;
}

.card:hover {
  background-color: #f3d0c0cc;
  transform: scale(1.04);
}

.card img {
  max-height: 100%;
  max-width: 100px;
  padding: 15px;
}

.card-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 10px;
  font-family: "EastmanAlternateTrial-Bold";
  font-size: 10px;
}

.card-description :last-child {
  font-family: "Midnight Champion";
  font-size: 15px;
}

.soon-card {
  display: none;
  background-color: #64626280;
  margin: 15px;
  justify-content: center;
}

.soon-card img {
  width: 100px;
  height: 100%;
  padding-right: 15px;
}

.soon-book {
  width: 150px;
  height: 100%;
}

/* projects */
.projects {
  display: none;
  width: 100%;
  max-width: 1920px;
  height: 100%;
}

.project {
  display: none;
  height: 100%;
  justify-items: center;
}

.project-book {
  margin: auto;
}

.project-title {
  font-family: "EastmanAlternateTrial-Bold";
  font-size: 36px;
  text-align: center;
}

.project-description,
.end-book {
  position: absolute;
  max-width: 702px;
  max-height: 480px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  top: 0;
  z-index: -1;
  padding: 50px;
}

.project-description {
  display: none;
}

.end-book {
  margin-left: 702px;
  cursor: pointer;
}

.project-description div {
  padding: 50px;
  background-color: #f3d0c0;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.project-date {
  font-family: "Midnight Champion";
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}

.project-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.cross {
  background-image: url('../assets/img/greycross.svg');
  cursor: pointer;
  height: 32px;
  width: 32px;
  transition: all ease-in 100ms;
}

.cross:hover {
  background-image: url('../assets/img/redcross.svg');
  transform: scale(1.1);
}

.blue {
  background-color: #26565b;
}

.brown {
  background-color: #6c3f22;
}

.pink {
  background-color: #d38e7c;
}

.grey {
  background-color: #232d35;
}

.green {
  background-color: #395335;
}

.covers {
  /* width: 100%; */
  height: 100%;
}

.right {
  margin-left: 702px;
}

.left {
  margin-right: 702px;
}

.template {
  display: none;
}

.stf__block img,
.end-book img,
.page img {
  width: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

@media only screen and (min-width: 640px) {
  .author {
    gap: 85px;
  }
  /* cards */
  .card-description {
    font-size: 14px;
  }
  .card-description :last-child {
    font-size: 20px;
  }
  .about-me .title {
    font-size: 64px;
  }
  .library .title {
    font-size: 64px;
  }
  .cards {
    justify-content: unset;
  }
  .card {
    margin: 15px;
  }
  .author-img {
    width: 150px;
    height: 100%;
  }
  .description p {
    font-size: 14px;
    line-height: 18px;
  }
}

@media only screen and (min-width: 768px) {
  .home .title {
    font-size: 80px;
    line-height: 75px;
  }
  .about-container {
    flex-direction: row;
    justify-content: unset;
  }
  .author {
    flex-direction: column;
  }
  .social {
    align-self: unset;
    align-items: center;
  }
  .library {
    padding-top: 35px;
  }
  .about-me {
    padding-top: 35px;
  }
  /* cards */
  .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .card {
    justify-content: unset;
  }
  .card img {
    max-height: 100%;
    max-width: 150px;
  }
  .soon-card {
    display: flex;
  }
}

@media only screen and (min-width: 1024px) {
  .home .title {
    font-size: 128px;
    line-height: 120px;
  }
  .open {
    display: block;
  }
  .author-img {
    width: unset;
    height: unset;
  }
  .about-container {
    gap: 100px;
  }
  .description p {
    font-size: 18px;
    line-height: 23px;
  }
  /* cards */
  .cards {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 25px;
  }
  .card-description {
    font-size: 20px;
    position: relative;
  }
  .card-description :last-child {
    font-size: 28px;
    position: absolute;
    bottom: 10px;
  }
  .card img {
    max-height: 230px;
    max-width: 220px;
    padding: 15px;
  }
  .soon-card {
    margin: 40px 80px;
    justify-content: end;
  }
}

@media only screen and (min-width: 1280px) {
  .project-description {
    display: block;
  }
}

@media only screen and (min-width: 1920px) {
  .description p {
    font-size: 24px;
    line-height: 30px;
  }
  .library {
    padding-top: 150px;
  }

  .about-me {
    padding-top: 150px;
  }

}