* {
    margin: 0;
    padding: 0;
   box-sizing: border-box;
   font-weight: normal;
   font-size: 62.5%;
   font-family: 'Roboto', sans-serif;
   text-decoration: none;
}

html {
    scroll-behavior: smooth;
  }

@media only screen and (max-width: 767px) {
    ::-webkit-scrollbar {
        display: none;
      }

    body {
        background-color: #121212;
      }

    .locked-scroll {
        overflow-y: hidden;
    }

    .closed-scrim {
        display: none;
    }

    body .scrim {
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(0, 0, 0, .70);
        z-index: 1000;
    }

      /* TOP NAVIGATION BAR - includes burger svg, burger menu, logo, dark mode svg */
    nav {
        position: fixed;
        top: 0;
        width: 100%;
        height: 15vw;
        display: inline-grid;
        background-color: #292929;
        grid-template-columns: 10% 20% 60% 10%;
        grid-template-rows: auto;
        padding: 0 2vw 0 2vw;
        box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
        transition: 0.3s;
        z-index: 999;
    }

    .nav-up {
        top: -15vw;
    }

    #logo {
        grid-column-start: 2;
        grid-column-end: 3;
    }
    #dark {
        display: none;
        
    }
    #logo img {
        width: 27vw;
        height: 15vw;
    }

    .hidden-menu {
        display: none;
    }

    nav #burger {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        fill: white;
        align-self: center;
        justify-self: center;
        width: 7vw;
        height: 7vw;
    }

    nav #sun {
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 1;
        grid-row-end: 2;
        fill: white;
        align-self: center;
        justify-self: center;
        width: 3.5rem;
        height: 3.5rem;
    }

    /* Hidden Menu Styling */
    
    .hidden-menu-mobile {
        position: fixed;
        top: 0vh;
        background-color: #121212;
        width: 75%;
        height: 100%;
        transform: translateX(-100%);
        transition: all 0.4s ease;
        z-index: 1001;
    }

    .is-open {
        transform: translateX(0);
    }
    
    .hidden-menu-mobile .title {
        width: 100%;
        height: 15vw;
        margin-bottom: 2vw;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding-left: 2vw;
    }

    .hidden-menu-mobile .title img {
        width: 27vw;
        height: 16vw;
    }

    .hidden-menu-mobile .title #dark {
        display: none;
    }
    
    .hidden-menu-mobile .comics {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding-bottom: 2vw;
        margin-bottom: 2vw;
    }

    .hidden-menu-mobile .social-media-mobile {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .hidden-menu-mobile h6 {
        font-family:   'Roboto', sans-serif;
        font-size: 4.2vw;
        color: rgba(255, 255, 255, 0.56);
        padding: 1vw 0 1vw 1vw;
    }

    .hidden-menu-mobile .line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 3vw 2vw 3vw 2vw;
    }

    .hidden-menu-mobile .line:hover {
        cursor: pointer;
    }

    .hidden-menu-mobile .iden {
        display: flex;
        align-items: center;
    }
    .hidden-menu-mobile .comic-icon {
        width: 10vw;
        height: 10vw;
        border-radius: 1rem;
        margin-right: 2vw;
    }

    .hidden-menu-mobile p {
        font-family:   'Roboto', sans-serif;
        font-size: 4.6vw;
        color: rgba(255, 255, 255, .75);
    }

    .hidden-menu-mobile i{
        margin-right: 3vw;
        font-size: 5vw;
        color: rgba(255, 255, 255, .75);
    }

    .hidden-menu-mobile .im-angle-right, .hidden-menu-mobile span {
        margin-right: 0;
        color: rgba(255, 255, 255, 0.56);
        font-size: 5vw;
    }

    .hidden-menu-mobile .im-angle-right {
        font-size: 4vw;
    }

    .story1-menu-mobile, .story2-menu-mobile {
        position: fixed;
        top: 0vh;
        background-color: #121212;
        width: 75%;
        height: 100vh;
        transform: translateX(-100%);
        transition: all 0.4s ease;
        z-index: 1002;
    }

    .open-drawer {
        transform: translateX(0);
    }

    .story1-menu-mobile .title, .story2-menu-mobile .title {
        width: 100%;
        height: 15vw;
        margin-bottom: 2vw;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 3vw 2vw 3vw 2vw;
    }

    .story1-menu-mobile .title h5, .story2-menu-mobile .title h5 {
        font-size: 6.5vw;
        color: rgba(255, 255, 255, 0.56);
    }

    .story1-menu-mobile .title button, .story2-menu-mobile .title button {
        color: #8558DA;
        font-size: 5vw;
        background-color: #121212;
        border: none;
    }

    .story1-menu-mobile .iden:hover, .story2-menu-mobile .iden:hover {
        cursor: pointer;
    }

    .story1-menu-mobile .iden, .story2-menu-mobile .iden {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4vw 2vw;
    }

    .story1-menu-mobile .iden > div, .story2-menu-mobile .iden > div {
        display: flex;
    }

    .story1-menu-mobile .iden p, .story2-menu-mobile .iden p {
        font-size: 4vw;
        color: rgba(255, 255, 255, .75);
        }

    .story1-menu-mobile .iden i, .story2-menu-mobile .iden i {
        font-size: 4vw;
        color: rgba(255, 255, 255, 0.56);
    }
    
    .story1-menu-mobile span, .story2-menu-mobile span {
        color: rgba(255, 255, 255, 0.56);
        padding-right: 2.5vw;
    }


    /* MOST RECENT SECTION - includes the container name, most recent chapter image, icon, chapter number and name, comic name, date released and READ ME button */
    .most-recent {
        display: none;
    }

    .most-recent-mobile {
        display: inline-grid;
        width: 100%;
        height: 84vw;
        grid-template-columns: 18% 60% 22%;
        grid-template-rows: 15% 67% 18%;
        padding: 0 3vw;
        margin-top: 14vw;
        margin-bottom: 5vw;
    }

    .most-recent-mobile h3 {
        grid-column: 1 / 3;
        grid-row: 1 / span 1;
        font-family:  'Roboto', sans-serif;
        font-size: 3.7vw;
        text-transform: uppercase;
        align-self: end;
        padding: 0 0 2vw 3vw;
        color: rgba(255, 255, 255, 0.56)
    }

    .most-recent-mobile .main-image{
        grid-column: 1 / 4;
        grid-row: 2 / 3;
        width: 100%;
        height: 100%;
        border-radius: 1rem;
        filter: brightness(70%);
        object-fit: cover;
    }

    .most-recent-mobile .update-info {
        grid-column-start: 1/3;
        grid-row: 3 / 4;
        display: flex;
    }

    .most-recent-mobile .comic-icon {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        width: 14vw;
        height: 14vw;
        justify-self: start;
        align-self: end;
        border-radius: 1rem;
        filter: brightness(70%);
        object-fit: cover;
    }

    .most-recent-mobile .written-info {
        grid-column: 2 / span 1;
        grid-row: 3 / 4;
    }

    .most-recent-mobile .written-info h6 {
        font-family:  'Roboto', sans-serif;
        font-size: 3.8vw;
        padding-top: 3vw;
        padding-bottom: 1.3vw;
        color: rgba(255, 255, 255, .75);
    }

    .most-recent-mobile .written-info .sub-title {
        display: flex;
        align-items: center;
        font-family:  'Roboto', sans-serif;
        font-size: 4.8vw;
        color: rgba(255, 255, 255, 0.54)
    }

    .most-recent-mobile .written-info .sub-title p {
        padding-right: 2vw;
    }

    .most-recent-mobile .written-info .sub-title i {
        padding-right: 2vw;
        font-size: 2vw;
        color: rgba(255, 255, 255, 0.84)
    }

    .most-recent-mobile .read-here {
        grid-column: 3 / span 1;
        grid-row: 3 / 4;
        justify-self: center;
        width: 18vw;
        height: 10vw;
        align-self: center;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #8558DA;
        border: none;
        border-radius: 1rem;
        color: rgb(0, 0, 0);
        box-shadow: 0px 4px 6px rgba(0, 0, 0, .35);
        font-size: 3vw;
        padding: 0 2vw;
        margin-top: 1vw;
    }

    .most-recent-mobile button i {
        font-size: 3vw;
        
    }

    .recent-updates, .library, .aboutartist, .footer {
        display: none;
    }

    /* RECENT UPDATES SECTION 
    includes the recent updates title (h6) a main image for each update, comic icons, chapter titles and date updated */
    .recent-updates {
        display: none;
    }

    .recent-updates-mobile {
        display: inline-grid;
        height: 70vw;
        grid-template-columns: 1vw 1fr 1vw;
        grid-template-rows: 15% 1fr;
        margin-bottom: 5vw;
    }
    
    .recent-updates-mobile h3 {
        grid-column: 2 / span 1;
        grid-row: 1 / span 1;
        font-family:  'Roboto', sans-serif;
        font-size: 3.7vw;
        text-transform: uppercase;
        align-self: end;
        padding: 0 0 2vw 6vw;
        color: rgba(255, 255, 255, 0.56)
    }
    
    .recent-updates-mobile .option {
        grid-column: 1 / -1;
        grid-row: 2 / span 1;
        display: inline-grid;
        height: 55vw;
        grid-template-columns: .01vw repeat(4, calc(55%)) .01vw;
        grid-template-rows: minmax(150px, 1fr);
        grid-gap: 4.5vw;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
    }
    
    .recent-updates-mobile .option:before, .recent-updates-mobile .option:after {
        content: '';
    }
    
    .recent-updates-mobile .option > div {
        display: inline-grid;
        grid-template-columns: 20% 80%;
        grid-template-rows: 80% 20%;
    }
    
    .recent-updates-mobile .option div .main-image {
        object-fit: cover;
        grid-column: 1 / span 2;
        grid-row: 1;
        width: 100%;
        height: 78%;
        border-radius: 1rem;
        justify-self: center;
        filter: brightness(70%);
    }
    
    .recent-updates-mobile .option div .comic-icon {
        object-fit: cover;
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
        justify-self: center;
        align-self: center;
        width: 13vw;
        height: 13vw;
        padding: 1vw;
        border-radius: 1rem;
        filter: brightness(70%);
    }
    
    .recent-updates-mobile .option div .written-info {
        grid-column: 2 / span 1;
        grid-row: 2 / span 1;
        padding-left: 1.5vw;
    }
    
    .recent-updates-mobile .option div .written-info h6 {
        font-family:  'Roboto', sans-serif;
        font-size: 3.6vw;
        padding-top: 1.8vw;
        padding-bottom: .6vw;
        color: rgba(255, 255, 255, 0.75)
    }
    
    .recent-updates-mobile .option div .written-info .sub-title {
        display: flex;
        align-items: center;
        font-family:  'Roboto', sans-serif;
        font-size: 4.6vw;
        color: rgba(255, 255, 255, 0.54)
    }
    
    .recent-updates-mobile .option div .written-info .sub-title p{
       padding-right: 1vw; 
    }
    
    .recent-updates-mobile .option div .written-info .sub-title i {
        padding-right: 1vw;
        font-size: 2vw;
        color: rgba(255, 255, 255, 0.84)
    }

    /* LIBRARY SECTION - very similar to recent updates section, just less letters and bigger */
    .library {
        display: none;
    }
    .library-mobile {
        display: inline-grid;
        height: 130vw;
        grid-template-columns: 1vw 1fr 1vw;
        grid-template-rows: 5% 1fr;
        margin-bottom: 5vw;
    }

    .library-mobile h3 {
        grid-column: 2 / span 1;
        grid-row: 1 / span 1;
        font-family:  'Roboto', sans-serif;
        font-size: 3.7vw;
        text-transform: uppercase;
        align-self: end;
        padding: 0 0 2vw 6vw;
        color: rgba(255, 255, 255, 0.56)
    }

    .library-mobile .option {
        grid-column: 1 / -1;
        grid-row: 2 / span 1;
        display: inline-grid;
        height: 100%;
        grid-template-columns: .01vw repeat(2, calc(75%)) .01vw;
        grid-template-rows: minmax(150px, 1fr);
        grid-gap: 4.5vw;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
    }

    .library-mobile .option:before, .library-mobile .option:after {
        content: '';
    }
    
    .library-mobile .option > div {
        display: inline-grid;
        grid-template-columns: 20% 80%;
        grid-template-rows: 90% 10%;
    }
    
    .library-mobile .option div .main-image {
        grid-column: 1 / span 2;
        grid-row: 1 / span 1;
        width: 100%;
        height: 90%;
        border-radius: 1rem;
        justify-self: center;
        filter: brightness(70%);
    }

    .library-mobile .option div .main-image:hover {
        cursor: pointer;
    }

    .library-mobile .option div .written-info {
        grid-column: 1 / span 2;
        grid-row: 2 / span 1;
        padding-left: 1.5vw;
    }
    
    .library-mobile .option div .written-info h6 {
        font-family:  'Roboto', sans-serif;
        font-size: 4vw;
        padding-top: 1.8vw;
        padding-bottom: .6vw;
        color: rgba(255, 255, 255, 0.75)
    }
    
    .library-mobile .option div .written-info .sub-title {
        display: flex;
        align-items: center;
        font-family:  'Roboto', sans-serif;
        font-size: 4.8vw;
        color: rgba(255, 255, 255, 0.54)
    }
    
    .library-mobile .option div .written-info .sub-title p{
       padding-right: 1vw; 
    }
    
    .library-mobile .option div .written-info .sub-title i {
        padding-right: 1vw;
        font-size: 2vw;
        color: rgba(255, 255, 255, 0.84)
    }
    .firstcomic-popup, .secondcomic-popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #121212;
        transition: all 0.5s ease;
        opacity: 0;
        pointer-events: none;
    }

    .open {
        transform: translateY(0);
        opacity: 100%;
        pointer-events: all;
    }

    .firstcomic-popup img, .secondcomic-popup img {
        top: 0;
        width: 100vw;
        height: 55vh;
        z-index: 900;
        border-radius: 0 0 5rem 5rem;
        filter: brightness(70%);
        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14)
    }

    .firstcomic-popup #back-btn, .secondcomic-popup #back-btn {
        border-radius: 100%;
        position: absolute;
        top: 4vw;
        left: 4vw;
        z-index: 800;
        width: 13vw;
        height: 13vw;
        background-color: rgba(0, 0, 0, .70);
        border: none;
        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0,0,0,.12);
    }

    #back-btn:focus {
        outline: none;
    }

    .firstcomic-popup #back-btn span, .secondcomic-popup #back-btn span {
        color: white;
        font-size: 7vw;
    }

    .firstcomic-popup .written-info, .secondcomic-popup .written-info {
        text-align: center;
        font-family:  'Roboto', sans-serif;
    }
    
    .firstcomic-popup .written-info h3, .secondcomic-popup .written-info h3 {
        color: #8558DA;
        font-size: 10vw;
        font-weight: bold;
        padding: 4vw;
        margin-top: 4vw;
    }

    .firstcomic-popup .written-info p, .secondcomic-popup .written-info p {
        margin: 5vw 10vw 0 10vw;
        font-size: 4.5vw;
        color: #8558DA;
        opacity: .75
    }

    .firstcomic-popup .written-info .btns, .secondcomic-popup .written-info .btns {
        display: flex;
        justify-content: center;
    }

    .firstcomic-popup .written-info .btns button,  .secondcomic-popup .written-info .btns button {
        padding: 3vw 8vw 3vw 8vw;
        margin: 12vw 2vw 1vw 2vw;
        font-size: 4vw;
        border-radius: 1.4rem;
        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0,0,0,.12);
    }

    .firstcomic-popup .written-info .btns #learn-more, .secondcomic-popup .written-info .btns #learn-more {
        color: #8558DA;
        background-color: #121212;
        border: 1.4px solid #8558DA
    }

    .firstcomic-popup .written-info .btns #read-here, .secondcomic-popup .written-info .btns #read-here {
        color: rgba(0, 0, 0, 1);
        background-color: #8558DA;
        border: 1.4px solid #8558DA;
        font-weight: normal;
    }

    /* INFOPAGE MOBILE */
    #ap_main, .ap_footer {
        display: none;
    }

    .mobile_spacer {
        position: fixed;
        top: 0;
        width: 100%;
        height: 8vh;
    }

    .ap_overview_container .section {
        overflow: hidden;
        transition: height 0.3s ease-out;
        height: auto;
    }

    .ap_overview_container {
        box-shadow: 0px 3px 1px -2px rgba(175, 175, 175, 0.2), 
                    0px 2px 2px 0 rgba(150, 150, 150, 0.14),
                    0px 1px 5px 0 rgba(207, 207, 207, 0.12);
        border-radius: 0 0 5em 5em;
        border-bottom: 1px solid rgba(204, 204, 204, 0.2);
      }
    
    .ap_overview_container h1 {
        font-size: 3.8rem;
        font-weight: bold;
        padding: 1rem;
        color: #ebebeb;
    }

    .ap_overview_container p {
        font-size: 1.8rem;
        padding: 0 1rem;
        padding-bottom: 1.5rem;
        line-height: 2.4rem;
        color: #d1d1d1;
    }

      #toggle-button {
        display:block;
        --webkit-appearance:none;
        border:none;
        border-radius:3px;
        background-color: transparent;
        color:black;
        margin: 0 auto 1rem;
        padding: 0.5rem;
        cursor:pointer;
        transition: all 0.3s ease;
      }

      #toggle-button i {
          font-size: 1.8rem;
          color: #d1d1d1;
      }


    /* AP Chapter Scroller MOBILE */

    .chapters_mobile {
        display: flex;
        border-bottom: 2px solid rgba(145, 145, 145, 0.2);
        height: 125px;
    }

    .chapters_mobile h2 {
        font-size: 1.3rem;
        text-align: center;
        padding-top: 0.5rem;
        color: #d1d1d1;
    }

    .sticky_chapter {
        min-width: 80px;
        height: 80px;
        margin: 0 2rem;
        /* margin-left: 25px;
        margin-right: 8.5px; */
    }

    .sticky_chapter a {
        justify-self: center;
        text-align: center;
    }

    .sticky_chapter a img{
        border-radius: 50%;
        min-width: 100%;
        min-height: 100%;
        width: 100%;
        height: 100%;
    }

    .chapters_mobile .linebreak {
        width: 5px;
        height: 75px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 15%;
    }

    .hs_container, .ap_hs_cast_container {
        display: grid;
        grid-template-columns: 20px 1fr 20px;
    }

    .hs_container > *, .ap_hs_cast_container > *  {
        grid-column: 2 / -2;
    }

    .hs_container > .scrolling_chapter, .ap_hs_cast_container > .scrolling_cast {
        grid-column: 1 / -1;
    }

    .scrolling_chapter, .scrolling_cast {
        display: grid;
        grid-gap: 1px;
        grid-template-columns: 10px;
        grid-auto-flow: column;
        grid-auto-columns: 10px repeat(6, calc(38% - 40px)) 10px;
        grid-template-rows: minmax(150px, 1fr);
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .scrolling_chapter::before, .scrolling_chapter::after,
    .scrolling_cast::before, .scrolling_cast::after {
        content: '';
        width: 10px;
    }

    .scrolling_chapter a {
        justify-self: center;
        margin: 0 1.5rem;
        min-width: 80px;
        height: 80px;
    }

    .scrolling_chapter a  img {
        border-radius: 10%;
        min-width: 100%;
        min-height: 100%;
        width: 100%;
        height: 100%;
    }

    .ap_cast {
        margin: 1.4rem 0;
        border-bottom: 2px solid rgba(145, 145, 145, 0.2);
        height: 400px;
    }

    .ap_cast h2 {
        font-size: 2rem;
        padding: 0 25px 2rem;
        color: rgba(255, 255, 255, 0.5);
    }

    .cast_member {
        margin: 0 1.5rem;
        width: 300px;
        height: 300px;
    }

    .cast_member img {
        border-radius: 10%;
        min-width: 100%;
        min-height: 100%;
        width: 100%;
        height: 100%;
    }

    .ap_unknownChara > img {
        filter: brightness(25%);
        pointer-events: none;
    }

    /* CAST POPUPS */
    .cast_popup {
        display: flex;
        flex-flow: column wrap;
        position: fixed;
        bottom: 0;
        left: 0;
        height: 30vh;
        min-width: 100vw;
        border-radius: 5% 5% 0 0;
        background-color: #292929;
        box-shadow: 0px -3px 1px -2px rgba(0, 0, 0, 0.2), 0px -2px 2px 1px rgba(0, 0, 0, 0.14), 0px -2px 5px 0 rgba(0, 0, 0, 0.12);
        transform: translateY(35vh);
        transition: all 0.3s ease;
    }

    .cast_modals div > img {
        margin: 2rem 1rem 2rem 2rem;
        height: 80%;
        max-width: 40%;
        object-fit: cover;
        border-radius: 5%;
    }

    .cast_modals div > h5 {
        font-size: 2.2rem;
        padding: 4rem 2rem 2rem 0;
        color: white;
    }

    .cast_modals div > p {
        font-size: 1.3rem;
        flex-grow: 2;
        max-width: 40%;
        color: white;
    }

    /* AP GALLERY
    AP GALLERY
    AP GALLERY */

    .ap_gallery_bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 25px 2rem;
    }

    .ap_gallery_bar h2, .ap_gallery_bar span {
        font-size: 2rem;
        color: rgba(255, 255, 255, 0.5);
    }

    .ap_mobile_footer {
        background-color: #292929;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 3rem;
        box-shadow: 0 -4px 4px rgb(0 0 0 / 25%)
    }

    .ap_mobile_footcopyright {
        display: flex;
        flex: 1 1 auto;
        align-self: flex-end;
        align-items: baseline;
        font-size: 2.1rem;
        align-items: center;
        color: white;
        fill: white;
        padding: .8rem 1rem;
    }

    .ap_mobile_footcopyright svg {
        width: 1.2rem;
       height: 1.2rem;
       padding-right: .2rem;
    }

    #ap_gallery_mobile {
        width: 100vw;
        top: 7.8vh;
        max-height: 92.2vh;
        position: fixed;
        background-color: #121212;
        z-index: 900;
        overflow-y: scroll;
        transform: translatex(100vw);
        transition: all 0.4s ease;
    }

    #gallery_return {
        justify-content: flex-start;
        margin-top: 2rem;
        padding: 0 10px 2rem;
    }

    #gallery_return span {
        padding-right: 1.8rem;
    }

    .ap_gallery_container {
        width: 100%;
        min-height: 78vh;
        padding: 0 5px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .open_gallery {
        transform:translateX(0) !important;
    }

    #img_expand {
            width: 95%;
            height: auto;
            max-height: 76vh;
            z-index: 6000;
            top: 50%;
            object-fit: contain;
        }

    .ap_gallery_container img {
        width: 48vw;
        height: 48vw;
        padding: 2px;
        object-fit: cover;
    }

    /* PAGEVIEWER MOBILE */
    /* PAGEVIEWER MOBILE */
    /* PAGEVIEWER MOBILE */

    .pv-comic-heading, .pv-toolbar, .pv-chapter-btns-container, .pv-nav-btn-container, .pv_rtt, .pv-footer {
        display: none;
    }

    /* TOP TOOLBAR */

    #pgv_toptoolbar {
        box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .20), 
                    0px 2px 2px 0 rgba(0, 0, 0, .14),
                    0px 1px 5px 0 rgba(0, 0, 0, .12);
        border-radius: 0 0 3em 3em;
        border-bottom: 1px solid rgba(204, 204, 204, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1.2rem;
        position: fixed;
        top: 8vh;
        width: 100%;
        height: 8vh;
        background-color: #121212;
        z-index: 800;
    }

    #pgv_toptoolbar > div {
        display: flex;
        align-items: center;
        z-index: 800;
    }

    #pgv_toptoolbar > div span {
        font-size: 2.8rem;
        padding-right: 1rem;
        color: #ebebeb;
    }

    #pgv_toptoolbar > div h6 {
        font-size: 1.2rem;
        opacity: 75%;
        color: #ebebeb;
    }

    #pgv_toptoolbar > div h3 {
        font-size: 1.8rem;
        color: #ebebeb;
    }

    #pgv-btn {
        border-radius: 30px;
        height: 4rem;
        width: 4rem;
        background-color: #512DA8;
        color: white;
        letter-spacing: 0.1rem;
        border: none;
        transform: rotate(90deg);
    }

    #pgv-btn span {
        font-size: 3rem;
    }

    /* SCROLLING CHAPTERS */

    #pgv_chapters {
        transform: translateY(-14vh);
        position: fixed;
        top: 8vh;
        height: 80px;
        background-color: #121212;;
        box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .20), 
                    0px 2px 2px 0 rgba(0, 0, 0, .14),
                    0px 1px 5px 0 rgba(0, 0, 0, .12);
        border-radius: 0 0 3em 3em;
        border-bottom: 1px solid rgba(204, 204, 204, 0.2);
        transition: all 0.3s ease-out;
        z-index: 850;
    }

    #pgv_sticky {
        margin: 2rem 1.2rem;
        min-width: 25px;
    }

    #pgv_sticky a span {
        font-size: 2.8rem;
        color: #ebebeb;
    }

    #pgv_scroll {
        margin-top: 1rem;
    }

    #pgv_scroll a {
            min-width: 50px;
            height: 50px;
    }
    
    #pgv_scroll h2 {
        padding: 0;
        color: #ebebeb;
    }

    #pgv_btmtoolbar {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 7vh;
        padding: 5px 10px;
        display: flex;
        justify-content: space-between;
        background-color: #121212;
        box-shadow: 0px -3px 1px -2px rgba(0, 0, 0, .20), 
                    0px -2px 2px 0 rgba(0, 0, 0, .14),
                    0px -1px 5px 0 rgba(0, 0, 0, .12);
        border-radius: 3em 3em 0 0;
        border-bottom: 1px solid rgba(204, 204, 204, 0.2);
        z-index: 850;
    }

    #pgv_btmtoolbar > a {
        display: flex;
        flex-direction: column;
        color: #ebebeb;
    }

    #pgv_btmtoolbar h5 {
        font-size: 1rem;
        color: #ebebeb;
    }

    .click-nav .pv-carousel-container {
        position: relative;
        width: 70%;
        margin: 16vh auto 7vh;
        overflow: hidden;
    }

    .click-nav .pv-carousel-slide {
        display: flex;
        width: 100%;
    }

    .click-nav .pv-carousel-slide > img {
        width: 100%;
        height: auto;
    }

    .click-nav .inv-leftbtn, .click-nav .inv-rightbtn {
        position: absolute;
        height: 100%;
        background-color: transparent;
        border: none;
        z-index: 600;
    }

    .click-nav .inv-rightbtn {
        right: 0;
        width: 50%;
    }

    .click-nav .inv-leftbtn {
        left: 0;
        width: 30%;
    }

    /* scroll navigation */
    .scroll-nav .pv-carousel-container {
        position: relative;
        width: 70vw;
        margin: 16vh auto 7vh;
    }
    .scroll-nav .pv-carousel-slide > img {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .scroll-nav .inv-leftbtn, .scroll-nav .inv-rightbtn {
        display: none;
    }

    /* Range Slider */
   .click-nav .pv-range-wrap {
    position: fixed;
    bottom: 0px;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 75%;
    height: 3rem;
    z-index: 1000;
    }

    .click-nav .range {
        width: 100%;
    }

    .click-nav .pv-range-wrap .bar {
        position: absolute;
        z-index: 1;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 7px;
        border-radius: 5px;
        background-color: #c6aee7;
        overflow: hidden;
    }

    .click-nav .pv-range-wrap .bar .fill {
        display: block;
        width: 0;
        height: 100%;
        background-color: #512DA8;
    }

    .click-nav .pv-range-wrap .slider {
        position: relative;
        z-index: 2;
        appearance: none;
        width: 100%;
        height: 7px;
        border-radius: 5px;
        appearance: none;
        background-color: transparent;
    }

    .click-nav .pv-range-wrap .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        background-color: #512DA8;
        border-radius: 50%;
        cursor: pointer;
        outline: none;
        box-shadow: 0 0 0 0 rgba(98 ,0 ,238,.1);
        transition: .3s ease-in-out;
    }

    .click-nav .pv-range-wrap .slider:active::-webkit-slider-thumb {
        box-shadow: 0 0 0 15px rgba(98,0,238,.2);
    }

    .click-nav .pv-range-wrap .slider:focus {
        outline: none;
    }

    .click-nav .bubble {
        display: none;
    } 

    .click-nav .bubble::after {
        display: none;
    }

    .scroll-nav .pv-range-wrap {
        display: none;
    }
}

