html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    font-size: 16px;
}


ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    margin: 0; 
    padding: 0;
    width: 100%;
    background-color: #134356;
    color: white;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    line-height: 7rem; 
    padding-left: 40px;
    padding-right: 40px; 
    vertical-align: middle; 
    color: white;
}

header nav ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: auto;
    font-style: italic;
    font-family: "EB Garamond", sans-serif;
    font-size: 3rem; 
}

.home {
    flex: 1; 
    font-size: 3rem;  

}
.books {
    flex: 1; 
    text-align: right; 

}

hr {
    border: 1px solid #037271; 
    margin: 2rem 0 2rem 0
}

.container {
    width: 100%; 
    padding-bottom: 1rem;
}

.panelset {
    margin: auto;
    z-index: 100; 
    display: flex; 
    justify-content: center;  
    max-width: 1000px;
    flex-wrap: wrap;
}

.panel {
    text-align: center; 
    padding: 2rem;
    flex: 1;

}

.padtop {
    padding-top: 2rem;
}

@media screen and (max-width: 1000px) { 
    .panelset {
        max-width: 100%;
        display: block;
    }
    body {
        font-size: 18px; /* Makes font slightly larger and more readable */
    }

  .container {
    flex-direction: column; /* Stacks the columns vertically */
  }

  .sm-hide {
    display: none;
  }
}

.alternate {
    background-color: white;
    color: black;
}

a {
    color: white;
    text-decoration: none;
}

.alternate a {
    color: #F68565;
    border-bottom: none;
}

.books a {
    color: white;
    text-decoration: none;
    border-bottom: 1px solid #F68565    
}




h1 {
    padding: 60px 0 30px 0;
    font-weight: 300;
    font-size: 2.4rem;

}
h2 {
    font-family: 'Dancing Script', cursive; 
    font-size: 3rem; 
    text-align: center; 
    margin: 0.5rem 0 0.5rem 0;
}
p {
    line-height: 2rem;
    font-weight: 300;
    padding: 1rem;
}

b {
    font-weight: 600;
    color: #000;
}

em {
    font-style: italic;
    color: #F68565;
}

i {
    font-style: italic;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

  @keyframes fadein {
    0% {
        transform: translateY(20%);
        opacity: 0;
    }
    60% {
        transform: translateY(20%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.fadeInUp-animation {
    opacity: 0;
    animation: 1.5s ease 0s normal forwards 1 fadein;
}

.shake:hover {
    animation: shake 1s; 
    animation-iteration-count: infinite; 
}
footer {
    padding: 0 0;
    margin: 2rem 4rem; 
    font-size: 0.8rem; 
    font-style: italic; 
    text-align: center;
}


/* God rays */

@keyframes jumbo {
    from {
        background-position: 50% 50%, 50% 50%;
    }
    to {
        background-position: 350% 50%, 350% 50%;
    }
}

.jumbo {
    --stripes: repeating-linear-gradient(
        100deg,
        #fff 0%,
        #fff 7%,
        transparent 10%,
        transparent 12%,
        #fff 16%
    );
    --stripesDark: repeating-linear-gradient(
        100deg,
        #000 0%,
        #000 7%,
        transparent 10%,
        transparent 12%,
        #000 16%
    );
    --rainbow: repeating-linear-gradient(
        100deg,
        #fff 10%,
        #023635 15%,
        #fff 20%,
        #037271 25%,
        #fff 30%
    );
    background-image: var(--stripes), var(--rainbow);
    background-size: 300%, 200%;
    background-position: 50% 50%, 50% 50%;

    filter: invert(100%);

    mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);

    pointer-events: none;
}

.jumbo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--stripes), var(--rainbow);
    background-size: 200%, 100%;
    animation: jumbo 60s linear infinite;
    background-attachment: fixed;
    mix-blend-mode: difference;
}

.dark .jumbo {
    background-image: var(--stripesDark), var(--rainbow);
    filter: blur(10px) opacity(50%) saturate(200%);
}
.dark .jumbo::after {
    background-image: var(--stripesDark), var(--rainbow);
}

.book-container {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
  }
  
  @keyframes initAnimation {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-30deg);
    }
  }
  
  .book {
    width: 300px;
    height: 500px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-30deg);
    transition: 0.5s ease;
    animation: 1s ease 0s 1 initAnimation;
  }
  
  .book-container:hover .book, 
  .book-container:focus .book {
    transform: rotateY(0deg);
  }
  
  .book > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
    width: 300px;
    height: 500px;
    transform: translateZ(32.5px);
    background-color: #01060f;
    border-radius: 0 2px 2px 0;
    box-shadow: 5px 5px 20px #134356;
  }
  
  .book::before {
    position: absolute;
    content: ' ';
    background-color: blue;
    left: 0;
    top: 3px;
    width: 63px;
    height: 494px;
    transform: translateX(264.5px) rotateY(90deg);
    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%
      );
  }
  
  .book::after {
    position: absolute;
    top: 0;
    left: 0;
    content: ' ';
    width: 300px;
    height: 500px;
    transform: translateZ(-32.5px);
    background-color: #01060f;
    border-radius: 0 2px 2px 0;
    box-shadow: -10px 0 50px 10px #134356;
  }