/* -------------- Body & Grid Layout ---------*/
body {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 75px 250px 75px 500px 75px 500px 75px 500px 
    75px 500px 75px 500px 75px 500px 75px 500px 75px 500px 75px 
    500px 75px 500px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

/* ------------ Navigation Bar Start------------ */

@font-face {
        font-family: Coco;
        src: url('LEMONMILK-RegularItalic.otf');
    }

#zoom1 {
    font-family: Coco;
}

.zoom {
    color: white;
}

.sections {
    background-image: linear-gradient(#161719, #000000)
}

#section {
    grid-column-start: 1;
    grid-column-end: 1;
}

#section1 {
    grid-column-start: 2;
    grid-column-end: 3;
}

#headtxt {
    text-align: center;
}

#section2 {
    grid-column-start: 3;
    grid-column-end: 4;
}

#section3 {
    grid-column-start: 4;
    grid-column-end: 5;
}

#section4 {
    grid-column-start: 5;
    grid-column-end: 6;
}

.sections {
    font-family: Arial, Helvetica, sans-serif;
    text-decoration-color: black;
}

.zoom:hover {
  font-size: 18px;
  text-decoration: underline;
}

#dofla {
    position: fixed;
    left: 20px;
    margin-top: -14px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    animation-name: mingo;
    animation-duration: 10s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes mingo{
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}
/* ------------ Navigation Bar End------------ */

/* ------------ Navigation Anchored Link Start------------ */
a {
    text-decoration: none;
    color: white;
}

.link {
    color: white;
}

.visited {
    color: white;
}

/* ------------ Heading ------------ */
    @font-face {
        font-family: Candy Beans;
        src: url('Coco-Sharp-Bold-trial.ttf');
    }

#mt-heading {
    font-family: Candy Beans;
    text-align: center;
    font-size: 40px;
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 3;
}

/* ------------ Font Heading Style/Size ------------ */

@font-face {
    font-family: Bebas;
    src: url('Bebas-Regular.ttf');
}

.front-text {
    font-family: Bebas;
    font-size: 50px;
}

/* ------------ 10th on the List ------------ */

#tenth {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 3;
}

#overview {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 4;
}

/* ------------ 9th on the List ------------ */

#ninth {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 5;
}

#overview2 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 6;
}

/* ------------ 8th on the List ------------ */

#eigth {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 7;
}

#overview3 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 8;
}

/* ------------ 7th on the List ------------ */

#seventh {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 9;
}

#overview4 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 10;

}

/* ------------ 6th on the List ------------ */

#sixth {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 11;
}

#overview5 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 12;
}

/* ------------ 5th on the List ------------ */

#fifth {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 13;
}

#overview6 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 14;
}

/* ------------ 4th on the List ------------ */

#fourth {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 15;
}

#overview7 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 16;
}

/* ------------ 3rd on the List ------------ */

#third {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 17;
}

#overview8 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 18;
}

/* ------------ 2nd on the List ------------ */

#second {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 19;
}

#overview9 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 20;
}

/* ------------ 1st on the List ------------ */

#first {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 21;
}

#overview10 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 22;
}

/* ------------ Dividers ------------ */

#divider10 {
    border-left: 2px solid black;
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 5;
    margin-bottom: 65px;
}

#divider9 {
    border-left: 2px solid black;
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 5;
    grid-row-end: 7;
    margin-bottom: 65px;
}

#divider8 {
    border-left: 2px solid black;
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 7;
    grid-row-end: 9;
    margin-bottom: 65px;
}

#divider7 {
    border-left: 2px solid black;
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 9;
    grid-row-end: 11;
    margin-bottom: 65px;
}

#divider6 {
    border-left: 2px solid black;
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 11;
    grid-row-end: 13;
    margin-bottom: 65px;
}

#divider5 {
    border-left: 2px solid black;
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 13;
    grid-row-end: 15;
    margin-bottom: 65px;
}

#divider4 {
    border-left: 2px solid black;
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 15;
    grid-row-end: 17;
    margin-bottom: 65px;
}

#divider3 {
    border-left: 2px solid black;
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 17;
    grid-row-end: 19;
    margin-bottom: 65px;
}

#divider2 {
    border-left: 2px solid black;
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 19;
    grid-row-end: 21;
    margin-bottom: 65px;
}

#divider1 {
    border-left: 2px solid black;
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 21;
    grid-row-end: 23;
    margin-bottom: 65px;
}

/* ------------ Character Description ------------ */

.char-text {
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 5px;
}

#char10 {
    margin-left: 50px;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 4;

}

#char9 {
    margin-left: 50px;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 6;

}

#char8 {
    margin-left: 50px;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 8;

}

#char7 {
    margin-left: 50px;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 10;

}

#char6 {
    margin-left: 50px;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 12;

}

#char5 {
    margin-left: 50px;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 14;

}

#char4 {
    margin-left: 50px;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 16;

}

#char3 {
    margin-left: 50px;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 18;

}

#char2 {
    margin-left: 50px;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 20;

}

#char1 {
    margin-left: 50px;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 22;

}