@media only screen and (min-width: 768px) {

    .hidden-menu-mobile, .story1-menu-mobile, .story2-menu-mobile, .most-recent-mobile, .recent-updates-mobile, .library-mobile, .firstcomic-popup, .secondcomic-popup {
        display: none;
    }

   body {
       background-color: #121212;
   }

   nav {
       width: 100%;
       display: inline-grid;
       grid-template-columns: 15% 20% 1fr repeat(2, 5%) 15%;
       grid-template-rows: 12rem;
   }

   #logo {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    display: flex;
    justify-content: start;
    align-self: center; 
    }

    #logo img {
        width: 18rem;
        height: 10rem;
    }

    #dark {
        display: none;
    }

   #logo:hover {
       cursor:pointer;
   }

   nav #burger { 
       grid-column-start: 4;
       grid-column-end: 5;
       align-self: center;
       justify-self: end;
       grid-row-start: 1;
       width: 4.3rem;
       height: 4.3rem;
       max-width: 40rem;
       max-height: 40rem;
       fill: #FCFCFC;
       transition: fill 0.3s ease;
       z-index: 900;
   }

   nav #burger:hover {
       fill:#7e57c2;
       cursor: pointer;
       transition: 0.3s ease;
   }

   #sun {
       grid-column-start: 5;
       grid-column-end: 6;
       align-self: center;
       justify-self: end;
       grid-row-start: 1;
       width: 3.5rem;
       height: 3.5rem;
       max-width: 40rem;
       max-height: 40rem;
       fill: #FCFCFC;
       transition: fill 0.3s ease;
   }

   nav #sun:hover {
       fill: #7e57c2;
       cursor: pointer;
       transition: 0.3s ease;
   }

   .burger-active {
       transform: translate(0px) !important;
   }

   .hidden-menu {
       grid-column-start: 3;
       grid-column-end: 4;
       grid-row-start: 1;
       align-self: center; 
       display: flex;
       z-index: 600;
       justify-content: flex-end;
       transform: translate(70px);
       transition: 0.3s ease-out;
   }

   .hidmenu_but {
       opacity: 0;
       pointer-events: none;
   }
   
   .visible_but{
    animation-name: butflip;
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(.41,.52,.27,.94);
    animation-fill-mode: forwards;
    pointer-events: auto;
}

