/* general */
html {
    font-family: 'Bahnschrift', Arial, sans-serif;
}
body {
    margin: 0;
}
a {
    color: #008127;
    text-decoration: none;
    transition-duration: 200ms;
}
a:visited {
    color: #03564b;
}
a:hover {
    text-decoration: underline;
    transition-duration: 200ms;
}
/* top banner */
.mainbanner {
    background-color: #0f77e2;
    background-image: linear-gradient(to right, #0f77e2, #0413ba);
    text-align: center;
    color: #efefef;
    overflow-x: hidden;
}
.mainbanner-text {
    padding: 0px;
    margin: 10px;
}
.mainbanner-text h1,.mainbanner-text h2,.mainbanner-text p {
    margin: 5px;
}
.mainbanner-img {
    height: 250px;
}
/* top bar thing */
.topbar {
    display: flex;
    position: sticky;
    top: 0;
    background-color: #cbcbcb;
    text-align: left;
    font-size: 15px;
}
.topbar-stack {
    display: flex;
    flex-direction: column;
    padding-top: 5px;
    padding-bottom: 5px;
}
.topbar-img {
    height: 36px;
    padding: 5px;
}
/* flexbox main box */
.flexmain {
    display: flex;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 20px;
    padding: 0;
    flex-direction: row;
}
/* left content box */
.leftbox {
    border-right: 5px solid #0413ba;
    width: 20vw;
    margin-left: 10px;
    padding-left: 0;
    box-sizing: border-box;
}
/* right content box */
.rightbox {
    padding-left: 30px;
    padding-right: 10px;    
}
.content {
    color: #00166e;
    text-decoration: double;
    transition-duration: 200ms;
}
/* search section */
.searchflex {
    display: flex;
    align-items: center;
}
#searchbar {
    border: 0;
    width: 75vw;
    max-width: 300px;
    height: 25px;
}
.search-btn {
    background-color: #00a408;
    color: #efefef;
    text-align: center;
    font-size: 18px;
    padding: 5px;
    transition-duration: 400ms;
    transition-delay: 100ms;
}
.search-btn:hover {
    background-color: #03603b;
    padding: 3px;
    font-size: 16px;
    transition-duration: 400ms;
}
.search-img {
    box-sizing: border-box;
    height: 15px;
    width: auto;
    padding-right: 5px;
    transform: translateY(1px);
}
/* form stuff */
#regform {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    justify-self: center;
    align-items: center;
    flex-direction: column;
}
.form-input {
    font-size: 20px;
    margin: 5px;
    padding: 5px;
}
[required]::after {
    content: "* (required)";
    color: red;
    font-style: italic;
    font-size: 15px;
}
#loading {
    height: 48px;
    display: none;
    justify-self: center;
}
.signature {
    display: flex;
    align-items: center;
    gap: 5px;
}
.signature .topbar-stack p {
    margin-top: 3px;
    margin-bottom: 3px;
}
/* footer */
footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
    background-color: #1a1448;
    color: #efefef;
    padding: 10px;
    justify-content: space-around;
    box-sizing: border-box;
}
footer div {
    max-width: 33%;
}
footer h1 {
    margin: 5px;
}
footer h2 {
    border-left: 3px solid #74c7ff;
    border-bottom: 3px solid #74c7ff;
    padding-left: 5px;
    transition-duration: 400ms;
    transition-delay: 200ms;
}
footer h2:hover {
    transform: translateY(-10px);
    transition-duration: 400ms;
}
footer h3.titlePS {
    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 0;
    transition-duration: 400ms;
    transition-delay: 200ms;
    color: #666666;
    font-size: 20px;
}
footer h3.titlePS:hover {
    transform: translateY(-5px);
    color: #efefef;
    font-size: 25px;
}
footer a {
    color: #31e163;
}
footer a:visited {
    color: #026b4a;
}
/* div under footer */
.underfooter {
    text-align: center;
    background-color: #1a1448;
    margin: 0;
    font-size: 14px;
    color: #efefef;
    padding: 2px;
}
.underfooter p {
    margin: 5px;
    transition-duration: 400ms;
    transition-delay: 200ms;
}
.underfooter p:hover {
    transform: translateY(-5px);
    transition-duration: 400ms;
}
/* miscellaneous */
.centerthecontent {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-top: 10px;
}
/* mobile compatibility */
@media screen and (width <= 600px) {
    /* mainbanner */
    .mainbanner-img {
        height: 150px;
    }
    /* content box */
    .leftbox {
        width: 100%;
        border: 5px solid #0413ba;
        overflow-x: hidden;
        text-align: center;
        margin-left: 0;
    }
    .flexmain {
        flex-direction: column;
    }
    .rightbox {
        padding: 10px;
    }
    /* search section */
    .searchflex {
        flex-direction: column;
    }
    /* footers */
    footer {
        flex-direction: column;
    }
    footer div {
        max-width: 100%;
    }
}