#navigation_wrap {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    height: 1.5em;
    border-style: solid;
    border-width: 0;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-color: white;
    border-bottom-color: lightgrey;
}

.navigation_box {
    font-size: 1em;
}

.category_wrap {
    display: none;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    background-color: white;
    border-radius: 20px;
    box-shadow: 5px 5px 15px 1px grey;
    padding-top: 2vh;
    padding-bottom: 2vh;
    padding-left: 2vw;
    padding-right: 2vw;
    z-index: 2;
}

.category_box {
    font-size: 1em;
}

#categorytoggle {
    position: absolute;
    top: -9999px;
    left: -9999px;
    visibility: hidden;
}

#categorytoggle:checked ~ .category_wrap {
    display: flex;
}

#homepage_head {
    display: grid;
    grid-template-columns: 1em max-content 1fr max-content 1em;
    grid-template-rows: 1em max-content 1fr max-content 1em;
    grid-gap: 0 0;

    display: -ms-grid;
    -ms-grid-columns: 1em max-content 1fr max-content 1em;
    -ms-grid-rows: 1em max-content 1fr max-content 1em;

    background-attachment: scroll;
    background-position: center 10%;
    background-repeat: no-repeat;
    background-image: url(images/169d.jpg);
    background-size: cover;
    height: 45vh;
    border-style: none;
    margin: 0;
    padding: 0;
}

#homepage_head_text {
    grid-area: 2 / 4;
    -ms-grid-row: 2;
    -ms-grid-column: 4;
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    color: maroon;
    font-weight: 1000;
    font-style: italic;
    text-align: Center;
}

#homepage_head_text2 {
    grid-area: 4 / 2;
    -ms-grid-row: 4;
    -ms-grid-column: 2;
    margin: 0;
    padding: 0;
    font-size: 2.5em;
    color: maroon;
    font-weight: 1000;
    font-style: italic;
    text-align: ;
}

@media only screen and (max-width: 1000px) {
    #homepage_head {
        background-position: center;
        height: 45vh;
    }
    
    #homepage_head_text {
        font-size: 1.6vw;
    }

    #homepage_head_text2 {
        font-size: 4vw;
    }
}

@media only screen and (min-width: 1600px) {
    #homepage_head {
        background-position: center 15%;
        height: 50vh;
    }
        
    #homepage_head_text {
        font-size: 1.2em;
    }

    #homepage_head_text2 {
        font-size: 2.5em;
    }
}

.summary_navigation {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin: 0 auto;
    max-width: 920px;
}

@media only screen and (max-width: 946px) {
    .summary_navigation {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        margin: 0 auto;
        max-width: 610px;
    }
}

@media only screen and (max-width: 636px) {
    .summary_navigation {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        margin: 0 auto;
        max-width: 300px;
    }
}

.summary_wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 auto;
    max-width: 1200px;
}

.summary_box {
    height: 300px;
    width: 300px;
    background-size: cover;
    margin: 5px;
    color: black;
    
    display: flex;
    flex-flow: column nowrap;
}

.summary_box_noimg {
    height: 298px;
    width: 298px;
    margin: 5px;
    color: black;
    border-width: 1px;
    border-style: solid;
    
    display: flex;
    flex-flow: column nowrap;
}

.summary_date {
    text-align: left;
    font-size: 1.2em;
    padding: 5px 10px;
    padding-bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
}

.summary_subbox {
    opacity: 0;
    transition: 0.3s;
    flex: 1 1 auto;
    display: flex;
    flex-flow: column nowrap;
}

.summary_subbox:hover, .summary_subbox:focus, .summary_subbox:active {
    opacity: 1;
}

.summary_subbox_noimg {
    opacity: 1;
    flex: 1 1 auto;
    display: flex;
    flex-flow: column nowrap;
}

.summary_title {
    text-align: center;
    font-size: 2.5em;
    padding: 0px 10px;
    padding-bottom: 3px;
    background-color: rgba(255, 255, 255, 0.6);
    flex: 1 1 auto;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

.summary_no_text {
    height: 1.2em;
    padding: 5px 10px;
    padding-bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
}

.summary_space {
    flex-grow: 1;
}

.summary_text_noimg {
    text-align: center;
    font-size: 1.2em;
    flex-grow: 1;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.6);
}