@keyframes butflip{
    0% {
        transform: translateX(100px);
        opacity:0
    }
    100% {
         transform: translateX(0px);
         opacity:1;
     }
}


.burger-active .one-story .visible_but{
     animation-delay: 0.3s;
 }

   .hidden-menu button:hover {
       background-color: #3a3a3a;
       cursor: pointer;
       box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 1);
       
   }

   .hidden-menu button {
       display: flex;
       font-size: 1.4rem;
       align-items: baseline;
       justify-content: space-between;
       background-color: #292929;
       margin-right: 2.3rem;
       padding: 1rem;
       color: #FCFCFC;
       border: 1px solid #292929;
       border-radius: 0.4em;
       box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.4);
       transition: all 0.3s ease;
   }

   .hidden-menu button i {
       font-size: .8rem;
       padding-left: .8rem;
   }
   
   .menu-content {
       position: absolute;
       background-color: #2c2c2c;
       list-style: none;
       width: 12.5rem;
       max-height: 184px;
       display: flex;
       flex-direction: column;
       z-index: 9999;
       font-size: 2.2rem;
       text-align: left;
       cursor: pointer;
       overflow-y: scroll;
       opacity: 0;
       pointer-events: none;
       transform: translateY(-10px);
       transition: all 0.4s ease;
       box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
   }

   .menu-content a {
       width: 100%;
       height: 100%;
       padding: 1rem 1rem;
       font-size: 2.2rem;
   }

   .menu-content a li {
       text-decoration: none;
       font-family: 'Roboto', sans-serif;
       font-weight: normal;
       color: rgba(255, 255, 255, 0.84);
   }
   
   .hidden-menu .menu-content a:hover {
       background-color: #424242;
   }

   .fusion-comic button:focus + ul,
   .one-story button:focus + ul {
       opacity: 1;
       pointer-events: all;
       transform: translateY(0px);
   }

   .menu-content:focus-within {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0px);
   }


   /* width */
   ::-webkit-scrollbar {
       width: 7px;
   }
   
   /* Track */
   ::-webkit-scrollbar-track {
       background: #2c2c2c;
   }
   
   /* Handle */
   ::-webkit-scrollbar-thumb {
       background: rgba(151, 151, 151, 0.596);
       border-radius: 3rem;
   }
   
   /* Handle on hover */
   ::-webkit-scrollbar-thumb:hover {
       background: rgba(187, 187, 187, 0.925);
   }


   /* MOST RECENT SECTION */
   /* includes: picture background, title of comic text box, chapter number and name text box, date updated */

   .most-recent-mobile {
       display: none;
   }

   .most-recent {
       width: 70%;
       height: 28rem;
       display: inline-grid;
       grid-template-columns: 100%;
       grid-template-rows: 47.5% 35px 47.5% 5%;
       margin-bottom: 9rem;
       margin-left: 15%;
       margin-right: 15%;
   }

   
   .most-recent .title-block {
       grid-column-start: 1;
       grid-column-end: 2;
       grid-row-start: 1;
       grid-row-end: 2;
       justify-self: center;
       align-self: end;
       text-align: center;
       background-color: #E0E0E0;
       border-radius: .5em;
       padding: 10px 25px 10px;
       font-family: 'Roboto', sans-serif;
       color: #512DA8;
       font-size: 1.2rem;
       text-transform: uppercase;
       letter-spacing: .1em;
       box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
       z-index: 550;
       transition: color 0.3s ease;
   }

   .most-recent .chapter-block {
       grid-column-start: 1;
       grid-column-end: 2;
       grid-row-start: 3;
       grid-row-end: 4;
       justify-self: center;
       align-self: start;
       text-align: center;
       background-color: #E0E0E0;
       border-radius: .5em;
       padding: 7px 50px;
       font-family: 'Roboto', sans-serif;
       color: #512DA8;
       font-size: 1.8rem;
       box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
       z-index: 700;
       transition: color 0.3s ease;
   }

   .most-recent img {
       width: 100%;
       height: 100%;
       grid-column-start: 1;
       grid-column-end: 2;
       grid-row-start: 1;
       grid-row-end: 5;
       border-radius: 4em;
       z-index: 499;
       transition: all 0.5s ease;
       filter: brightness(0.70);
       object-fit: cover;
   }

   .most-recent:hover {
       cursor: pointer;
   }

   .most-recent:hover>img {
       box-shadow: 0 6px 10px rgba(0, 0, 0, 1);
       filter: brightness(0.95);
       cursor: pointer;
   }

   .most-recent:hover > h4, .most-recent:hover > h5 {
    color: #d65600;
}

   .most-recent p {
       grid-column-start: 1;
       grid-column-end: 2;
       grid-row-start: 5;
       grid-row-end: 6;
       padding-top: 7px;
       padding-left: 4px;
       font-family: 'Roboto', sans-serif;
       font-weight: lighter;
       color: #B39DDB;
       opacity: 0.75;
       font-size: 1.5rem;
       letter-spacing: .1rem;
   }


   /* RECENT UPDATES SECTION
   includes the recent updates title, 4 selections of recent chapters (image, title, chapter number and name) */

   .recent-updates-mobile {
       display: none;
   }

   .recent-updates {
       width: 70%;
       height: 21rem;
       display: inline-grid;
       grid-template-columns: 100%;
       grid-template-rows: 5rem auto;
       margin-left: 15%;
       margin-right: 15%;
       margin-bottom: 11rem;
   }

   .recent-updates h4 {
       grid-column-start: 1;
       grid-column-end: 2;
       grid-row-start: 1;
       grid-row-end: 2;
       justify-self: center;
       align-self: start;
       text-transform: uppercase;
       font-family: 'Roboto', sans-serif;
       color: #FFF;
       opacity: 0.5;
       font-size: 1.45rem;
       letter-spacing: 0.05rem;
   }

   .recent-updates .recent-select {
       grid-column-start: 1;
       grid-column-end: 2;
       grid-row-start: 2;
       grid-row-end: 3;
       display: flex;
       justify-content: center;
   }

   .recent-updates .recent-select .option {
       border: 0.13px solid rgba(255, 255, 255, 0.1);
       border-radius: 4em;
       text-align: center;
       margin: 1vw;
   }

   .recent-updates .recent-select img {
       width: 15rem;
       height: 15rem;
       border-top-left-radius: 4em;
       border-top-right-radius: 4em;
       filter: brightness(0.75);
       transition: all 0.3s ease;
   }

   .recent-updates .recent-select .option p {
       font-family: 'Roboto', sans-serif;
       font-weight: normal;
       color: rgba(255, 255, 255, 0.6);
       font-size: 1rem;
       letter-spacing: 0.08rem;
       text-transform: capitalize;
       padding-top: 0.1rem;
       transition: all 0.3s ease;
   }

   .recent-updates .recent-select .option h6 {
       font-family: 'Roboto', sans-serif;
       font-weight: normal;
       color: #B39DDB;
       font-size: 1.2rem;
       text-transform: capitalize;
       padding-bottom:0.5rem;
       transition: all 0.3s ease;
   }

   .recent-updates .recent-select .option:hover > img {
        filter: brightness(0.95);
        cursor: pointer;
    }

    .recent-updates .recent-select .option:hover > p, .recent-updates .recent-select .option:hover > h6 {
        color: #f19151;
    }

   .linebreak {
       border-bottom: 1px solid rgba(255, 255, 255, 0.05);
       margin-left: 15%;
       margin-right: 15%;
   }


   /* LIBRARY SECTION
   includes covers and small synopsis of each story */

   .library {
       display: flex;
       justify-content: center;
       height: space-around;
       transform-style: preserve-3d;
   }

   .library .container {
       position: relative;
       width: 29rem;
       height: 45rem;
       perspective: 1000px;
       overflow: hidden;
       transform-style: preserve-3d;
       margin: 2rem;
       cursor: pointer;
   }

   .library .container .cover {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       transform-origin: top;
       transform-style: preserve-3d;
       transition: 0.5s;
   }

   .library .container:hover .cover {
       transform: rotateX(-90deg);
       transition: 0.5s;
       opacity: 0;
   }

   .library .container .cover img {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: contain;
       border-radius: 4em;
       filter: brightness(0.75);
   }

   .library .container .info-content {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: #202020;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       padding: 0 1.9rem;
       transform-origin: bottom;
       transform-style: preserve-3d;
       transition: 0.5s;
       transform: rotateX(90deg);
       opacity: 0;
       font-family: 'Roboto', sans-serif;
       font-weight: normal;
       color: #FCFCFC;
       border: 0.13px solid rgba(0, 0, 0, .10);
       border-radius: 4em;
       
   }

   .library .container .info-content h2 {
       font-size: 3.4rem;
       text-align: left;
       font-weight: normal;
       padding-top: 3rem;
   }

   .library .container .info-content p {
       font-size: 2rem;
       text-align: left;
       font-weight: normal;
       color: #fcfcfcaf;
   }

   .library .container:hover .info-content {
       transform: rotateX(0deg);
       opacity: 1;
   }

   .library .container .info-content .card-footer {
       padding-bottom: 1rem;
       text-align: center;
       display: flex;
       justify-content: flex-end;
   }

   .library .container .info-content .card-footer button {
       font-size: 1.3rem;
       padding: 1.1rem;
       font-weight: normal;
       white-space: nowrap;
   }

   .library .container .info-content .card-footer .read-here:hover {
       cursor: pointer;
       box-shadow: 0px 5px 3px -2px rgba(0, 0, 0, 0.54);
       background-color: #8e6fc4;
   }

   .library .container .info-content .card-footer .next:hover {
       cursor: pointer;
       background-color: #272727;
   }

   .library .container .info-content .card-footer .next {
        font-size: 1.3rem;
        padding: 1.1rem;
        font-weight: normal;
        white-space: nowrap;
        text-decoration: none;
        padding-left: 1.4rem;
        padding-right: 1.4rem;
        font-family: 'Roboto', sans-serif;
        border-radius: .4em;
        border: 1px solid#7e57c2;
        background-color: #202020;
        color: #7e57c2;
        letter-spacing: 0.05rem;
        transition: 200ms ease;
   }

   .library .container .info-content .card-footer .read-here {

        background-color: #512DA8;
        color: white;
        font-size: 1.3rem;
        text-decoration: none;
        display: flex;
        align-items: center;
        margin-left: 1.2rem;
        border-radius: .4em;
        border: none;
        background-color: #7e57c2;
        color: black;
        font-family: 'Roboto', sans-serif;
        padding-left: 1.4rem;
        padding-right: 1.4rem;
        box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.54);
        letter-spacing: .1rem;
        transition: 200ms ease;
   }


   .library .container .info-content .card-footer .read-here .im-external-link {
       color: black;
       padding-left: .5rem;
       font-size: 1.2rem;
   }

   .library .container .info-content .card-footer .next .im-external-link {
       color: black;
       padding-left: .5rem;
       font-size: 1.2rem;
   }


   .linebreak2 {
       border-bottom: 1px solid rgba(255, 255, 255, 0.05);
       margin-left: 15%;
       margin-right: 15%;
   }


