@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
}

:root {
    --horsemenred: 139 19 28;
    --horsemengreen: 68 103 49;
}

html, body {
    height: 100%;
}

body {
    /* background-color: rgb(49 57 68);*/
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-image:
        radial-gradient(at 0% 0%, rgba(var(--horsemenred) / 0.33) 0px, transparent 50%),
        radial-gradient(at 98% 1%, rgba(var(--horsemengreen) / 0.33) 0px, transparent 50%),
        radial-gradient(at 50% 20%, rgba(0 0 0 / 0.33) 0px, transparent 50%);
    background-repeat: no-repeat;
    background-size: auto 800px;
}



.authorcolor {
    color: #39cee9 !important;
}
.readbycolor {
    color: #7749d3 !important;
}
.editedbycolor {
    color: #d83bc3 !important;
}
.compiledbycolor {
    color: #33d67d !important;
}
.designedbycolor {
    color: #db7f42 !important;
}
.illustratedbycolor {
    color: #d13636 !important;
}


.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
    z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
    display: block !important;
}




.book-container {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 400px;
    padding: 50px 30px;
}

@keyframes initAnimation {
    0% { transform: rotateY(0deg) rotateX(0deg); }
    100% { transform: rotateY(-30deg) rotateX(10deg); }
}

.book {
    width: 200px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-30deg) rotateX(10deg);
    transition: 1s ease;
    animation: 1s ease 0s 1 initAnimation;
    background-size: cover;
}

.book-container:hover .book, 
.book-container:focus .book {
    transform: rotateY(0deg) rotateX(0deg);
}

.book > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
    width: 200px;
    height: 300px;
    background-color: #101a2e;
    /*box-shadow: 5px 5px 20px #666;*/
    box-shadow: 0px 0px 10px #08080887;
}

.paperback.book > :first-child  {
  transform: translateZ(20px);
  border-radius: 0 0px 0px 0;
}
.hardcover.book > :first-child  {
  transform: translateZ(25px);
  border-radius: 0 2px 2px 0;
}

.book::before {
    position: absolute;
    content: ' ';
    background-color: blue;
    left: 0;
    background: linear-gradient(90deg, #fff 0%, #f9f9f9 5%, #fff 10%, #f9f9f9 15%, #fff 20%, #f9f9f9 25%, #fff 30%, #f9f9f9 35%, #fff 40%, #f9f9f9 45%, #fff 50%, #f9f9f9 55%, #fff 60%, #f9f9f9 65%, #fff 70%, #f9f9f9 75%, #fff 80%, #f9f9f9 85%, #fff 90%, #f9f9f9 95%, #fff 100%);
}

.paperback.book::before {
    top: 0px;
    width: 38px;
    height: 300px;
    transform: translateX(180px) rotateY(90deg);
}
.hardcover.book::before {
    top: 4px;
    width: 48px;
    height: 292px;
    transform: translateX(171px) rotateY(90deg);
}

.book::after {
    position: absolute;
    top: 0;
    left: 0;
    content: ' ';
    width: 200px;
    height: 300px;
    background-color: #101a2e;
    box-shadow: 0 0 20px 8px #1e1e1eb5;
}

.paperback.book::after {
  transform: translateZ(-20px);
  border-radius: 0 0px 0px 0;
}
.hardcover.book::after {
  transform: translateZ(-25px);
  border-radius: 0 2px 2px 0;
}