body {
    background-color: #1d1412;
    font-family:monospace;
}

main {
    /* padding: 20vw auto 0; */
    position: relative;
    width: 100%;
}

#background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    background-size: cover;
    background-image: url("bkgd.jpg");
    background-position: center;
}

header {
    position:fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* height: 20vh; */
    z-index: 100;
}

#about-button {
    border: none;
    padding: .5em 1em;
    border-radius: 3em;
    background-color: rgba(207, 190, 176, 0.553);
    color: rgba(9, 6, 5, 0.839);
    font-family: monospace;
    width: 6em;
    height: 6em;
    position: fixed;
    top: 9vh;
    right: -1vh;
    transition: background-color 1s;
}

#about-div.open button {
    color: rgba(207, 190, 176, 0.553);
    background-color: rgba(105, 84, 78, 0.744);
}

h1 {
    color: rgba(207, 190, 176, 0.553);
    font-family: "Jacquard 24", system-ui;
    font-weight: 100;
    font-style: normal;
    font-size: 13vh;
    margin:0;
    top: 0;
}

#about-div-content {
    /* border: 2px solid blue; */
    padding: 1em 2em;
    margin: 3vh 5vh;
    border-radius: 1em;
    background-color: rgba(184, 148, 142, 0.891);
    color: rgba(26, 20, 18, 0.745);
}

main {
    padding: 6vh 0;
}

#events-div, #recs-div {
    padding: 0 1em;
    margin: 0 auto;
    max-width: 900px;
    color: rgba(236, 217, 201, 0.719);
}

.date-div {
    border-radius: 2em;
    padding:0;
}

h2 {
    font-size: 3em;
    font-family: "Jacquard 24", system-ui;
    margin: 0;
    color: rgba(236, 217, 201, 0.719);
}

.event, .rec-category {
    border-radius: 1em;
    background-color: rgba(26, 20, 18, 0.745);
    margin: .5em 1em 1em;
    padding: .5em 2em 1em;
}

.event-title, h3 {
    font-family: "VT323", monospace;
    font-weight: 100;
    font-style: normal;
    font-size: 1.5em;
    padding: .25em 0 .25em 0;
    line-height: .75em;
    margin: 0;
    /* text-transform: lowercase; */
    color: rgba(130, 142, 102, 0.719);
    /* border: 2px solid red; */
}

.event-time {
    margin: .5em 0 0;
}

.event-location {
    margin: .25em 0;
}

.event-description {
    color:rgba(184, 148, 142, 0.891);
    font-weight: bold;
    line-height: 1.5em;
    display: none;
}

.event a {
    display: inline-block;
    background-color: rgba(184, 148, 142, 0.891);
    color:rgba(26, 20, 18, 0.745);
    padding: 0 .3em;
    text-decoration: none;
}

.event a:hover {
    background-color: rgba(215, 185, 180, 0.891);
}

#about-div.open #about-div-content{
    display: inline-block;
}

#about-div.closed #about-div-content{
    display: none;
}

#about-div a {
    display: inline-block;
    color: rgba(184, 148, 142, 0.891);
    background-color: rgba(26, 20, 18, 0.745);
    padding: 0 .3em;
    text-decoration: none;
}

#about-div a:hover {
    background-color: rgba(67, 55, 51, 0.745);
}

.event:hover {
    background-color: rgba(67, 55, 51, 0.745);
    /* transition: background-color 1s; */
}

.visible .event-description{
    display: inline;
    padding: 0;
}

.visible .event-description .word-description{
    width: 100%;
    display: block;
    margin: 0;
}

.visible .event-description img {
    display: none;
}

.visible .event-description img {
    display: block;
    width: 100%;
    max-width: 40vh;
    margin: 0 auto 2em;
}

.hide-past .past {
    /* display: none; */
    /* height: 0; */
    /* border: 2px solid red; */
    /* visibility: hidden; */
    position: fixed;
    z-index: -1;
    opacity: 0;
}

.show-past .past {
    opacity: 1;
    transition: opacity 1s;
}

/* .show-past #past-button { */
    /* position: fixed; */
    /* top: 13vh; */
    /* left: 50%; */
    /* width: 18em; */
    /* transform: translateX(-50%); */
    /* color: rgba(26, 20, 18, 0.745); */
    /* background-color: rgba(130, 142, 102, 0.719); */
    /* padding-bottom: .5em; */
    /* border-bottom: none; */
    /* border-top: 2px dotted rgba(207, 190, 176, .553); */
    /* border-radius: 1.25em; */
/* } */

/* .show-past #past-button:hover {
    background-color: rgba(130, 142, 102, 0.888);
} */

/* .show-past #events-div {
    padding-top: 6vh;
} */

#past-button, #fake-button {
    border: none;
    padding: .75em 1em 0;
    width: 70%;
    max-width: 660px;
    display: block;
    background-color: rgba(26, 20, 18, 0);
    color: rgba(207, 190, 176, 0.553);
    font-family: monospace;
    font-size: 1.2em;
    text-transform: lowercase;
    margin: 1vw auto 3vw;
    position: relative;
    transition: background-color .5s;
    border-bottom: 2px dotted rgba(207, 190, 176, .553)
}

#past-button:hover {
    color: rgba(236, 217, 201, 0.719)
}

li {
    padding-top: .5em;
}



#recs-div #add-here-div h3{
    color: rgba(236, 217, 201, 0.719);
    width: 100%;
    text-align: center;
}

#recs-div #add-here-div h3 a{
    color: rgba(26, 20, 18, 0);
    background-color: rgba(236, 217, 201, 0.719);
    width: 100%;
    text-align: center;
    text-decoration: none;
}