/* BOTTOM ARTIST INFORMATION CARD */
/* includes logo name, social media font icons, a little blurb about artists */
   .aboutartist {
       width: 100%;
       height: 27rem;
       display: inline-grid;
       grid-template-columns: 15% auto 15%;
       grid-template-rows: repeat(2, 30%) repeat(2, 20%);
       margin-bottom: 1.5rem;
   }

   .aboutartist .logo {
       grid-column-start: 2;
       grid-column-end: 3;
       grid-row-start: 1;
       grid-row-end: 2;
       display: flex;
       justify-content: center;
       align-self: center; 
       color: #FCFCFC;
       opacity: 0.6;
   }

   .aboutartist .logo:hover {
       cursor: pointer;
   }

   .aboutartist .logo h1 {
       font-size: 3rem;
       font-family: 'Roboto', sans-serif;
       font-weight: bold;
       padding-top: 2rem;
   }

   .aboutartist .socialmedia {
       width: 75%;
       height: 100%;
       margin: 0 auto;
       grid-column-start: 2;
       grid-column-end: 3;
       grid-row-start: 2;
       grid-row-end: 3;
       display: flex;
       justify-content: space-between;
   }

   .aboutartist .socialmedia img, .aboutartist .socialmedia i {
       width: 5rem;
       height: 5rem;
       font-size: 4rem;
       color: #FCFCFC;
       align-self: center;
       transition: transform 0.3s ease;

   }

   .aboutartist .socialmedia img:hover, .aboutartist .socialmedia i:hover {
       cursor: pointer;
       transform: rotate(20deg);
       transition: transform 0.3s ease;
   }

   .aboutartist h4 {
       grid-column-start: 2;
       grid-column-end: 3;
       grid-row-start: 3;
       grid-row-end: 4;
       justify-self: center;
       align-self: center;
       font-family: 'Roboto', sans-serif;
       font-weight: normal;
       font-size: 3rem;
       color: #7e57c2;
   }

   .aboutartist p {
       grid-column-start: 2;
       grid-column-end: 3;
       grid-row-start: 4;
       grid-row-end: 5;
       justify-self: center;
       align-self: center;
       font-family: 'Roboto', sans-serif;
       font-weight: normal;
       letter-spacing: 0.06rem;
       font-size: 1.5rem;
       text-align: center;
       padding-bottom: 3rem;
       color: #FCFCFC;
       opacity: .40;
   }


   /* FOOTER */

   .footer {
    background-color: #2c2c2c;
    box-shadow: 0px -15px 10px -15px;
       height: 9rem;
       width: 100%;
       
   }

   .footer .content {
       width: 100%;
       height: 9rem;
       display: flex;
       justify-content: space-between;
   }

   .footer button {
       align-self: center;
       padding: 1rem 1.5rem;
       font-size: 1.5rem;
       color: #FCFCFC;
       border: 1px solid #444444;
       border-radius: .8rem;
       background-color: #444444;
       box-shadow: 0px 4px 7px -2px rgba(0, 0, 0, 1);
       transition: all 0.3s ease;
   }

   .footer button:hover {
       cursor: pointer;
       box-shadow: 0px 8px 10px -2px rgba(0, 0, 0, 1);
       background-color: #8e6fc4;
       border: 1px solid #8e6fc4;
   }

   .footer .content .copyright {
       width: 20%;
       display: flex;
       padding-left: .8rem;
       padding-bottom: .8rem;
       color: white;
       align-self: flex-end;
   }

   .footer .content svg {
       fill: white;
       width: 1.5rem;
       height: 1.5rem;
       padding-right: .2rem;
   }
   
   .footer .content p {
       font-family: 'Roboto', sans-serif;
       font-weight: normal;
       font-size: 1.3rem;
       align-items: center;
   }

   .footer .content .empty {
       width: 20%;
   }

    /* PAGEVIEWER */
   /* PAGEVIEWER */
   /* PAGEVIEWER */

   #pgv_main_mobile {
       display: none;
   }

    /* Header */
    .pv-comic-heading {
        width: 100%;
        color:#F5F5F5;
        text-align: center;
        margin-bottom: 2rem;
        background-color: #202020;
        border-bottom: 1px solid rgba(0, 0, 0, .20);
        box-shadow: 0px 15px 10px -15px black;
    }

    .pv-comic-heading h1 {
        font-size: 4.5rem;
    }

    .pv-comic-heading h3 {
        font-size: 3rem;
        padding-bottom: 1rem;
        color: #8b61d3;
    }

    /* Toolbar */
    .pv-toolbar {
        display: flex;
        justify-content: space-between;
        margin: 0 15% 2rem;
    }
    .pv-toolbar button {
       position: relative;
       overflow: hidden;
       display: flex;
       font-size: 1.4rem;
       align-items: baseline;
       justify-content: space-between;
       background-color: transparent;
       padding: 1rem;
       border-radius: 0.4em;
       background-color: #292929;
       color: #FCFCFC;
       border: 1px solid #292929;
       border-radius: 0.4em;
       box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.4);
       transition: all 0.3s ease;
    }

    .pv-toolbar button i {
        font-size: .8rem;
        padding-left: .8rem;
    }
    
    .pv-toolbar .pv-chap-dropdown button {
        width: 13rem;
    }
    
    .pv-toolbar .pv-chap-dropdown button:hover {
        background-color: #3a3a3a;
        cursor: pointer;
    }

    .pv-chap-dropdown button:focus {
        outline: none;
        background-color: #3a3a3a;
    }

    .pv-toolbar .pv-chap-dropdown button:focus + ul {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0px);
    }

    .pv-toolbar #pv-btn {
        position: relative;
        border-radius: 30px;
        width: 10rem;
        justify-content: center;
        background-color: #8b61d3;
        color: white;
        letter-spacing: 0.1rem;
        transition: all 0.3s ease-out;
    }

    #pv-btn:hover {
        cursor: pointer;
        box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
        background-color: #9e6ff0;
    }

    #pv-btn:focus {
        outline: none;
    }

    .pv-toolbar .pv-menu-content {
        position: absolute;
       background-color: #292929;
       list-style: none;
       width: 13rem;
       max-height: 184px;
       display: flex;
       flex-direction: column;
       z-index: 9999;
       font-size: 2.2rem;
       text-align: left;
       cursor: pointer;
       overflow-y: scroll;
       opacity: 0;
       pointer-events: none;
       transform: translateY(-5px);
       transition: all 0.4s ease;
       box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
    }

    .pv-menu-content li {
        width: 100%;
        height: 100%;
        padding: 1rem 1rem;
        font-size: 2.2rem;
    }
 
    .pv-menu-content li a {
        text-decoration: none;
        font-family: 'Roboto', sans-serif;
        font-weight: normal;
        color: #FCFCFC;
    }
    
    .pv-menu-content li:hover {
        background-color: #424242;
    }

    /* CAROUSEL VIEWBOX */

    .click-nav .pv-carousel-container {
        position: relative;
        width: 70vw;
        margin: 0 auto 2rem;
        overflow: hidden;
    }
    
    .click-nav .pv-carousel-slide {
        display: flex;
        width: 100%;
    }
    
    .click-nav .pv-carousel-slide > img {
        width: 100%;
        height: auto;
    }

    .click-nav .inv-leftbtn, .click-nav .inv-rightbtn {
        position: absolute;
        height: 100%;
        background-color: transparent;
        border: none;
        z-index: 1000;
    }

    .click-nav .inv-rightbtn:hover, .click-nav .inv-leftbtn:hover {
        cursor: pointer;
    }

    .click-nav .inv-rightbtn:focus, .click-nav .inv-leftbtn:focus {
        cursor: pointer;
        outline: none;
    }

    .click-nav .inv-rightbtn {
        right: 0;
        width: 50%;
    }

    .click-nav .inv-leftbtn {
        left: 0;
        width: 30%;
    }

    /* scroll navigation */
    .scroll-nav .pv-carousel-container {
        position: relative;
        width: 70vw;
        margin:0 auto 2rem
    }
    .scroll-nav .pv-carousel-slide > img {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .scroll-nav .inv-leftbtn, .scroll-nav .inv-rightbtn {
        display: none;
    }

   /* Range Slider */
   .click-nav .pv-range-wrap {
        position: relative;
        margin: 7rem auto 4rem;
        width: 55%;
        height: 4rem;
    }

    .click-nav .range {
        width: 100%;
    }

    .click-nav .pv-range-wrap .bar {
        position: absolute;
        z-index: 1;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 7px;
        border-radius: 5px;
        background-color: #c6aee7;
        overflow: hidden;
    }

    .click-nav .pv-range-wrap .bar .fill {
        display: block;
        width: 0;
        height: 100%;
        background-color: #8b61d3;
    }

    .click-nav .pv-range-wrap .slider {
        position: relative;
        z-index: 2;
        appearance: none;
        width: 100%;
        height: 7px;
        border-radius: 5px;
        appearance: none;
        background-color: transparent;
    }

    .click-nav .pv-range-wrap .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 25px;
        height: 25px;
        background-color: #8b61d3;
        border-radius: 50%;
        cursor: pointer;
        outline: none;
        box-shadow: 0 0 0 0 rgba(139, 97, 211, .1);
        transition: .3s ease-in-out;
    }

    .click-nav .pv-range-wrap .slider::-webkit-slider-thumb:hover {
        box-shadow: 0 0 0 20px rgba(139, 97, 211, .25);
    }
    
    .click-nav .pv-range-wrap .slider:active::-webkit-slider-thumb {
        box-shadow: 0 0 0 30px rgba(139, 97, 211, .35);
    }
    
    .click-nav .pv-range-wrap .slider:focus {
        outline: none;
    }

    .click-nav .bubble {
        position: relative;
        background: #8b61d3;
        opacity: 75%;
        color: white;
        font-size: 2rem;
        padding: .8rem 1.2rem;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -6rem);
        border-radius: 2px;
    } 

    .click-nav .bubble::after {
        content: "";
        position: absolute;
          height: 0;
          width: 0;
          top: 38px;
          left: 9px;
          transform: rotate(180deg);
          border-width: 0 9px 9px;
          border-style: solid;
          border-color: transparent transparent #8b61d3;
      }

    .scroll-nav .pv-range-wrap {
        display: none;
    }


    /* Page Turn Btns */

    .pv-nav-btn-container {
        margin: 0 15%;
        display: flex;
        justify-content: space-between;
    }

    .click-nav #prevBtn, #nextBtn {
        position: relative;
        overflow: hidden;
        transition: background 400ms;
        color: #8b61d3;
        background-color: #121212;
        padding: 1rem 2rem;
        font-family: 'Roboto', sans-serif;
        font-size: 1.5rem;
        text-transform: uppercase;
        outline: 0;
        border: 1px solid#8b61d3;
        border-radius: 0.7rem;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3); /* black with 30% opacity */
        cursor: pointer;
        transition: all 0.2s;
    }

    .click-nav #prevBtn:hover, #nextBtn:hover {
        background-color: #202020;
        box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    }

    .scroll-nav #prevBtn, .scroll-nav #nextBtn {
        display: none;
    }

    .click-nav span.ripple {
        position: absolute;
        border-radius: 50%;
        transform: scale(0);
        animation: ripple 600ms linear;
        background-color: rgba(255, 255, 255, 0.5);
      }
      
      @keyframes ripple {
        to {
          transform: scale(4);
          opacity: 0;
          filter: blur(2px);
        }
      }

    .click-nav .pv_rtt {
        display: none;
    }

    .pv_rtt {
        position: fixed;
        bottom: 50px;
        right: 50px;
        z-index: 1000;
        opacity: 0;
        transform: translateY(100px);
        display: block;
        background-color: #8b61d3;
        color: #Fcfcfc;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        font-size: 4rem;
        padding: 1.5rem;
        line-height: 1.5rem;
        -webkit-box-shadow: 0 6px 10px 0 rgba(0,0,0,0.3), 0 6px 10px 0 rgba(0,0,0,0.3);
        transition: all 0.3s ease;
    }

    .showBtn {
        opacity: 1;
        transform: translateY(0)
    }

    .scroll-nav #pv_rtt:hover {
        box-shadow: 0 8px 15px 0 rgba(0,0,0,0.3);
        background-color: #9e6ff0;
    }

      
    /* Chapter Nav Buttons */

    .pv-chapter-btns-container {
        margin: 2rem 15% 2rem;
        display: flex;
        justify-content: center;
    }

    .pv-chapter-btns {
        font-size: 1.6rem;
        margin: 0 1rem;
        color: #F5F5F5;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 15rem;
        border: none;
        padding: 1rem;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 0.1rem;
        border-radius: 0.4rem;
        background-color: #2c2c2c;
    }

    .pv-chapter-btns:hover {
        background-color: #424242;
        cursor: pointer;
    }

    .pv-chapter-btns:focus {
        background-color: #424242;
        cursor: pointer;
        outline: none;
    }

    /* PV Footer */
    .pv-footer {
        bottom: 0;
        background-color: #2c2c2c;
        position: relative;
        height: 9rem;
        width: 100%;
        box-shadow: 0px -15px 10px -15px
    }

    .pv-icons {
        width: 100%;
        height: 9rem;
        position: absolute;
        display: flex;
        justify-content: center;
    }

    .pv-icons i {
        color: white;
        padding: 3rem 2rem;
        font-size: 3rem;
        transition: transform 0.4s ease;
    }

    .pv-icons i:hover {
        cursor: pointer;
        transform: rotate(15deg);
    }

    .pv-footer .copyright {
        color: white;
        fill: white;
        display: flex;
        float: left;
        position: absolute;
        bottom: 1rem;
        align-items: center;
    }

    .pv-footer svg {
        width: 1.5rem;
        height: 1.5rem;
        padding-right: 0.2rem;
    }

    .pv-footer .copyright p {
        font-size: 1.3rem;
    }

   /* COMIC ABOUT PAGES */
    /* COMIC ABOUT PAGES */
    /* COMIC ABOUT PAGES */

    #ap_main {
        display: block !important;
    }

    #ap_main_mobile {
        display: none;
    }

    body {
        overflow-x: hidden;
    }

    .ap_nav {
        background-color: #202020;
    }

    /* #ap_main {
        margin-bottom: 15rem;
    } */

    #ap_comic_name {
        font-size: 2.7rem;
        font-weight: bold;
        padding: 2rem 20.6rem 2.5rem;
        color: white;
        background-color: #202020;
    }

    [data-tab-content] {
        display: none;
      }
      
      .ap_activetb[data-tab-content] {
        display: block;
      }
      
      .ap_tabs {
        display: flex;
        justify-content: center;
        list-style-type: none;
        padding: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .20);
        background-color: #202020;
        box-shadow: 0px 15px 10px -15px;
      }
      
      .ap_tab {
        cursor: pointer;
        padding: 1.2rem 2.2rem;
        margin: 0 1rem;
        font-size: 1.3rem;
        font-weight: bold;
        color:#BDBDBD;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
      }
      
      .ap_tab.ap_activetb {
        color:#8b61d3;
        border-bottom: 3px solid #8b61d3;
      }
      
      .ap_tab:hover {
        background-color: #2e2e2e;
      }
      
      .ap_tab-content {
        margin: 5rem 15%;
      }

      /* Overview Content */
      /* Overview Content */
      /* Overview Content */

      #ap_main {
          display: none;
      }

      .ap_overcontent {
          width: 100%;
          display: inline-grid;
          grid-template-columns: 60% 40%;
          grid-template-rows: 8% auto 1fr;
          row-gap: 3rem;
      }

      .ap_tabtitle {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        font-size: 3rem;
        color:rgba(255, 255, 255, 0.54);
        padding: 0 0 3rem;
    }

      #ap_overpara {
          grid-column-start: 1;
          grid-column-end: 2;
          grid-row-start: 2;
          grid-row-end: 3;
          justify-self: stretch;
          font-size: 1.4rem;
          line-height: 1.6;
          padding-right: 2rem;
          color: rgba(255, 255, 255, 0.70);
      }

      #ap_overexcerpt {
          grid-column-start: 1;
          grid-column-end: 3;
          grid-row-start: 3;
          grid-row-end: 4;
          padding: 2rem 2rem;
          margin: 1rem 7rem;
          color: #8b61d3;
          background-color: #1b1b1b;
          border: 1px solid #8b61d3;
          font-size: 1.3rem;
          line-height: 1.6;
          box-shadow: -4px -4px 20px rgba(0, 0, 0, .15), 4px 4px 20px rgba(0, 0, 0, .15);
      }

      #ap_overimg {
        grid-column-start: 1;
        grid-column-start: 2;
        grid-row-start: 1;
        grid-row-end: 3;
        width: 260px;
        justify-self: end;
      }

      /* Character Content */
      /* Character Content */
      /* Character Content */


    @keyframes slideDown {
        100%{
            transform: translateY(0);
            opacity: 1;
        }
    }

    .ap_characters_main {
        width: 100%;
        display: inline-grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        justify-items: center;
        align-items: center;
        row-gap: 3rem;
        resize: inherit;
    }

    .ap_characters_main .ap_character {
        border-radius: 4em;
          background-color: #1b1b1b;
          border: 0.13px solid #2b2b2b;
          cursor: pointer;
          transition: box-shadow 0.2s ease-out;
    }

    .ap_characters_main .ap_character img {
        border-top-left-radius: 4em;
        border-top-right-radius: 4em;
    }

    .ap_characters_main .ap_character h2 {
        font-size: 1.2rem;
          color: rgba(255, 255, 255, 0.70);
          padding: 1rem 0;
          text-align: center;
    }

    .card-content {
        padding: 100px 25px 25px;
        overflow: auto;
        height: 100%;
        color: #fff;
        cursor: default;
    }
    .card-content > * {
        transform: translateY(-35px);
        opacity: 0;
    }
    .ap_characters_main .card-content h2 {
        font-size: 4rem;
        text-align: left;
        margin-bottom: 35px !important;
        animation: slideDown 0.5s ease-out forwards;
    }
    .card-content img {
        width: 100%;
        background-color: #fff;
        margin-bottom: 10px;
        animation: slideDown 0.5s ease-out 0.2s forwards;
    }

      .ap_characterstb img {
        width: 250px;
        height: 250px ;
        border-top-left-radius: 4em;
        border-top-right-radius: 4em;

      }

      #ap_characterstb h5 {
          font-size: 1.2rem;
          color: #8b61d3;
          padding: 1rem 0;
          text-align: center;
      }

      .ap_character {
          border-radius: 4em;
          background-color: #9E9E9E;
          border: 0.13px solid rgba(0, 0, 0, .10);
          cursor: pointer;
      }

      .ap_activeChara > h2 {
        transition: color 0.1s ease-out;
      }

      .ap_activeChara:hover > h2 {
          color: white;
      }

      .ap_character.ap_unknownChara {
          filter: brightness(25%);
          cursor: default;
      }

      .ap_unknownChara:hover {
          box-shadow: none;
      }

      .ap_chara_infosheet img {
        width: 150px;
        height: 150px;
        border-radius: 4em;
      }

      .ap_ismodal {
          position: absolute;
          width: 150px;
          height: auto;
          opacity: 1;
          pointer-events: none;
      }

      .ap_ismodal p, .ap_ismodal i {
          opacity: 0;
      }

      .ap_ismodal img {
          height: 150px;
          width: 150px;
      }

      .ap_modalActive {
          position: fixed;
          margin: 0 0 0 0;
          width: 680px;
          height: 600px;
          z-index: 1111;
          opacity: 1;
          pointer-events: all;
          animation-name: modalExpand;
          animation-duration: 1.5s;
          animation-fill-mode: forwards;
      }

      .ap_modalActive img {
          width: 680px;
          height: 530px;
      }

      @keyframes modalExpand {
          0% {
              width: 150px;
              height: 150px;
          }

          100% {
              width: 680px;
              height: 600px;
          }
      }

      /* GALLERY */
      /* GALLERY */
      /* GALLERY */

    .ap_galleryWrapper{
        display:grid;
        grid-template-columns: repeat(6,1fr);
        grid-auto-rows:100px 300px;
        grid-gap:10px;
        grid-auto-flow: dense;
    }
    
    .ap_galleryItem{
        width:100%;
        height:100%;
        position:relative;
    }
    
    .ap_galleryItem .image{
        width:100%;
        height:100%;
        overflow:hidden;
    }
    
    .ap_galleryItem .image img{
        width:100%;
        height:100%;
        object-fit: cover;
        object-position:50% 50%;
        cursor:default;
        transition:.5s ease-in-out;
    }
    .w-1{
        grid-column: span 1;
    }
    .w-2{
        grid-column: span 2;
    }
    .w-3{
        grid-column: span 3;
    }
    .w-4{
        grid-column: span 4;
    }
    .w-5{
        grid-column: span 5;
    }
    .w-6{
        grid-column: span 6;
    }
    
    .h-1{
        grid-row: span 1;
    }
    .h-2{
        grid-row: span 2;
    }
    .h-3{
        grid-row: span 3;
    }
    .h-4{
        grid-row: span 4;
    }
    .h-5{
        grid-row: span 5;
    }
    .h-6{
        grid-row: span 6;
    }

      /* FOOTER */
      /* FOOTER */
      /* FOOTER */

    .ap_footer {
        display: flex;
        z-index: 11111;
        justify-content: space-between;
        position: fixed;
        bottom: 0px;
        width: 100%;
        height: 12rem;
        background-color: #2c2c2c;
        box-shadow: 0px -15px 10px -15px
    }

    .ap_footcopyright {
        width: 15%;
        display: flex;
        flex: 1 1 auto;
        align-self: flex-end;
        align-items: baseline;
        font-size: 1.5rem;
        align-items: center;
        color: white;
        fill: white;
        padding: 0 1rem 1rem;
    }

    .ap_footcopyright svg {
        width: 1.5rem;
       height: 1.5rem;
       padding-right: .2rem;
    }

    .ap_footertag {
        flex: 2 1 auto;
        align-self: center;
        text-align: center;
        font-size: 1.6rem;
        color: white;
    }

    .ap_footerbtns {
        display: flex;
        justify-content: center;
        padding-top: 1rem;
    }

    .ap_footerbtns button {
        margin: 0.8rem;
        padding: 1rem;
        transition: all 0.3s ease;
        background-color: #444444;
        color: #FCFCFC;
    }
    
    .ap_footicon {
        flex: 1 1 auto;
    }

    #ap_footbeg, #ap_footlat {
        font-size: 1.3rem;
        width: 11rem;
        border-radius: 1.5rem;
        border: 1px solid #444444;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, .15);
    }

    #ap_footbeg:hover, #ap_footlat:hover, #ap_footchpt:hover {
        background-color: #585858;
        cursor: pointer;
        border: 1px solid #444444;
        box-shadow: 0px 5px 13px rgba(0, 0, 0, .25);
    }

    #ap_footbeg:focus, #ap_footlat:focus, #ap_footchpt:focus {
        outline: none;
    }

    #ap_footchpt {
        width: 13rem;
        display: flex;
        font-size: 1.3rem;
        align-items: baseline;
        justify-content: space-between;
        box-shadow: 0px 4px 1px rgba(0, 0, 0, .25);
        border: 1px solid #292929;
    }

    #ap_footchpt i {
        font-size: .8rem;
    }

    .ap_footicon {
        width: 15%;
        flex: 1 1 auto;
        display: flex;
        color: white;
        font-size: 3rem;
        cursor: pointer;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .ap_footicon i {
        padding: 0.9rem;
        transition: transform 0.3s ease;
    }

    .ap_footicon i:hover {
        transform: rotate(20deg);
    }

    .ap_footchap_menu {
        opacity: 0;
        background-color: #444444;
        position: absolute;
        width: 12.7rem;
        max-height: 166px;
        display: flex;
        flex-direction: column;
        z-index: 9999;
        text-align: left;
        cursor: pointer;
        overflow-y: scroll;
        pointer-events: none;
        transition: all 0.4s ease;
        bottom: 63px;
        transform: translateX(9px) translateY(10px);
        box-shadow: 0px -8px 10px 1px rgba(0, 0, 0, 0.14), 0px -3px 10px 1px rgba(0, 0, 0, 0.12);
    }

    .ap_footchap_menu li {
        width: 100%;
        height: 100%;
        padding: 1rem 1rem;
        font-size: 2.2rem
    }

    .ap_footchap_menu li a {
        text-decoration: none;
        font-weight: normal;
        color: white;
    }

    .ap_footchap_menu li:hover {
        background-color: #585858;
    }
 
    #ap_footchpt:focus + ul {
        opacity: 1;
        pointer-events: all;
        transform: translateX(9px) translateY(0px);
    }
}


