 :root {
            --primary: #003f87;
        }

        body {
            font-family: 'Oswald', sans-serif;
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        h1 {
            font-size: 3.0rem;
        }

        h1, h2, h3 {
            font-family: 'Roboto Slab', serif;
            text-shadow: 2px 2px 2px #FFB225;
        }

        .headline {
            font-family: 'Roboto Slab', serif;
            text-shadow: 2px 2px 2px #fdc116;
        }

        .splash {
            border: 8px solid #003f87;
            margin: 0 8px;
            padding: 0px;
            border-radius: 32px;
            background: url("/images/GetImgVlt1.jpeg") no-repeat center;
            height: 272px;
            width: 272px;
            display: inline-block;
        }

        .cubscouts {
            border: 8px solid #003f87;
            margin: 0 8px;
            padding: 0px;
            border-radius: 32px;
            background: url("/images/cu-bs-logo.png") no-repeat center;
            height: 272px;
            width: 272px;
            display: inline-block;
        }

        @media (max-width: 768px) {
            .splash {
                height: 120px; width: 120px; /* Adjust the height for mobile screens */
                background-size: contain; /* Scale the background image to fit within the container */
            }
               .cubscouts {
                height: 120px; width: 120px; /* Adjust the height for mobile screens */
                background-size: contain; /* Scale the background image to fit within the container */
            }
        }

        header {
            text-align: center;
            background: linear-gradient(to top, black, #003f87, #003f87, #003f87);
            border-bottom: 10px solid #fdc116;
        }
        main {
            overflow: hidden;
            margin-bottom: 125px;
        }

        article {
            margin-left: 4rem;
            margin-right: 4rem;
        }

        footer {

            text-align: center;
            background: linear-gradient(to bottom, black, #003f87, #003f87);
            border-top: 10px solid #FFB225;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
@media (max-width: 768px) {
  footer {
    display: none;
  }
}
