@import url(https://fonts.cdnfonts.com/css/liberation-serif);
* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url('../images/US_Flag_Backlit.webp');
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Liberation Serif', sans-serif;
    background-position: center;
    display: flex;
    min-height: 88vh;
    background-attachment: fixed;
    margin:6vh 10vw 6vh;
    
}

    header {
        background-color: #121212;
        position: fixed;
        top:0;
        left:0;
        right:0;
        border-bottom: 1px solid #002263;
        overflow: hidden;
        min-width: 100vw;
        display: flex;
    }
    
    .logo-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 77.22px;
        align-self: flex-start;
    }

    .logo {
        height: 77.22px;
    }
        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: none;
            width: 100%;
        }
            .pageTitle {
                display: block;
                height: auto;
                padding: 10px;
                width: 100%;
            }

            /* proceeding are css elements for text and commonly used objects sitewide */
            .box {
                background-color: #335179;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                border-color: #002263;
                border-radius: 4px;
            }

            .container {
                display: grid;
                gap: 10px;
                grid-template-columns: 1fr 1fr 1fr;
                justify-content: center;
                align-items: center;
                padding: 0 0 10px;
            }

            .icon:hover {
                fill: white;
            }
            
            h1 {
                color: white;
                text-align: center;
                font-size: 36px;
                font-weight: bold;
                font-family: 'Liberation Serif', sans-serif;
                
            }

            h2 {
                text-align: center;
                font-size: 20px;
                color: white;
                font-weight: bold;
                font-family: 'Liberation Serif', sans-serif;
            }

            hr {
                height: 2px;
                background-color: white;  
                margin: auto;
                width: 75%;
                
            }

            p {
                text-align: center;
                font-family: 'Liberation Serif', sans-serif;
                font-size: 18px;
                color: white;
                font-family: 'Liberation Serif', sans-serif;
            }

            button {
                background-color: white;
                border: none;
                white-space: initial;
                min-width: 149px;
                min-height: 69px;
                padding: 2px;
                color: white;
            }

            button:hover {
                background-color: white;
                color: #163057;
                cursor:pointer;
                
            }

            button:hover .button-icon {
                filter: invert(100%);
            }

    footer {
        background-color: #121212;
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        height: 6vh;
        text-align: center;
        color: white;
        font-size: 80%;
        font-family: 'Liberation Serif', sans-serif;
        border-top: 1px solid #002263;
    }

    @media(max-width: 702px){
        .HideOnMobie {
            display: none;
            visibility: hidden;
        }
        .container {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;   
        }

        .HideOnDesktop {
            display: block;
        }

        .container {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;   
            justify-content: center;
            align-items: center;
        }

    }
    @media (max-width:500px) {
        .sidebar {
            width: 100%
        }

    }