* {
  border: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
background-color: #dfdff8;
}

:root {
  --mobile-width: 325px;
  --mobile-height: 800px;
  --mobile-radius: 25px;
  --separator-height: 500px;
  --bg: #272727;
  --mobile-bg: #747474;
  --intro-bg: #272727;
  --font-color: #807b7b;
  --transition: transform 0.7s ease-in-out;
}

.containers {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--bg);
}

.info {
  font-family: "Prata", serif;
  font-weight: 200;
  font-style: normal;
  font-style: italic;
  font-size: 26px;
  margin-top: 10px;
  color: var(--font-color);
}

.mobile-layout {
  width: var(--mobile-width);
  height: var(--mobile-height);
  margin: 30px 0;
  border-radius: var(--mobile-radius);
  perspective: 500px;
  overflow: hidden;
  color: var(--font-color);
  background-color: var(--mobile-bg);
  box-shadow: 36px 36px 50px 15px rgba(238, 215, 209, 0.8196078431);
}
.mobile-layout .notification-header {
  position: fixed;
  top: 5px;
  width: 100%;
  padding: 5px 15px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
    font-family: "Prata", serif;
  font-weight: 400;
  font-style: normal;
  font-weight: bold;
  z-index: 6;
}
.mobile-layout .actions {
  position: fixed;
  top: 37px;
  width: 100%;
  padding: 50px;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  z-index: 6;
}
.mobile-layout .book-cover {
  position: relative;
  height: var(--separator-height);
  width: calc(var(--mobile-width) * 2);
  left: -52.5%;
  border-top-left-radius: var(--mobile-radius);
  border-top-right-radius: var(--mobile-radius);
  background-color: var(--intro-bg);
  transform-style: preserve-3d;
  transform-origin: 50% 40%;
  transition: var(--transition);
  z-index: 4;
}
.mobile-layout .book-top {
  width: 170px;
  height: 250px;
  position: absolute;
  top: 180px;
  left: 250px;
  margin-top: 125px;
  z-index: 5;
  transform: translateZ(28.5px);
}
.mobile-layout .book-side {
  position: absolute;
  top: 430px;
  left: 222px;
  transform: translateY(-15px) translateX(0px) translateZ(15px) rotateX(104deg);
}
.mobile-layout .book-cover:hover {
  transform: rotateX(75deg) translateZ(3px) scale(0.75);
}
.mobile-layout .book-cover:hover + .preface {
  transform: translateY(-302px);
}
.mobile-layout .book-cover:hover + .preface .icon {
  transform: rotateX(180deg);
}
.mobile-layout .preface {
  height: var(700px);
  padding: 40px;
  transition: var(--transition);
  background: white;
  padding-top: 10px;
}
.mobile-layout .preface .header {
  display: flex;
  align-items: center;
  padding-top: 30px;
}
.mobile-layout .preface .title {
  font-family: "Prata", serif;
  font-weight: 200;
  font-style: normal;
  font-size: 26px;
  margin-bottom: 10px;
  margin-top: 20px;
}
.mobile-layout .preface .author {
   font-family: "Prata", serif;
  font-weight: 200;
  font-style: italic;
  margin-bottom: 20px;
}
.mobile-layout .preface .icon {
  transform-origin: top;
  transition: var(--transition);
}
.mobile-layout .preface .body {
    font-family: "Prata", serif;
  font-weight: 200;
  font-style: normal;
}
.mobile-layout .preface .body p:first-child {
  margin-bottom: 15px;
}
.mobile-layout .preface .body p {

  font-size: 15px;
}
.mobile-layout .preface .content {
  height: auto;
}
.mobile-layout .preface2 {
  height: var(--separator-height);
  padding: 40px;
  transition: var(--transition);
  background: white;
  padding-top: 10px;
}
.preface .test {
    font-family: "Prata", serif;
  font-weight: 200;
  font-style: normal;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  height: 24px;
  line-height: 24px;
  margin-bottom: 20px;
  color: rgb(128, 123, 123);
}

.preface .ftitle {
  color: rgb(54, 54, 54);
  display: block;
    font-family: "Prata", serif;
  font-weight: 200;
  font-style: normal;
  font-size: 26px;
  font-weight: 600;
  height: 58px;
  line-height: 29.25px;
  margin-top: 18px;
}

.boldtext {
  color: rgb(54, 54, 54);
  display: block;
    font-family: "Prata", serif;
  font-weight: 200;
  font-size: 18px;
  font-weight: 600;
}

.btn {
  background-color: #747474;
  border: 2px solid #747474;
  color: rgb(54, 54, 54);
  display: block;
    font-family: "Prata", serif;
  font-weight: 200;
  font-style: normal;
  margin-left: 3vw;
  font-weight: 600;


}

.btn:hover {
  background-color: rgb(54, 54, 54);
  border: 2px solid rgb(54, 54, 54);
  color: #747474;
}

.navbar {
  background-color: #212121;
}

.navbar-toggler {
  background-color: #747474;
  width: 3vw;
 

}


.links {
  color: #4f46e5;
  font-size: 3vh;
  margin-top: 5vh;
  font-weight: bolder;
}

.links:hover {
  font-size: 5vh;
  color: #2b2b2b;
}/*# sourceMappingURL=books.css.map */

.nav-item .buylink{
  color: #EAEAEA;
  font-size: 3vh;
 #4f46e5;
}
.compfoot{
  color: #EAEAEA;
  font-size: 2vh;
  #4f46e5;
}

.emaillink{
  color: #EAEAEA;
  font-size: 2vh;
 #4f46e5;
  text-decoration: none;
}
.nav-item .buylink:hover {
  color: #EAEAEA;
  font-size: 5vh;
}

.dropdown-item {
  font-size: large;
}

body {
background-color: #dfdff8;
}
.nav li a {
  color: rgb(54, 54, 54);
    font-family: "Prata", serif;
  font-weight: 200;
  font-style: normal;
  font-weight: 600;
}

:root, [data-bs-theme=light] {
--bs-body-color: black;
--bs-link-color: #black;

}