@media only screen and (min-width: 992px) {
    nav{
        grid-template-columns: 15vw 20% 1fr repeat(2, 4%) 15vw;
    }

   #logo {
       grid-column-end: 5;
   }

   #burger {
       width: 3.5rem;
       height: 3.5rem;
   }

   #sun {
    width: 3.5rem;
    height: 3.5rem;
}


   /* MOST RECENT SECTION */
   /* includes: picture background, title of comic text box, chapter number and name text box, date updated */

   .most-recent {
       height: 34rem;
       margin-bottom: 11rem;
   }

   .most-recent .title-block {
       font-size: 1.6rem;
   }

   .most-recent .chapter-block {
       font-size: 2.3rem;
   }

   .most-recent img {
       border-radius: 10em;
   }

   .most-recent .overlay {
       border-radius: 10em;
   }

   .most-recent p {
       font-size: 1.6rem;
   }


   /* RECENT UPDATES SECTION
   includes the recent updates title, 4 selections of recent chapters (image, title, chapter number and name) */

   .recent-updates {
       height: 26rem;
       grid-template-rows: 6rem auto;
       margin-bottom: 9rem;
   }

   .recent-updates h4 {
       font-size: 1.9rem;
   }

   .recent-updates .recent-select img {
       border-radius: 50em;
       width: 18rem;
       height: 18rem;

   }

   .recent-updates .recent-select .option p {
       font-size: 1.2rem;
   }

   .recent-updates .recent-select .option h6 {
       font-size: 1.5rem;
   }

   .recent-updates .overlay div {
       width: 18.1rem;
       height: 18.1rem;
       margin: 1.01rem;
   }

     /* LIBRARY SECTION
   includes covers and small synopsis of each story */


   .library .container {
       width: 35rem;
       height: 55rem;
       margin: 3rem;
   }

   .library .container .info-content h2 {
       font-size: 4.3rem;
   }

   .library .container .info-content p {
       font-size: 2rem;
   }

   .library .container .info-content .card-footer button {
       font-size: 1.5rem;
   }
}


