@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&family=Racing+Sans+One&display=swap');

:root[data-theme="light"] {
    --top-grad: red;
    --bot-grad: blue;
}

:root[data-theme="synthwave"] {
    --top-grad: blue;
    --bot-grad: red;
}
  
#bold {
    font-weight: bold;
}

html, body {
  min-height: 100%;
  margin: 0;
}


#header {
    display: flex;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(var(--top-grad), var(--bot-grad));
    color:white;
    font-family: "Racing Sans One", sans-serif;
    font-size: 1.5rem;
}

nav {
    position: sticky;
    top: 0;
    background: var(--bot-grad);
}

#navbar {
    position: sticky;
    top: 0;
    z-index: 50;
}

@media (max-width: 500px) {
  #navItem { 
    display: none;
  }
  #navIcon {
    margin: 0;
    padding: 0;
  }
}

@media (min-width: 500px) {
  #navIcon {
    display: none;
  }
  .navbar-center {
    gap: 1rem;
  }
}

#main {
    padding: 2rem;
    font-family: "Montserrat", sans-serif;
}

#main h3 {
    font-size: 2rem;
}

#paneParent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    width: 100%;
}

#pane {
    max-width: 30rem;
    background-color: hsl(var(--er)); /* error */
    color: hsl(var(--su)); /* success */
    
    margin-bottom: 3rem;
}

#pane h3 {
    font-family: "Quicksand";
}

/*CONTACT PAGE--------------------------------------------------------*/

#contact {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

#contact p, #contact h2 {
    font-family: "Quicksand";
}

#contactButton {
    margin-top: 1.2rem;
}


/*BOOKS PAGE----------------------------------------------------------*/

#books {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    min-height: max-content;
}

.book {
    display: flex;
    flex-direction: column;
    max-width: 22rem;
    border-radius: 25px;
    overflow: hidden;
}

.book div {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.book h3 {
    font-weight: bold;
    font-family: "Montserrat";
}

.book h6 {
    font-family: "Quicksand";
    color: var(--bot-grad);
}

.book p {
    padding-top: 1rem;
}

#rating {
    display: flex;
    justify-content: center;
    padding: 1.5rem;
    /*color: #ffd200;*/
    color: var(--bot-grad);
    font-size: 1.5rem;
}

#globalFooter {
    padding: 2rem;
    display: flex;
    justify-content: center;
    background-color: #6B7280;
    color: white;
    font-family: montserrat;
}