* {
    /* border: 1px solid red; */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
    display: none;
}

body {
    /* background-color: #fee8b2; */
    font-family: 'Open Sans', sans-serif;

    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* GRID */

.grid {
    display: grid;
}

.grid-main {
    grid-template-columns: 4fr 1fr;
}

.grid-chapters {
    grid-template-columns: 2rem 3rem;
}

.grid-hq {
    grid-template-columns: repeat(auto-fill, 5%);
    row-gap: 3rem;
}

/* HQ */

#hq {
    overflow: auto;
    height: 100vh;
    box-sizing: border-box;
    /* background: linear-gradient(#f4f4f4, #d7d7d7); */
    text-align: center;
}

.pg_yellow {
    background: linear-gradient(rgba(255, 242, 211, 0.6), rgba(177, 140, 55, 0.6));
}

.pg_green {
    background: linear-gradient(rgba(229, 255, 207, 0.6), rgba(93, 146, 53, 0.6));
}

.pg_cyan {
    background: linear-gradient(rgba(217, 247, 247, 0.6), rgba(42, 161, 162, 0.6));
}

.pg_orange {
    background: linear-gradient(rgba(248, 212, 190, 0.6), rgba(199, 82, 15, 0.6));
}

.pg_red {
    background: linear-gradient(rgba(251, 235, 234, 1), rgba(177, 92, 89, 1));
}

.pg_grey {
    background: linear-gradient(rgba(222, 222, 222, 0.6), rgba(112, 112, 112, 0.6));
}

.pg_blue {
    background: linear-gradient(rgba(220, 223, 244, 0.6), rgba(9, 34, 200, 0.6));
}

.pg_pink {
    background: linear-gradient(rgba(255, 207, 239, 0.6), rgba(164, 80, 124, 0.6));
}

.pg_purple {
    background: linear-gradient(rgba(236, 217, 255, 0.6), rgba(77, 39, 116, 0.6));
}

/* #hq img {
    width: 100%;
} */

/* SIDEBAR */

#sidebar {
    height: 100vh;
    padding: 1rem;
    box-sizing: border-box;
    color: #fff;
    background-color: #283886;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        'header'
        'main'
        'footer';
}

/* NAVIGATION */

nav {
    text-align: center;
}

.nav-logo {
    width: 100%;
}

.mainNavigation {
    display: grid;
    grid-template-columns: repeat(auto-fill, 20%);
}

.mainNavigation img {
    place-self: center;
}

/* CHAPTER W THUMBNAIL */

#chapters {
    padding: 0 1rem;
}

.chapter:hover .pages,
.chapter:hover .pages_blank {
    display: block;
}

.chapter:not(:first-child) {
    margin-top: 1rem;
}

.chapter .chapter__img {
    width: 16%;
    display: inline-block;
    vertical-align: top;
    margin-right: 1rem;
}

.chapter .chapter__img img {
    width: 100%;
    border-radius: .5rem;
}

.chapter .chapter__details {
    display: inline-block;
    width: 75%;
}

.chapter .chapter__details .chapter__details__number {
    text-transform: uppercase;
    font-size: .8rem;
    margin-bottom: .3rem;
    opacity: .6;
}

.chapter .chapter__details .chapter__details__title {
    font-size: 1rem;
}

/* PAGES */

.pages_blank {
    font-size: .8rem;
    letter-spacing: .02rem;
    color: rgba(255, 255, 255, .8);
    background-color: rgba(255, 255, 255, .15);
    padding: 1rem;
    border-radius: .4rem;
    margin-top: .6rem;
    display: none;
}

.pages {
    background-color: rgba(255, 255, 255, .15);
    padding: 1rem;
    border-radius: .4rem;
    margin-top: .6rem;
    display: none;
}

.pages__title {
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .08rem;
}

.pages__nav {
    margin-top: .8rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}

.pages__nav img {
    width: 100%;
    background-color: rgba(255, 255, 255, .15);
    border-radius: .6rem;
    transition: all 500ms;
}

.pages__nav img:not(:hover) {
    opacity: .6;
}

/* CH 00 - PG 01 */
/* #hq {
    background-image: url('../img/storyboard.png');
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center -70rem;
} */

/* #hq {
    background-image: url('../img/chapters/ch00/storyboard.png');
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center -51rem;
} */

.fstFrame {
    /* display: block; */
    background-color: #00115A;
    /* margin: 0 auto; */
    /* grid-column: 1; */
}

.fr_00 {
    /* height: 100vh; */
    grid-column: 1 / 25;
    z-index: 1;
}

/* frame space */

.space {
    grid-column: 1 / 25;
    height: 4rem;
}

/* frame animation */

.frame {
    opacity: 0;
    transition: 1s;
    /* display: block; */
}

.frame {
    opacity: 0;
    transition: 1s;
    /* display: block; */
}

.fade-in {
    opacity: 1;
}