* {
  box-sizing: border-box;
}

/* Define coffinitup color scheme */
:root {
--primary-color: #D2770E;  /* Text */
--secondary-color: #F5C792; /* Links */
--tertiary-color: #A58C6F;  /* Visited Links */
--quaternary-color: #8C0D00;  /* Active Links and Headings */
--background-color: #000000; 
}

/* General styles */
body {
background:url('images/body-bg.gif') fixed repeat-x;
background-color: var(--background-color);
color: var(--primary-color);
font-family: sans-serif;
margin: 1vw;
}


/* Style the links in the body */
main a {
  text-decoration: none;
color: var(--secondary-color);
}

/* Style the visited links in the body */
main a:visited {
color: var(--tertiary-color);
}

/* Style the links in the body */
main a:hover {
color: var(--quaternary-color);
  background-color: #390000;
}

/* Define navigation style */
nav {
  background-image: url('images/series-bg.png');
  background-size: 95% 95%;
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  left: 33vw;
  right: auto;
  height: auto;
  width: 30vw;
  align: center;
  text-align: center;
  padding: 5px;
  z-index: 3; /* set the z-index to 3 */
}

nav ul {
  display: flex; /* Use flexbox to display the list horizontally */
  list-style: none; 
  text-align: center;
  font-weight: bold;
  margin: 0; 
  padding: 0; 
}

nav li {
  margin: 0 2vw; /* Add spacing between the list items */
}

/* Style the links in the navigation bar */
nav a {
  text-decoration: none;
  color: var(--secondary-color);
}

/* Style the visited links in the navigation bar */
nav a:visited {
color: var(--tertiary-color);
}

/* Style the links in the navigation bar on hover */
nav a:hover {
  color: var(--background-color);
  background-color: var(--primary-color);
}


/* Style Unordered Lists */
ul {
  list-style-type: square;
  list-style-position: outside; 
  text-align: left;
  padding-left: 4vw;
}

/* Heading box for Series title and description */

.series {
  background-image: url('images/series-bg.png');
  background-size: 95% 95%;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto;
  padding-top: 3vw;
  padding-right: 5vw;
  padding-left: 5vw;
  padding-bottom: 4vw;
  align: center;
  text-align: center;
  color: var(--primary-color);
}