@media only screen and (min-width: 1200px) {
   nav {
        grid-template-columns: 15vw 20% 1fr repeat(2, 4%) 15vw;
   }

   /* MOST RECENT SECTION */
   /* includes: picture background, title of comic text box, chapter number and name text box, date updated */

   .most-recent {
       height: 36rem;
   }

   .most-recent .title-block {
       font-size: 1.7rem;
   }

   .most-recent .chapter-block {
       font-size: 2.5rem;
   }

   /* RECENT UPDATES SECTION
   includes the recent updates title, 4 selections of recent chapters (image, title, chapter number and name) */

   .recent-updates {
       height: 32rem;
       margin-bottom: 10rem;
   }

   .recent-updates h4 {
       font-size: 2rem;
   }

   .recent-updates .recent-select img {
       width: 20rem;
       height: 20rem;
   }

   .recent-updates .recent-select .option {
       margin: 1rem;
   }

   .recent-updates .recent-select .option p {
       object-fit: cover;
       font-size: 1.3rem;
       padding-top: 0.8rem;
       
   }

   .recent-updates .recent-select .option h6 {
       font-size: 1.7rem;
   }

   .recent-updates .overlay div {
       width: 20rem;
       height: 20rem;
       margin: 1.1rem;
   }

    /* LIBRARY SECTION
   includes covers and small synopsis of each story */

   .library .container {
       width: 40rem;
       height: 60rem;
       margin: 4rem;
   }

   .library .container .info-content h2 {
       font-weight: bold;
       padding-top: 4rem;
   }

   .library .container .info-content p {
       font-size: 2.4rem;
   }

   .library .container .info-content .card-footer button {
       font-size: 1.6rem;
   }
}


