@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,800;0,900;1,800;1,900&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  opacity: 0.9;
}

ul {
  list-style: none;
  text-align: left;
  font-size: 2.8vw;
}

.niv1 li {
  margin-bottom: 1rem;
  color: #0c61a7;
  overflow: hidden;
  background: linear-gradient(to right, #0c61a7, #0c61a7 50%, #002f55 50%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.4s ease, transform 1s;
  text-decoration: none;
  transform: translateX(0);
}
.niv1 li:hover {
  background-position: 0 100%;
  transform: translateX(1vw);
  transition: background-position 0.4s ease, transform 0.4s;
}

.niv2 li {
  margin-bottom: 1rem;
  color: #17b8b8;
  overflow: hidden;
  background: linear-gradient(to right, #17b8b8, #17b8b8 50%, #005555 50%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.4s ease, transform 1s;
  text-decoration: none;
  transform: translateX(0);
}
.niv2 li:hover {
  background-position: 0 100%;
  transform: translateX(1vw);
  transition: background-position 0.4s ease, transform 0.4s;
}

.niv3 li {
  margin-bottom: 1rem;
  color: #b81717;
  overflow: hidden;
  background: linear-gradient(to right, #a70c0c, #a70c0c 50%, #550000 50%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.4s ease, transform 1s;
  text-decoration: none;
  transform: translateX(0);
}
.niv3 li:hover {
  background-position: 0 100%;
  transform: translateX(1vw);
  transition: background-position 0.4s ease, transform 0.4s;
}

body {
  text-align: center;
  background: linear-gradient(0deg, #b8faef, #fff3f3, #b8dafa);
  background-size: 200% 500%;
  -webkit-animation: gradients 8s ease infinite;
          animation: gradients 8s ease infinite;
  font-family: "Nunito", sans-serif;
}

@-webkit-keyframes gradients {
  0% {
    background-position: 2% 0%;
  }
  50% {
    background-position: 99% 100%;
  }
  100% {
    background-position: 2% 0%;
  }
}

@keyframes gradients {
  0% {
    background-position: 2% 0%;
  }
  50% {
    background-position: 99% 100%;
  }
  100% {
    background-position: 2% 0%;
  }
}
.main-container {
  width: 60vw;
  height: 100vh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #005555;
  text-shadow: 0 0 10px rgba(0, 85, 85, 0.25);
}

.books-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.books-container img {
  display: block;
  width: 18vw;
  -webkit-animation: float 4s ease-in-out infinite;
          animation: float 4s ease-in-out infinite;
  border: 0 solid white;
  transition: border 0.4s;
}
.books-container img:nth-child(1) {
  -webkit-animation-delay: 0.125s;
          animation-delay: 0.125s;
}
.books-container img:nth-child(2) {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
.books-container img:nth-child(3) {
  -webkit-animation-delay: 0.375s;
          animation-delay: 0.375s;
}
.books-container img:hover {
  border: 13px solid white;
  transition: border 0.4s;
}

@-webkit-keyframes float {
  0% {
    box-shadow: 0 0 0 0px #ffffff00;
    transform: translatey(0px);
    outline: 0 solid rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 0 0 10px 0px #c3f4f8;
    transform: translatey(-8px);
    outline: 1px solid #e4fffb;
  }
  100% {
    box-shadow: 0 0 0 0px #ffffff00;
    transform: translatey(0px);
    outline: 0 solid rgba(255, 255, 255, 0);
  }
}

@keyframes float {
  0% {
    box-shadow: 0 0 0 0px #ffffff00;
    transform: translatey(0px);
    outline: 0 solid rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 0 0 10px 0px #c3f4f8;
    transform: translatey(-8px);
    outline: 1px solid #e4fffb;
  }
  100% {
    box-shadow: 0 0 0 0px #ffffff00;
    transform: translatey(0px);
    outline: 0 solid rgba(255, 255, 255, 0);
  }
}
@media screen and (max-width: 1020px) {
  .title {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 830px) {
  .title {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 680px) {
  .main-container {
    width: 80vw;
  }

  .books-container img {
    width: 24vw;
  }
  .books-container img:hover {
    border: 5px solid white;
    transition: border 0.4s;
  }

  .title {
    display: block;
    font-size: 1.8rem;
  }
  .title h1,
.title h4 {
    display: block;
    float: none;
  }
}
@media screen and (max-width: 550px) {
  .books-container {
    flex-direction: column;
  }
  .books-container img {
    width: 26vw;
    margin-bottom: 1rem;
  }

  .title {
    font-size: 1.4rem;
    margin-bottom: 2.5rem;
  }
}
@media screen and (max-width: 400px) {
  .books-container img {
    width: 32vw;
  }

  .title {
    font-size: 1.2rem;
  }
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3Nhc3MvbWFpbi5zY3NzIiwic3R5bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNRLDZHQUFBO0FBRVI7RUFDRSxzQkFBQTtFQUNBLFNBQUE7RUFDQSxVQUFBO0FDREY7O0FESUE7RUFDRSxxQkFBQTtFQUNBLGNBQUE7QUNERjtBREVFO0VBQ0UsWUFBQTtBQ0FKOztBRElBO0VBQ0UsZ0JBQUE7RUFDQSxnQkFBQTtFQUNBLGdCQUFBO0FDREY7O0FESUE7RUFDRSxtQkFBQTtFQUNBLGNBQUE7RUFDQSxnQkFBQTtFQUNBLHdFQUFBO0VBTUEsNkJBQUE7VUFBQSxxQkFBQTtFQUNBLG9DQUFBO0VBQ0EsMEJBQUE7RUFDQSx5QkFBQTtFQUNBLHVEQUFBO0VBQ0EscUJBQUE7RUFDQSx3QkFBQTtBQ05GO0FET0U7RUFDRSwyQkFBQTtFQUNBLDBCQUFBO0VBQ0EseURBQUE7QUNMSjs7QURTQTtFQUNFLG1CQUFBO0VBQ0EsY0FBQTtFQUNBLGdCQUFBO0VBQ0Esd0VBQUE7RUFNQSw2QkFBQTtVQUFBLHFCQUFBO0VBQ0Esb0NBQUE7RUFDQSwwQkFBQTtFQUNBLHlCQUFBO0VBQ0EsdURBQUE7RUFDQSxxQkFBQTtFQUNBLHdCQUFBO0FDWEY7QURZRTtFQUNFLDJCQUFBO0VBQ0EsMEJBQUE7RUFDQSx5REFBQTtBQ1ZKOztBRGNBO0VBQ0UsbUJBQUE7RUFDQSxjQUFBO0VBQ0EsZ0JBQUE7RUFDQSx3RUFBQTtFQU1BLDZCQUFBO1VBQUEscUJBQUE7RUFDQSxvQ0FBQTtFQUNBLDBCQUFBO0VBQ0EseUJBQUE7RUFDQSx1REFBQTtFQUNBLHFCQUFBO0VBQ0Esd0JBQUE7QUNoQkY7QURpQkU7RUFDRSwyQkFBQTtFQUNBLDBCQUFBO0VBQ0EseURBQUE7QUNmSjs7QURtQkE7RUFDRSxrQkFBQTtFQUNBLDREQUFBO0VBQ0EsMEJBQUE7RUFDQSw2Q0FBQTtVQUFBLHFDQUFBO0VBQ0EsaUNBQUE7QUNoQkY7O0FEbUJBO0VBQ0U7SUFDRSwwQkFBQTtFQ2hCRjtFRGtCQTtJQUNFLDZCQUFBO0VDaEJGO0VEa0JBO0lBQ0UsMEJBQUE7RUNoQkY7QUFDRjs7QURPQTtFQUNFO0lBQ0UsMEJBQUE7RUNoQkY7RURrQkE7SUFDRSw2QkFBQTtFQ2hCRjtFRGtCQTtJQUNFLDBCQUFBO0VDaEJGO0FBQ0Y7QURtQkE7RUFDRSxXQUFBO0VBQ0EsYUFBQTtFQUNBLG1CQUFBO0VBQ0EsYUFBQTtFQUNBLHNCQUFBO0VBQ0EsbUJBQUE7RUFDQSx1QkFBQTtBQ2pCRjs7QURvQkE7RUFDRSxhQUFBO0VBQ0EsV0FBQTtFQUNBLG1CQUFBO0VBQ0EsOEJBQUE7RUFDQSxlQUFBO0VBQ0EsbUJBQUE7RUFDQSxjQUFBO0VBQ0EsMkNBQUE7QUNqQkY7O0FEb0JBO0VBQ0UsV0FBQTtFQUNBLGFBQUE7RUFDQSxtQkFBQTtFQUNBLGVBQUE7RUFDQSxtQkFBQTtFQUNBLDhCQUFBO0FDakJGO0FEa0JFO0VBQ0UsY0FBQTtFQUNBLFdBQUE7RUFDQSxnREFBQTtVQUFBLHdDQUFBO0VBQ0EscUJBQUE7RUFDQSx1QkFBQTtBQ2hCSjtBRGtCTTtFQUNFLCtCQUFBO1VBQUEsdUJBQUE7QUNoQlI7QURlTTtFQUNFLDhCQUFBO1VBQUEsc0JBQUE7QUNiUjtBRFlNO0VBQ0UsK0JBQUE7VUFBQSx1QkFBQTtBQ1ZSO0FEYUk7RUFDRSx3QkFBQTtFQUNBLHVCQUFBO0FDWE47O0FEZ0JBO0VBQ0U7SUFDRSwrQkFBQTtJQUNBLDBCQUFBO0lBQ0EsdUNBQUE7RUNiRjtFRGVBO0lBQ0UsZ0NBQUE7SUFDQSwyQkFBQTtJQUNBLDBCQUFBO0VDYkY7RURlQTtJQUNFLCtCQUFBO0lBQ0EsMEJBQUE7SUFDQSx1Q0FBQTtFQ2JGO0FBQ0Y7O0FERkE7RUFDRTtJQUNFLCtCQUFBO0lBQ0EsMEJBQUE7SUFDQSx1Q0FBQTtFQ2JGO0VEZUE7SUFDRSxnQ0FBQTtJQUNBLDJCQUFBO0lBQ0EsMEJBQUE7RUNiRjtFRGVBO0lBQ0UsK0JBQUE7SUFDQSwwQkFBQTtJQUNBLHVDQUFBO0VDYkY7QUFDRjtBRGdCQTtFQUNFO0lBQ0UsaUJBQUE7RUNkRjtBQUNGO0FEaUJBO0VBQ0U7SUFDRSxpQkFBQTtFQ2ZGO0FBQ0Y7QURrQkE7RUFDRTtJQUNFLFdBQUE7RUNoQkY7O0VEbUJFO0lBQ0UsV0FBQTtFQ2hCSjtFRGlCSTtJQUNFLHVCQUFBO0lBQ0EsdUJBQUE7RUNmTjs7RURtQkE7SUFDRSxjQUFBO0lBTUEsaUJBQUE7RUNyQkY7RURnQkU7O0lBRUUsY0FBQTtJQUNBLFdBQUE7RUNkSjtBQUNGO0FEbUJBO0VBQ0U7SUFDRSxzQkFBQTtFQ2pCRjtFRGtCRTtJQUNFLFdBQUE7SUFDQSxtQkFBQTtFQ2hCSjs7RURtQkE7SUFDRSxpQkFBQTtJQUNBLHFCQUFBO0VDaEJGO0FBQ0Y7QURtQkE7RUFFSTtJQUNFLFdBQUE7RUNsQko7O0VEcUJBO0lBQ0UsaUJBQUE7RUNsQkY7QUFDRiIsImZpbGUiOiJtYWluLmNzcyJ9 */