@font-face {
  font-family: 'NanumMyeongjo'; /* A name for your font */
  src: url('fonts/NanumMyeongjo-Regular.ttf') format('truetype'); /* Path to your file and format */
  font-weight: normal;
  font-style: normal;
}

/** html general **/
html {
    background-color:white;
    color:rgb(40, 0, 0);
    font-family:NanumMyeongjo;
}
body {
    margin:0;
}
div {
    max-width:100%;
}

/** menu **/
#title {
    text-align:center;
}
#menu {
    display: flex;
    justify-content: space-between;
}
#menu a {
    flex-grow: 1;
    text-align: center;
    background-color: rgb(0, 0, 0);
    padding: 5px 0;
    color: white;
    text-decoration: none;

    border: 1px;
    border-color: white;
    border-style: solid;
}
#menu a:hover {
    background-color:rgb(63, 0, 0);
}
#menu a.menuOn {
    background-color:darkred;
}

/** page general **/
#content {
    display:grid;
}
.pageBody {
    display:grid;
}
.sectionContent {
    display:grid;
    grid-template-columns: 1fr 1fr;
}
.aboutContent {
    margin:5px 10px 5px;
    grid-column-end: span 2;
}
button {
    padding:5px 0;
    border: none;
    background: rgb(43, 0, 0);
    color: white;

    font-family:NanumMyeongjo;
    font-size:1rem;
}
button.sectionOpen {
    background: rgb(73, 0, 0);
}
button.sectionClosed:hover{
    background:black;
}
.aboutImage {
    width:100%;
}
.aboutImage img {
    width:100%;
}
.aboutImage p {
    text-align: right;
    margin: 0;
    font-size: .8rem;
}


/** event page **/
.eventSection {
    aspect-ratio: 1;
    display:flex;
    flex-direction:column-reverse;
    padding:0;
    background:none;
}

.eventDescription {
    display:none;
}
.eventOff .eventImg {
    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: darken;
}
button.eventImg {
    background-size: cover;
    background-position:center;
    flex-grow:1;
    display: flex;
    flex-direction: column-reverse;
    padding:0;
}
.eventTitle {
    padding:5px 0;
    width:100%;
    background-color: rgba(100, 100, 100, .5);
}
.eventSection:hover .eventTitle {
    background-color:black;
}
.eventOn {
    text-align:left;
    
    grid-row-start:1;
    grid-column-end: span 2;
    /* aspect-ratio:auto; */
    
    border:5px;
    border-style:solid;
    border-color:black;
    
    width: calc(100% - 10px);
    height:auto;
}
.eventOn .eventTitle{
    padding:5px 10px 5px;
    width:calc(100% - 20px);
}
.eventOn .eventDescription {
    padding: 5px 10px 5px;
    display: block;
    background-color: white;
}
.eventOn .eventSection {
    aspect-ratio:unset;
}

@media (min-width:601px) {
    body {
       min-width:800px;
    }
    #content {
        grid-template-columns:200px 100px 1fr 100px;
    }
    #title {
        grid-column-start: 1;
        grid-column-end: 4;
    }
    #main{
        display:flex;
        flex-direction: column;
    }
    #menu{
        position:relative;
        z-index:2;

        display: flex;
        flex-direction: column;

        margin-bottom: 20px;

        grid-row-start:2;
        grid-column-start:1;
        grid-column-end: 2;
    }

    .pageButton{
        grid-column-start: 1;
        grid-column-end: 2;

        border: 1px;
        border-color: white;
        border-style: solid;
    }

    .sectionContent {
        grid-column-start:3;
        grid-column-end:4;
        grid-row-start:2;
        grid-row-end:10;

        display:grid;
        grid-template-columns: repeat(auto-fit, 200px);
    }

    .aboutContent {
        margin-top:-16px;
        grid-column:1/-1;
        display:grid;
    }
    .aboutImage {
        order:2;
    }
    .aboutText {
        order:1;
    }

    .eventOff {
        width:200px;
    }
    .eventOn {
        grid-column:1/-1;
        width:auto;
        margin: 0 calc(50% - 200px);
    }
}