.summary_text {
    text-align: center;
    font-size: 1.2em;
    flex-grow: 0.5;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.6);
}@font-face {
    font-family: CenturySchoolbook;
    src: url('fonts/CenturySchoolbook.woff') format('woff'),
         url(fonts/CenturySchoolbook.otf);
}

body {
    margin: 0;
    padding: 0;
    font-family: CenturySchoolbook, serif;
}

p {
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: inherit;
}

form {
    text-align: center;
}
.blogpost_wrap {
    background-color: white;
    border-radius: 20px;
    box-shadow: 5px 5px 15px 1px grey;
    margin: 3vh 3vw;
}

.blogpost_wrap header {
    margin: 0;
    padding-top: 1vh;
    padding-bottom: 2vh;
    text-align: center;
    font-size: 1.7em;
    font-weight: 1000;
}

.blogpost_wrap footer {
    clear: both;
    margin: 0;
    padding: 0;
    padding-top: 5vh;
    padding-bottom: 5vh;
    text-align: center;
}

.blogpost_wrap section {
    padding: 0 5vw;
}

.blogpost_wrap section p {
    margin: 1em 0;
}

img {
    max-width: 100%;
    height: auto;
    margin: 0 1em;
}

iframe {
    max-width: 100%;
    margin: 0 1em;
}

#blogpost_form_cropimage {
    width: 400px;
    height: 400px;
    margin-top: 1em;
    margin-bottom: 2em;
}

@media only screen and (max-width: 900px) {        
    .blogpost_wrap section p {
        margin: 1em 0;
        padding: 0 !important;
        }
        
    img {
        float: none !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 92%;
        height: auto;
    }
        
    iframe {
        float: none !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 92%;
        width: 200px;
        height: auto;
    }
    
    #blogpost_form_cropimage {
        width: 315px;
        height: 315px;
        margin: auto;
        margin-top: 1em;
        margin-bottom: 2em;
    }
        
}

#blogpost_navigation {
    display: flex;
    flex: row nowrap;
    padding: 0.8em;
}

#blogpost_next {
    flex: 0 0 auto;
    text-align: left;
}

#blogpost_prev {
    flex: 0 0 auto;
    text-align: right;
}

#blogpost_navigation_dummy {
    flex: 10 1 auto;
}

.blogpost_form {
    display: block;
    padding: 5vw;
    text-align: left;
}

#blogpost_form_content {
    height: 50em;
}

.blogpost_form p {
    min-height: 1em;
}

#titleImageCurrent {
    margin: inherit;
    width: 5em;
    height: auto;
}

#blogpost_form_submit_wrap {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

#blogpost_form_submit_wrap input {
    width: auto;
    margin: 1em;
}

#timeout_notification {
    visibility: hidden; /* Hidden by default. */
    min-width: 0px; /* Set a default minimum width */
    margin-left: -8.25em; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}

#timeout_notification.show {
    visibility: visible;
    animation-name: fadein;
    animation-duration: 0.5s;
}

#timeout_notification.hide {
    visibility: hidden;
    transition: visibility 0s 0.5s;
    animation-name: fadeout;
    animation-duration: 0.5s;
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}.archives_wrap {
    display: grid;
    grid-template-columns: 0 repeat(3, max-content) repeat(2, minmax(0, max-content)) 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-columns: max-content;
    grid-auto-rows: auto;
    grid-gap: 1em 0.6em;
    margin: 0.7em 3vw;
    
    display: -ms-grid;
    -ms-grid-columns: 0.6em (max-content 0.6em)[3] (minmax(0, max-content) 0.6em)[2] 1fr 1fr;
    /*-ms-grid-columns: 1em max-content 1em max-content 1em max-content 1em minmax(0, max-content) 1em*/
    -ms-grid-rows: (0.5em auto 0.5em)[10];
}

.archives_box {
    border-radius: 20px;
    box-shadow: 5px 5px 15px 1px grey;
    height: 2.5em;
}

.archives_wrap section {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

.archives_wrap form {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

.archives_flexbox {
    display: flex;
    flex-flow: row nowrap;
}

.archives_flexbox a {
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archives_navigation {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin: 0 4vw;
    max-width: 100%;
}