@font-face {
  font-family: "Shadows Into Light";
  src: url(./../fonts/ShadowsIntoLight-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Stormblade";
  src: url(./../fonts/Stormblade-jJZ0.otf) format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DK Crayon Crumble";
  src: url(./../fonts/DkCrayonCrumble-ddll.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Shadows Into Light", "Times New Roman", "Comic Sans MS", "Comic Neue";
  margin: 0;
  background-color: whitesmoke;
  background-attachment: fixed;
  color: #000;
}

a {
  font-weight: bold;
  color: #000;
}

a:hover {
  background-color: rgb(255 255 0 / 70%);
}

#container {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

#header {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
  height: auto;
  min-height: 1px;
}

#header img {
  width: 100%;
  height: auto;
  display: block;
}

#header h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(1.8rem, 8vw, 5rem);
  font-family: "DK Crayon Crumble", "Comic Neue", sans-serif;
  color: #000;
  margin: 0;
  z-index: 1;
  white-space: nowrap;
}


#header h2 {
  position: absolute;
  top: 61.7%;
  left: 22%;
  transform: translate(-15%, -34%);
  font-size: clamp(1.5rem, 2vw, 5rem);
  font-family: "DK Crayon Crumble", "Comic Sans MS", "Comic Neue";
  color: #000;
  margin: 0;
  z-index: 1;
  white-space: nowrap;
}

main {
  padding: 2rem 1rem;
  background-image: url(./../img/reading-log/lined-paper.png);
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: top center;
  box-sizing: border-box;
}

.chart {
  display: flex;
  font-family: "Shadows Into Light", "Times New Roman";
  font-size: 1.7rem;
  margin-bottom: 6px;
}

.chart > div {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.date, .topdate {
  width: 8%;
  justify-content: center;
  padding-left: 0;
  margin-left: 0;
}

.cover, .topcover {
  width: 12%;
  justify-content: center;
  padding-left: 50px;
}

.title, .toptitle {
  width: 40%;
  justify-content: flex-start;
  padding-left: 10px;
}

.author, .topauthor {
  width: 20%;
  justify-content: flex-start;
  padding-left: 10px;
}

.rating, .toprating {
  width: 8%;
  justify-content: center;
  padding-left: 0;
}

.cover-img {
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.topdate, .topcover, .toptitle, .topauthor, .toprating {
  font-weight: bold;
  text-decoration: underline;
}

#topchart {
  margin-bottom: -10px;
  margin-top: 15px;
  margin-left: 10px;
  font-size: 1.8rem;
}

p {
  margin: 0;
}

.footer p {
  margin: 0;
}

.sticker {
  position: absolute;
  height: 100px;
  z-index: 1;
}

.sticky-text {
  position: absolute;
  font-family: "Stormblade", "Times New Roman";
  text-align: center;
  font-size: 1.5em;
  line-height: 0.7em;
  color: rgb(0 0 0 / 65%);
  z-index: 1;
  text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.4);
}


@media screen and (max-width: 600px) {
  #header h1 {
    font-family: "Comic Sans MS", "Comic Neue" !important;
    font-size: 1.9rem !important;
    position: absolute !important;
    top: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 0.9em;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    z-index: 10 !important;
    color: black !important;
    background: none !important;
  }

  #header h2 {
    font-family: "Comic Sans MS", "Comic Neue" !important;
    font-size: 1.3rem !important;
    position: absolute !important;
    top: 60px !important;
    left: 80% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    white-space: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    z-index: 10 !important;
    color: black !important;
    background: none !important;
  }

  /* Hide all stickers and overlay text */
  .sticker,
  .sticky-text {
    display: none !important;
  }

  /* Chart layout */
  .chart {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 90% !important;
    max-width: 320px !important;
    margin: 1.2rem auto 1.2rem 50px !important;
    padding: 0.5rem 0 !important;
    line-height: 1.05em !important;
    text-align: center !important;
  }

  .chart > div {
    display: block !important;
    width: 100% !important;
    padding: 0.15rem 0 !important;
  }

  .cover {
    margin: 0.4rem 0 !important;
  }

  .cover-img {
    width: 100% !important;
    max-width: 250px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .date::before {
    content: "Date Read: ";
    font-weight: bold;
  }

  .title::before {
    content: "Title: ";
    font-weight: bold;
  }

  .author::before {
    content: "Author: ";
    font-weight: bold;
  }

  .rating::before {
    content: "Rating: ";
    font-weight: bold;
  }

  /* Hide table column headers */
  #topchart .topdate,
  #topchart .topcover,
  #topchart .toptitle,
  #topchart .topauthor,
  #topchart .toprating {
    display: none !important;
  } 
}

@media screen and (max-width: 300px) {
  #header h1 {
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 1.3rem !important;
    font-family: "Comic Sans MS", "Comic Neue", sans-serif !important;
    color: black !important;
    z-index: 9999 !important;
    background: none !important;
    white-space: normal !important;
  }

  #header h2 {
    position: absolute !important;
    top: 50px !important;
    left: 70% !important;
    transform: translateX(-50%) !important;
    font-size: 0.8rem !important;
    font-family: "Comic Sans MS", "Comic Neue", sans-serif !important;
    color: black !important;
    z-index: 9999 !important;
    background: none !important;
    white-space: normal !important;
  }
}