/* Style for screens below 800px  */
@media (max-width: 800px) {
/* Style the header for small screens */
header {
  background-image: url('images/ani-logo-med.gif');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 125px;
  position: fixed;
  top: 35px;
  left: 0;
  right: 0;
  z-index: 2; /* set the z-index to 2 */
}

/* Style the main content area - outer wrapper small screens */
main {
  margin-top: 130px;
  padding-top: 1vw;
  padding-bottom: 1vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
/* border: 2px solid green; */
}



  /* Description box - for series  - small screens */
  .description-box {
    margin-top: 0px;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-bottom: 2vw;
    padding: 1vw;
    display: flex;
    width: calc(100vw*.9);
    min-height: 55vw;
    flex-direction: row;
    align-items: flex-start;
    text-align: center;
    background-color: #000000;
/*  border: 2px solid pink; */
}


  /* Sets up the cover and frame images to overlap - small screens */
  .cover-frame {
    width: 45%;
    position: relative;
    padding-right: 15px;
}

   .frame {
     width: 90%;
     position: absolute; 
     top: 0;
     left: 0;
     z-index: 1;
}

   .cover {
     width: 84%;
     border-radius: 5px;
     position: absolute;
     top: 1.2vw;
     left: 1vw;
     z-index: 0;
}

   .new {
     width: 95%;
     margin-top: 55vw;
     margin-left: 1vw;
     margin-right: auto;
}

  /* Description box - for books - small screens */
  
  .container {
    margin-top: 0px;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-bottom: 1vw;
    padding: 1vw;
    display: flex;
    width: calc(0.95 * 100vw);
    min-height: 33vw;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #000000;
}


  .book-box {
    display: flex;
    width: 100%;
    min-height: 60vw;
    flex-direction: row;
    align-items: flex-start;
    text-align: center;
/*  border: 2px solid pink; */
}


  /* Sets up the cover image for individual books */
  .book-frame {
    width: 45%;
    position: relative;
    padding-right: 15px;
}

   .book-cover {
     width: 95%;
     border-radius: 5px;
     position: absolute;
     top: 1.2vw;
     left: 1vw;
     z-index: 0;
}

  .blurb {
    width: 55%;
    position: right;
    box-sizing: border-box;
    font-size: 1.5vw;
}


  /* Container for Store Links - small screens */

  .store-box {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    /* border: 2px solid pink; */
}


  /* Store Name Header - small screens */
  .store {
    font-size: calc(1.5vw*2.5);
    color:  var(--secondary-color);
    font-weight: bold;
}

  /* Store Name Buttons - small screens */
  .store-button {
    background-color: #390000;
    font-size: calc(1.5vw*2.5);
    color:  var(--secondary-color);
    font-weight: bold;
    text-align: center;
    padding: 1vw;
    margin: 1vw;
    min-width: 40%;
    text-decoration: none;
    display: inline-block;
    border-radius: 2.5vw;

}

/* Styling for Coming Soon button (no links) */

.store-button.coming-soon {
    background-color: #423e3e;
    font-size: calc(1.5vw*2.5);
    color:  var(--secondary-color);
    font-weight: bold;
    text-align: center;
    padding: 1vw;
    margin: 1vw;
    min-width: 40%;
    text-decoration: none;
    display: inline-block;
    border-radius: 2.5vw;
    cursor: default;
    pointer-events: none; /* so it's not clickable */
    opacity: 0.5;
}


  /* Headings */
   .blurb h1 {
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  color: var(--secondary-color);
  font-size: 5vw;
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

   .blurb h2 {
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: 3.25vw;
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

   .blurb h3 {
  margin: 0 auto;
  padding: 1vw 0 0 0;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: 2.75vw;
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

}


/* Style for screens 801px to 1090px */
@media (min-width: 801px) and (max-width: 1090px) {
/* Style the header for med screens */
header {
  background-image: url('images/ani-logo-med.gif');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 176px;
  position: fixed;
  top: 35px;
  left: 0;
  right: 0;
  z-index: 2; /* set the z-index to 2 */
}

/* Style the main content area */
main {
  margin-top: 185px;
  padding-top: 1vw;
  padding-bottom: 1vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
}

  /* Description box - outer wrapper */
  .description-box {
    margin-top: 0px;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-bottom: 1vw;
    padding: 1vw;
    display: flex;
    width: calc(0.45 * 100vw);
    min-height: 33vw;
    flex-direction: row;
    align-items: flex-start;
    text-align: center;
    background-color: #000000;
}


  .cover-frame {
    width: 55%;
    position: relative;
    padding-right: 15px;
}

   .frame {
     width: 90%;
     position: absolute; 
     top: 0;
     left: 0;
     z-index: 1;
}

   .cover {
     width: 83%;
     border-radius: 5px;
     position: absolute;
     top: 1vw;
     left: 1vw;
     z-index: 0;
}

   .new {
     width: 95%;
     margin-top: 30vw;
     margin-left: 1vw;
     margin-right: auto;
}


  /* Description box - individual books - medium screens */

  .container {
    margin-top: 0px;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-bottom: 1vw;
    padding: 1vw;
    display: flex;
    width: 85vw;
    min-height: 33vw;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #000000;
}


  .book-box {
    display: flex;
    width:100%;
    min-height: 50vw;
    flex-direction: row;
    align-items: flex-start;
    text-align: center;
}

  /* Sets up the cover image for individual books */
  .book-frame {
    width: 40%;
    position: relative;
    padding-right: 15px;
}

   .book-cover {
     width: 95%;
     border-radius: 5px;
     position: absolute;
     top: 1.2vw;
     left: 1vw;
     z-index: 0;
}

  .blurb {
    width: 55%;
    position: right;
    box-sizing: border-box;
    font-size: 2vw;
}

  /* Container for Store Links - medium screens */

  .store-box {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    /* border: 2px solid pink; */
}


  .store {
    font-size: calc(1.5vw*2);
    color:  var(--secondary-color);
    font-weight: bold;

}

  /* Store Name Buttons */
  .store-button {
    background-color: #390000;
    font-size: calc(1.5vw*1.5);
    color:  var(--secondary-color);
    font-weight: bold;
    text-align: center;
    padding: 1vw;
    margin: 1vw;
    min-width: 30%;
    text-decoration: none;
    display: inline-block;
    border-radius: 2.5vw;

}

/* Styling for Coming Soon button (no links) */

.store-button.coming-soon {
    background-color: #ffffff;
    font-size: calc(1.5vw*1.5);
    color:  var(--secondary-color);
    font-weight: bold;
    text-align: center;
    padding: 1vw;
    margin: 1vw;
    min-width: 30%;
    text-decoration: none;
    display: inline-block;
    border-radius: 2.5vw;
    cursor: default;
    pointer-events: none; /* so it's not clickable */
    opacity: 0.6;
}

  /* Headings */
   .blurb h1 {
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  color: var(--secondary-color);
  font-size: calc(6vw*.45);
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

   .blurb h2 {
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: calc(4vw*.45);
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

   .blurb h3 {
  margin: 0 auto;
  padding: 1vw 0 0 0;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: calc(3.5vw*.45);
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

}


/* Style for screens over 1091px */
@media (min-width: 1091px) {
/* Style the header for med screens */
header {
  background-image: url('images/ani-logo-lg.gif');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 305px;
  position: fixed;
  top: 35px;
  left: 0;
  right: 0;
  z-index: 2; /* set the z-index to 2 */
}

/* Style the main content area */
main {
  margin-top: 305px;
  padding-top: 1vw;
  padding-bottom: 1vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
}

  /* Description box - outer wrapper */
  .description-box {
    margin-top: 0px;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-bottom: 1vw;
    padding: 1vw;
    display: flex;
    width: calc(0.3 * 100vw);
    min-height: 25vw;
    flex-direction: row;
    align-items: flex-start;
    text-align: center;
    background-color: #000000;
}


  .cover-frame {
    width: 55%;
    position: relative;
    padding-right: 15px;
}

   .frame {
     width: 90%;
     position: absolute; 
     top: 0;
     left: 0;
     z-index: 1;
}

   .cover {
     width: 80%;
     border-radius: 5px;
     position: absolute;
     top: 1vw;
     left: 1vw;
     z-index: 0;
}

   .new {
     width: 80%;
     margin-top: 20vw;
     margin-left: 1vw;
     margin-right: auto;
}

  /* Description box - individual books - large screens */

  .container {
    margin-top: 0px;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-bottom: 1vw;
    padding: .5vw;
    display: flex;
    width: 45vw;
    min-height: 33vw;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    background-color: #000000;
}



  /* Description box - individual books - large screens */
  .book-box {
    display: flex;
    width: calc(0.43 * 100vw);
    min-height: 31vw;
    flex-direction: row;
    align-items: flex-start;
    text-align: center;
}

  /* Sets up the cover image for individual books */
  .book-frame {
    width: 45%;
    position: relative;
    padding-right: 15px;
}

   .book-cover {
     width: 95%;
     border-radius: 5px;
     position: absolute;
     top: 1.2vw;
     left: 1vw;
     z-index: 0;
}

  .blurb {
    width: 50%;
    position: right;
    box-sizing: border-box;
    padding-left: .75vw;
    padding-right: 1vw;
    font-size: 1.1vw;
}


  /* Container for Store Links - large screens */

  .store-box {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    /* border: 2px solid pink; */
}

  .store {
    font-size: 1.5vw;
    color:  var(--secondary-color);
    font-weight: bold;

}

  /* Store Name Buttons */
  .store-button {
    background-color: #390000;
    font-size: 1.5vw;
    color:  var(--secondary-color);
    font-weight: bold;
    text-align: center;
    padding: .75vw;
    margin: .5vw;
    min-width: 30%;
    text-decoration: none;
    display: inline-block;
    border-radius: 2.5vw;

}

.store-button.coming-soon {
    background-color: #423e3e;
    font-size: 1.5vw;
    color:  var(--secondary-color);
    font-weight: bold;
    text-align: center;
    padding: .75vw;
    margin: .5vw;
    min-width: 30%;
    text-decoration: none;
    display: inline-block;
    border-radius: 2.5vw;
    cursor: default;
    pointer-events: none; /* so it's not clickable */
    opacity: 0.6;
}

  /* Headings */
   .blurb h1 {
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  color: var(--secondary-color);
  font-size: calc(6vw*.3);
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

   .blurb h2 {
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: calc(4vw*.3);
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

   .blurb h3 {
  margin: 0 auto;
  padding: 1vw 0 0 0;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: calc(3.5vw*.3);
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

}