/* Custom Styles for Dark Mode, Menu, and Marquee */

.dark-mode { background-color: black; color: white; }
.dark-mode a { background-color: black; outline: none; text-decoration: none; color: white; }
.dark-mode iframe { background-color: white; outline: none; text-decoration: none; }
.dark-mode p { text-decoration: none; background-color: black; color: white; text-align: justify; }
.dark-mode .row1 { background-color: black; color: white; }
.dark-mode .row3 { background-color: black; color: white; }

/* ================= MENU FORMATTING ================= */
#menu {
    text-align: left;
    top: 0px;
    margin-left: 10px;
    position: absolute;
    z-index: 100;
}
#menu ul { padding: 0; margin: 0; }
#menu li {
    position: relative;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu li a {
    width: 96px;
    height: 30px;
    display: block;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
    background-color: #F9f9f9;
    color: #06213f;
}
#menu li a:hover {
    width: 146px;
    height: 30px;
    background: #640000;
    color: #FFFfff;
}
#menu ul ul {
    position: absolute;
    top: 30px;
    visibility: hidden;
}
#menu ul li:hover ul { visibility: visible; }
#menu ul li:hover li a { width: 170px; }
/* =================================================== */

.style2 { color: #000000; }
.style4 { float: left; width: 113px; text-align: center; height: 87px; }
.style7 { color: #800000; }
.style8 { font-size: 9px; text-align: center; }
.style9 { height: 9px; }
.style10 { font-size: 26px; color: #FFFFFF; }

.marquee { width: 900px; margin: 0 auto; white-space: nowrap; overflow: hidden; box-sizing: border-box; }
.marquee span { display: inline-block; padding-left: 0%; animation: marquee 30s linear infinite; }
.marquee span:hover { animation-play-state: paused }

@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}