@media (prefers-color-scheme: dark) { /* If the browser is in dark mode */
    html { /*Set Background Color*/
        background: #141414;
        color: #fff;
    }
    .main { /*Put Hero Image in Place*/
        background: linear-gradient(rgba(20, 20, 20, 0.75) 50%, rgb(20, 20, 20, 1)), url("hero.avif");
    }
    .main__content h1 { /*Set main heading color*/
        color: #ffffff;
    }
    .main__content h2 { /*Set Subheading color*/
        color: #ffffff;
    }
    .main__btn { /*Set font color for text inside of buttons*/
        color: #e2e2e2;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
    }
    .main__btn:hover {
        box-shadow: 0 0 20px rgba(156, 156, 156, 0.95); 
    }
    .main__content h2 ul li a {
        text-decoration: none;
        color: #dfbc8d;
        transition: all 0.35s;
    }

    .main__content h2 ul li a:hover {
        color: #cfcfcf;
        text-decoration: underline #535353;
        transition: all 0.35s;
    }
    .main__content h2 b, em{ /* Format subheader */
        -webkit-text-stroke-width: 0.5px;
        -webkit-text-stroke-color: rgb(255, 255, 255);
    }
}

@media (prefers-color-scheme: light) { /* If the browser is in light mode */
    html { /*Set Background Color*/
        background: #e4e4e4;
        color: #000000;
    }
    .main { /*Put Hero Image in Place*/
        background: linear-gradient(rgba(228, 228, 228, 0.75) 50%, rgb(228, 228, 228, 1)), url("hero.avif");
    }
    .main__content h1 { /*Set main heading color*/
        color: #000000;
    }
    .main__content h2 { /*Set Subheading color*/
        color: #000000;
    }
    .main__content p { /*Set general text color*/
        color: #000000;
    }
    .main__btn { /*Set font color for text inside of buttons*/
        color: #1f1f1f;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    }
    .main__btn:hover {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.95); 
    }
    .main__content h2 ul li a {
        text-decoration: none;
        color: #9a5a00;
        transition: all 0.35s;
    }

    .main__content h2 ul li a:hover {
        color: #535353;
        transition: all 0.35s;
        text-decoration: underline #535353;
    }
    .main__content h2 b, em{ /* Format subheader */
        -webkit-text-stroke-width: 0.5px;
        -webkit-text-stroke-color: rgb(0, 0, 0);
    }
}

html { /*Set html defaults*/
    text-align: center;
    font-family: 'Oswald', serif;

}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.main {
    display: grid;
    grid-template-columns: 1fr;
    background-size: cover;
    height:auto;
    min-height: 100vh;
    margin-top: -55px;
}

.main__container { /* Format the div that contains the image, header, subheader, and sub-subheader */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Creates two equal columns */
    align-items: center;
    /* margin: 0 auto; */
    margin-top: 4em;
    height: auto;
    z-index: 1;
    width: 100%;
    max-width: 95vw;
    padding: 0em 50px;
}
.main__content {
    margin: 10px;
    width: 100%;
    
}
.main__content img{
    max-width: 65vw;
    width: 65%;
    height: auto;
    backdrop-filter: blur(2px);
    border: solid 1px #69696975;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.95); 
    border-radius: 8px;
    transition: all 0.35s ease;
}
.main__content h1 { /* Format header */
    font-size: 48px;
    font-family: 'Source Sans Pro', sans-serif;
}

.main__content h2 { /* Format subheader */
    font-size: 18px;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 200;
}

.main__content h2 b, em{ /* Format subheader */
    font-weight: 1000;
}

.main__btn { /* Format the button if the div contains a button */
    font-size: 16px;
    background-color: rgba(180, 180, 180, 0.25); 
    padding: 10px 32px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: all 0.35s;
    outline: none;
    transition: all 0.35s;
    backdrop-filter: blur(2px);
    border: solid 1px #878787;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 800;
    font-size: 20px;
    position: relative;
    z-index: 2;
    margin: 32px 10px;
}

.page_selector { /* Format the button if the div contains a button */
    font-size: 16px;
    background-color: rgba(180, 180, 180, 0.25);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); 
    padding: 14px 32px;
    border-radius: 5px;
    transition: all 0.35s;
    backdrop-filter: blur(2px);
    border: solid 1px #878787;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin: 5% auto;
    max-width: 550px;
}

.page__btn {
    padding: 15px 0;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 800;
    cursor: pointer;
    font-size: 20px;
}

.page__btn:hover {
    text-shadow: 0 0 20px rgba(158, 157, 157, 0.71); 
    transition: all 0.35s;
}

.selected_page {
    text-shadow: 0 0 15px rgba(158, 157, 157, 0.71);
}

.main__btn:hover {
    transition: all 0.35s;
}
.list {
    text-align: left;
}

.buttons {
    display: grid;
    grid-template-columns: 1fr; /* Creates two equal columns */
    align-items: center;
    justify-self: center;
    width: 100%;
    max-width: 100vw;
    padding: 0em 50px;
}

/* Mobile Responsive */
@media screen and (max-width: 1000px) { /* Adjust the main content arrangement to make it line up to not get cut off on mobile devices */
    .main__container {
        grid-template-columns: 1fr; /* Creates two equal columns */
    }
    .main__btn {
        margin: 16px 5px;
    }
    .main__container {
        padding: 0 20px;
    }
    .main__content h1 {
        font-size: 35px;
    }
    .main__content h2 {
        font-size: 15px;
    }
    .main__btn {
        font-size: 15px;
    }
    .page__btn {
        font-size: 15px;
    }
    .page_selector {
        margin: 5% 5%;
    }
    .main {
        padding-top: 25px;
    }
}