body::before {
    background-image: url("../media/thesoarnet-outdoors-1251150.jpg");
    background-size: cover;
    content: '';
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: -1;
}

main {
    align-content: center;
    color: rgb(182, 45, 21);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 9rem 0 5rem 0;
    text-align: center;
    text-shadow: 0 1px .2rem rgba(0, 0, 0, 0.7);
}

#west-virginia {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#virginia {
    margin-left: 1rem;
}

main h2 {
    font-family: "Newsreader";
    font-size: 5rem;
    margin: 0 0 -3.5rem 0;
}

main h1 {
    font-family: "Kaushan Script";
    font-size: 10rem;
    margin: 0;
    text-shadow: 0 2px .2rem rgba(0, 0, 0, 0.5);
}

main h3 {
    color:rgb(243, 226, 152);
    font-family: "Newsreader";
    font-size: 2rem;
    margin: 3rem;
}

#tickets {
    align-items: center;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#date {
    border-right: .13rem solid white;
    padding: 5rem 2rem;
}

#date #p1 {
    font-size: 1.5rem;
    margin: 0;
}

#date #p2 {
    font-size: 3rem;
    font-weight: 1000;
    margin: 0;
}

main #button a{
    background-color:rgb(67, 114, 35);
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px .2rem rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 2rem;
    font-weight: 900;
    margin: 5rem 2rem;
    padding: 1.8rem 5rem;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
}

main #button a:hover {
    background-color:rgb(95, 151, 58);
}

main #button a:active {
    background-color:rgb(160, 197, 136);
}

#info {
    align-items: center;
    background-color: rgba(168, 148, 111, 0.753);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5rem;
}

#info-title {
    font-family: "Newsreader";
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-shadow: 0 1px .2rem rgba(0, 0, 0, 0.7);
}

#info-main {
    display: inherit;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    justify-content: center;
}

#info-main h2 {
    border-bottom: .13rem solid white;
    font-size: 2rem;
    text-align: center;
}

#map {
    margin: 0 2rem;
}

#map iframe {
    box-shadow: 0 1px .2rem rgba(0, 0, 0, 0.7);
    height: 350px;
    width: 600px;
}

#info-right-top {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#info-location, #info-date {
    padding: 0 2rem;
    max-width: 18rem;
}

#info-right-bottom {
    align-content: center;
    justify-items: center;
    margin-top: 1rem;
}

#info #button a {
    background-color:rgb(182, 45, 21);
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px .2rem rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 3rem;
    padding: 1.2rem 3rem;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
}

#info #button a:hover {
    background-color: rgb(202, 66, 42);
}

#info #button a:active {
    background-color: rgb(223, 93, 70);
}

#volunteers {
    background-color: rgba(168, 148, 111, 0.486);
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 5rem;
}

#vol-left {
    margin-right: 2rem;
    margin-top: 3rem;
    max-width: 35rem;
    text-align: center;
}

#vol-left h1 {
    font-family: "Newsreader";
    font-size: 3rem;
    text-shadow: 0 1px .2rem rgba(0, 0, 0, 0.7);
}

#vol-left p {
    font-size: 1.2rem;
    text-align: left;
}

#vol-button a {
    background-color:rgb(182, 45, 21);
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px .2rem rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 900;
    margin: 3rem 0;
    padding: 1.2rem 3rem;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
}

#vol-button a:hover {
    background-color: rgb(202, 66, 42);
}

#vol-button a:active {
    background-color: rgb(223, 93, 70);
}

#vol-right {
    display: flex;
    justify-content: center;
}

#social-feed {
    padding: 5rem;
    background-color: rgba(168, 148, 111, 0.753);
}

#about {
    background-color: rgba(168, 148, 111, 0.486);
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 4rem;
}

#left img {
    border: 2px solid white;
    box-shadow: 0 1px .2rem rgba(0, 0, 0, 0.7);
    height: auto;
    max-width: 45rem;
}

#right {
    margin-left: 4rem;
    max-width: 45rem;
    padding-top: 2rem;
}

#right h1 {
    font-family: "Newsreader";
    font-size: 3rem;
    text-shadow: 0 1px .2rem rgba(0, 0, 0, 0.7);
}

#right p {
    font-size: 1.2rem
}

#right #button a {
    background-color:rgb(182, 45, 21);
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px .2rem rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 2rem;
    font-weight: 900;
    margin-top: 4rem;
    padding: 1.8rem 5rem;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
}

#right #button a:hover {
    background-color: rgb(202, 66, 42);
}

#right #button a:active {
    background-color: rgb(223, 93, 70);
}

@media screen and (max-width: 1300px) {
    #volunteers {
        flex-direction: column;
    }

    #vol-left {
        margin: 0 auto;
    }

    #vol-left h1 {
        margin-top: 0;
    }

    #about {
        flex-wrap: wrap-reverse;
        justify-content: center;
    }

    #about h1 {
        border-bottom: 2px solid white;
        font-size: 2.5rem;
        padding-bottom: 1rem;
        text-align: center;
    }

    #left img {
        max-width: 35rem;
    }

    #right {
        margin: 0;
        text-align: center;
    }

    #right p {
        text-align: left;
    }

    #right #button a {
        margin-top: 1.5rem;
        margin-bottom: 2rem;
    }
}

@media screen and (max-width: 900px) {
    #west-virginia {
        flex-direction: column;
    }

    #virginia {
        margin-left: 0;
        margin-top: -5rem;
    }

    main h2 {
        font-size: 4rem;
        margin: 0 0 -2rem 0;
    }

    #map iframe {
        width: 500px;
    }

    #info-right {
        justify-content: center;
        text-align: center;
    }

    #info-right-bottom {
        justify-content: center;
        text-align: center;
    }

    #vol-right img {
        width: 25rem;
    }

    #social-feed {
        padding: 5rem 2rem;
    }
}

@media screen and (max-width: 570px) {
    #west-virginia {
        flex-direction: column;
    }

    #virginia {
        margin-left: 0;
        margin-top: -3rem;
    }

    main h1 {
        font-size: 6rem;
    }

    main h2 {
        font-size: 2rem;
        margin: 0 0 -1rem 0;
    }

    main h3 {
        font-size: 1.5rem;
    }

    #tickets {
        flex-direction: column;
    }

    #tickets #date {
        border-right: none;
        border-top: 2px solid white;
        padding-bottom: 0;
    }

    #tickets #button a {
        font-size: 2rem;
        margin: 3rem 0 0 0;
        padding: 1rem 2rem;
    }

    #info-title {
        text-align: center;
    }

    #info-right h2 {
        width: 18rem;
    }

    #map iframe {
        width: 290px;
    }

    #volunteers {
        padding: 5rem 2rem;
    }

    #vol-right img {
        width: 20rem;
    }

    #about #button a {
        font-size: 1.5rem;
        margin-bottom: 3rem;
        padding: 1rem 2rem;
    }

    #about img {
        display: none;
    }
}