@font-face {
    font-family: Lato-Regular;
    src: url("/fonts/Lato/Lato-Regular.ttf?ts=");
    }

@font-face {
    font-family: Lato-Bold;
    src: url("/fonts/Lato/Lato-Bold.ttf?ts=");
    }

@media screen and (min-width: 701px) {
    html { font-size: 16px; }
    .mobile_width {
        width: 40%;
    }
}

@media screen and (max-width: 700px) {
    html { font-size: 16px; }

    main { margin: 0 10px; }

    nav > #menu1 {
        flex-direction: column;
        gap: 32px;
        }

    nav > #menu2 {
        flex-direction: column;
        gap: 32px;
        }

    .mobile_no_display {
        display: none;
    }

    .mobile_flex_column {
        flex-direction: column;
    }

    .mobile_width {
        width: 95%;
    }

}

.rwd_cnt {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Lato-Regular";
    font-size: 1em;
    }

a:link, a:visited {
    text-decoration: none;
    }

p {
    text-align: justify;
    text-indent: 32px;
}

hr {
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    width: 80vw;
}

h1 {
    font-size:1.2em;
    }

h2 {
    font-size:1em;
    }

section, figure {
    margin: 0;
    padding: 0;
    }

header {
    margin-top: 8px;
    display: flex;
    justify-content:  space-evenly;
    align-items: center;
    }

nav > #menu1 {
    padding: 10px 0;
    margin-top: 8px;
    display: flex;
    justify-content:  space-evenly;
    align-items: center;
    border-top: 1px solid #4A1919;
    border-bottom: 1px solid #4A1919;
    box-shadow: 0 0 8px #808080;
    background-color: #AF0909;
    color: white;
    }

nav > #menu1 > a:link, nav > #menu1 > a:visited {
    margin: 3px;
    display: block;
    text-decoration: none;
    color: white;
    border-top: 2px solid #AF0909;
    border-bottom: 2px solid #AF0909;
    padding: 0 15px;
    transition: 400ms;
    }

nav > #menu1 > a:hover, nav > #menu1 > a:active {
    border-bottom: 2px solid white;
    }

nav > #menu2{
    gap: 32px;
    padding: 10px 5vw;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #FFDCDC;
    color: #4A1919;
    }

nav > #menu2 > a:link, nav > #menu2 > a:visited{
    margin: 3px;
    display: block;
    text-decoration: none;
    color: #4A1919;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    padding: 0 15px;
    transition: 400ms;
    }

nav > #menu2 > a:hover, nav > #menu2 > a:active {
    border-bottom: 2px solid #4A1919;
    }

main{
    min-height: 100vh;
    }

footer {
    font-size:0.8em;
    display: flex;
    justify-content:  space-evenly;
    align-items: center;
    border-top: 2px solid #DCDCDC;
    margin: 0;
    padding: 10px 0;
    }

footer > div {
    text-align: center;

    }