/* Main Page */
.dayBody {
    background-color: #190751;
    background-image: url("../images/index-bg.png");
    background-attachment: fixed;
    font-family: "Jersey 15", sans-serif;
}

.jersey-15-regular {
  font-family: "Jersey 15", sans-serif;
  font-weight: 400;
  font-style: normal;
}




/* Buttons */
.daybreakCurrent {
        background-color: #190751;
        color: lightgray;
        width: 100%;
        font-family: "Jersey 15", sans-serif;
        font-size: 25px;
        border: none;
        margin: auto;
        margin-bottom: 2px;
        padding: 5px;
    }
    .daybreakCurrent:hover {
        background-color: #190751;
        cursor: default;
    }
    .daybreakCurrent:active {
        background-color: #190751;
        cursor: default;
    }

.daybreakInactive {
        background-color: black;
        color: white;
        width: 100%;
        font-family: "Jersey 15", sans-serif;
        font-size: 25px;
        border: none;
        margin: auto;
        margin-bottom: 2px;
        padding: 5px;
    }
    .daybreakInactive:hover {
        background-color: #190751;
        cursor: pointer;
    }
    .daybreakInactive:active {
        background-color: #29136c;
        cursor: pointer;
    }







.dayContainer {
    display: grid;
    grid-template-areas:
        "content header"
        "content nav"
        "footer footer";
    grid-template-columns: 85% 15%;
    width: 1800px;
    height: 1000px;
    margin: auto;
    margin-top: 40px;
}

    .dayHeader {
        grid-area: header;
        background-color: black;
        color: white;
        height: 100px;
    }
            .dayHeader h1 {
                font-size: 70px;
                text-align: center;
                margin-top: 10px;
                margin-bottom: 0px;
            }

    .dayNav {
        grid-area: nav;
        background-color: #4b22c3;
        color: white;
        height: 800px;
        padding-top: 10px;
    }
            .dayNav button {
                background-color: black;
                color: white;
                font-family: "Jersey 15", sans-serif;
                font-size: 25px;
                height: 44px;
                width: 250px;
                border: none;
                margin-left: 10px;
                margin-right: 10px;
                margin-bottom: 5px;
                padding: 5px;
            }
            .dayNav button:hover {
                background-color: #190751;
                cursor: pointer;
            }
            .dayNav button:active {
                background-color: #29136c;
                cursor: pointer;
            }
            .dayNav hr {
                border: 20px solid black;
                width: 230px;
                }

    .dayContent {
        grid-area: content;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        height: 910px;
    }

    .dayFooter {
        grid-area: footer;
        background-color: black;
        color: white;
        height: 100px;
    }



/* About Daybreak */

.abDayContainer {
    display: grid;
    grid-template-areas:
        "header header"
        "nav content"
        "footer footer";
    grid-template-columns: 25% 75%;
    grid-template-rows: 15% 70% 15%;
    width: 1000px;
    height: 1000px;
    margin-top: 10px;
}

        .abDayHeader {
            grid-area: header;
            background-color: black;
            color: white;
        }
                .abDayHeader h1 {
                    font-size: 70px;
                    text-align: center;
                    margin-top: 10px;
                    margin-bottom: 0px;
                }
        .abDayNav {
            grid-area: nav;
            background-color: #4b22c3;
            color: white;
            padding-top: 10px;
        }
                .abDayNav hr {
                    border: 30px solid black;
                    }
        .abDayContent {
            grid-area: content;
            background-color: rgba(0, 0, 0, 0.85);
            color: white;
        }

        .abDayFooter {
            grid-area: footer;
            background-color: black;
            color: white;
        }





/* Daybreak Characters */

.charDayContainer {
    display: grid;
    grid-template-areas:
        "header header"
        "nav content"
        "footer footer";
    grid-template-columns: 25% 75%;
    grid-template-rows: 15% 70% 15%;
    width: 1000px;
    height: 1000px;
    margin-top: 10px;
}

        .charDayHeader {
            grid-area: header;
            background-color: black;
            color: white;
        }
                .charDayHeader h1 {
                    font-size: 70px;
                    text-align: center;
                    margin-top: 10px;
                    margin-bottom: 0px;
                }
        .charDayNav {
            grid-area: nav;
            background-color: #4b22c3;
            color: white;
            padding-top: 10px;
        }
                .charDayNav hr {
                    border: 30px solid black;
                    }
        .charDayContent {
            grid-area: content;
            background-color: rgba(0, 0, 0, 0.85);
            color: white;
        }

        .charDayFooter {
            grid-area: footer;
            background-color: black;
            color: white;
        }




/* Daybreak Concepts*/

.conDayContainer {
    display: grid;
    grid-template-areas:
        "header header"
        "nav content"
        "footer footer";
    grid-template-columns: 25% 75%;
    grid-template-rows: 15% 70% 15%;
    width: 1000px;
    height: 1000px;
    margin-top: 10px;
}

        .conDayHeader {
            grid-area: header;
            background-color: black;
            color: white;
        }
                .conDayHeader h1 {
                    font-size: 70px;
                    text-align: center;
                    margin-top: 10px;
                    margin-bottom: 0px;
                }
        .conDayNav {
            grid-area: nav;
            background-color: #4b22c3;
            color: white;
            padding-top: 10px;
        }
                .conDayNav hr {
                    border: 30px solid black;
                    }
        .conDayContent {
            grid-area: content;
            background-color: rgba(0, 0, 0, 0.85);
            color: white;
        }

        .conDayFooter {
            grid-area: footer;
            background-color: black;
            color: white;
        }