@media only screen and (min-width: 1400px) {
   nav {
        grid-template-columns: 15vw 20% 1fr repeat(2, 4%) 15vw;
   }

   /* MOST RECENT SECTION */
   /* includes: picture background, title of comic text box, chapter number and name text box, date updated */

   .most-recent {
       height: 42rem;
   }

   .most-recent p {
       font-size: 1.7rem;
   }

   /* RECENT UPDATES SECTION
   includes the recent updates title, 4 selections of recent chapters (image, title, chapter number and name) */

   .recent-updates {
       height: 38rem;
       grid-template-rows: 8rem auto;
   }

   .recent-updates .recent-select img {
       width: 23.5rem;
       height: 23.5rem;
   }

   .recent-updates .recent-select .option p {
       font-size: 1.5rem;
   }

   .recent-updates .recent-select .option h6 {
       font-size: 1.9rem;
       padding-bottom:0.1vw;
   }

   .recent-updates .overlay div {
       width: 23.5rem;
       height: 23.5rem;
       margin: 1.1rem;
   }

    /* LIBRARY SECTION
   includes covers and small synopsis of each story */

   .library .container {
       width: 45rem;
       height: 65rem;
       margin: 5rem;
   }

   .library .container .info-content h2 {
       font-size: 5rem;
       padding-top: 6rem;
   }

   .library .container .info-content .card-footer button {
       font-size: 1.8rem;
   }
}