* { box-sizing: border-box; }

body { font-family: Garamond; }

ul { list-style-type: none;   padding: 0px; }
ul li ul {display:none; list-style-type: none; text-align: left;  position: absolute;  }
ul li ul li {padding: 8px; border: purple 1px solid; background-color: white; border-collapse: collapse;}
ul > li:hover ul{display:block;}
ul > li > ul > li > ul > li{display:none;}
ul > li:hover ul > li:hover ul li{display:block;}
li{cursor:pointer;}

a {
    margin: 0;
    text-decoration: none;
    color: purple;
}

a:hover {
    color: black;
}

.circle-image {
    width: 400px;
    height: 160px;
    border-radius: 0%;
    object-fit: cover;
    object-position: 50% 5%;
    margin: auto;
    border: 3px solid black;
}

#bar {
    display: grid;
    grid-auto-flow: column;
    height: 200px;
    text-align: center;
    align-content: space-between;
    justify-content: stretch;
}

#navigation {
    display: flex;
    flex-wrap: wrap;
    align-self: baseline;
    justify-content: space-evenly;
    gap: 10px;
    border: 1px solid black;
    margin-left: 10%;
    margin-right: auto;
    margin-top: 2%;
    z-index: 2;
    background-color: white;
}

#navigation a {
    padding: 15px;
}

#header {
    margin-left: auto;
    margin-right: 5vw;
    z-index: 2;
    height: max-content;
}

#header h1 {
    padding: 15px;
}

#bg-img {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 0;
    padding: 40px;
}

#comic-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 5%;
    padding-right: 10%;
    padding-left: 10%;
    margin-bottom: 50px;
    width: 100%;
}

#comic-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page {
    text-align: left;
}

#text {
    margin-left: 150px;
    margin-right: 0;
    margin-bottom: 150px;
    max-width: 600px;
}

.otherimages {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: auto;
    padding: 20px;
}

.otherimages img {
    height: 300px;
    object-fit: contain;
}

 
#icons {
        display:flex;
        align-items: center;
        gap: 10px;
}

.comic-head {
    width: 80%;
    max-width: 700px;
    position: relative;
    display: block;
    margin: auto;
    margin-top: -8vw;
}

.comic-info {
    margin-left: 6vw;
    margin-right: 6vw;
    margin-top: 10vw;
}

#comicpages {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    padding: 20px;
    width: 90vw;
    max-width: 1000px;
}

#comicpages img {
    width: 50%;
    height: auto;
}
    
#comicpages .cover {
    grid-column: 1 / -1; 
    margin: auto;
    width: 100%;
}

.instagram-logo {
  /* Box Dimensions & Shape */
  width: 30px;
  height: 30px;
  border-radius: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  background: none;
  border: 1.5px solid purple;
}

/* The outer white camera outline */
.instagram-logo::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1.5px solid purple;
  border-radius: 4px;
  box-sizing: border-box;
}

/* The inner white lens circle and the top-right flash dot */
.instagram-logo::after {
  content: "";
  position: absolute;
  
  /* Inner Lens Circle */
  width: 8px;
  height: 8px;
  border: 1.5px solid purple;
  border-radius: 50%;
  box-sizing: border-box;
}



@media screen and (max-width: 800px) {
    ul li ul {
        position: absolute;
        left: 120px;
    }

    #navigation {
        width: 100px;
        margin-top: 20px;
    }

    .circle-image {
        width: 200px;
        height: 200px;
    }

    #bg-img {
    top: -2vw;
    left: -20vw;
        
    }


    #header {
        margin-right: auto;
        margin-top: -30px;
    }

    #text {
        margin-left: 150px;
        margin-right: 40px;
        max-width: 400px;
    }

    #comicpages {
    grid-template-columns: 1fr; }

}