@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Merriweather&display=swap");

.font_size_xs {
    font-size:33%;
}
.font_size_s {
    font-size:66%;
}
.font_size_m {
    font-size:100%;
}
.font_size_l {
    font-size:120%;
}
.font_size_xl {
    font-size:150%;
}

.article, .content, .column {
    max-width: 98%;
}

#footer {
    text-align:center;
}

#head {
    width:80%;
    margin: 0 auto;
    text-align:center;
}

#head img {
    width:65%;
}


#menubar a {
    display:block;
    text-decoration: none;
}

#sidemenu {
    border-left: 2px solid;
    margin: auto 1exauto  auto;
    padding: .5ex .5ex;

}
#sidemenu a {
    display:block;
    text-decoration: none;
}

h3 {
    font-family: 'Gilda Display', serif;
    font-size:2.5em;
    margin-bottom:.5ex;
}

h4 {
    font-family: 'Gilda Display', serif;
    font-size:2em;

}


div.headline a {
    text-decoration: none;
}

div.subheadline {
    font-size:1.6em;
    margin-bottom:1em;
}

div.summary {
    font-size:1.4em;
}

div.content {
    width:70%;
    margin:0 auto;
    font-size:1.4em;
}

div.article {
    border-bottom: 1px solid;
}

div.article_with_image_top div.detail_image {
    text-align: center; 
    width:80%;
    margin: 0 10%;
}

div.article_with_image_top img { 
    width:80%;
    margin: 0 10%;
}

div.column_narrow {
    flex: 1;
}

div.column_narrow img {
    width:80%;
    margin: 0 10%;
}

div.column_wide {
    flex: 2;
}

div.readmore {
    text-align: center;
    font-size: .6em;
}

div.comment {
    margin-top:1em;
}
div.commenttext {
    margin-left:1em;
}

div.commentheader {
    margin-top:1ex;
}

div.commentinreplyto {
    margin-top:1ex;
    margin-left:3em;
}


@media only screen and (max-width: 600px) {

    #menubar {
        width:100%;
        display:block;
        text-align: center;
        border-top: 2px solid;
        border-bottom: 2px solid;
        margin: auto auto 1ex auto;
        padding: .5ex .5ex;
    }
    
    div.columns{
        display:block;    
    }

    div.article_with_image_side img {
        float:none;
        width:90%;
        margin-right:0;
    }

}

@media only screen and (min-width: 600px) {

    #menubar {
        width:100%;
        display:flex;
        column-gap: 2%;
        justify-content: space-evenly;
        text-align: center;
        border-top: 2px solid;
        border-bottom: 2px solid;
        margin: auto auto 1ex auto;
        padding: .5ex .5ex;
    }
    
    div.columns{
        display:flex;
        flex-wrap:wrap;
        justify-content: space-between;
        column-gap:2%;
    
    }

    div.column {
        border-left:1px solid;
        padding:0 1% 0 3%;
    }

    div.column:first-child {
        border-left: none;
    }

    div.article_with_image_top div.list_image {
        float:right;
        width:60%;
    }

    div.article_with_image_top div.list_image {
        width:100%;
    }

    div.article_with_image_side div.list_image {
        float:right;
        width:60%;
    }

    div.article_with_image_side div.list_image {
        width:100%;
    }

    div.article_with_image_side::after {
        clear:both;
        content: "";
        display:block;
    }

    div.event {
        margin-left:3em;
    }


}