bunteshaus.de/themes/buha/assets/scss/common.scss

:root {
    --align: center;
}

.container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    height: 100vh;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    a {
        color: var(--text-color);
    }
}
.header {
    flex-grow: 1;
    min-height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 1rem;
    padding-right: 1rem;
}
.minheight  {
    min-height: 33vh;
}
.content {
    flex-grow: 1;
    overflow: auto;
}

.footer {
    flex-grow: 0;
    min-height: 4rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    flex-direction: column-reverse;
    div {
        margin-top: 1rem;
    }
    .infobox {
        text-align: var(--align);
    }
}

.banner {
    display: flex; align-items: center; background-position: top; background-repeat: no-repeat; background-attachment: fixed;
    font-size: 115%;
    h1 {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

.banner-shadow {
    box-shadow: 
        inset 0px -11px 8px -10px #444; 
}

.page-intro {
    text-align: var(--align);
    a { text-decoration: underline; }
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding-right: 1.1rem;
    font-size: 150%;
}

section, article, .article_footer, .sidebar {
    //padding: 1rem;
}

.list {
    display: flex;
    flex-direction: column;
}


.twolists {
}

.gen_list {
    a { text-decoration: none;
        margin-bottom: 5rem;
        &:hover {
            .img {
                height: 180px;
                background-size: 110% auto;
                background-position: top;
            }
            .img-only {
                height: 360px;
                background-size: 110% auto;
                background-position: top;
            }
        }
    }
    img {
        width: 100%;
    }
    h3 {
        margin-top: 0rem;
    }
    section {
        margin-right: 1rem;
        margin-left: 1rem;
    }
    .img {
        width: 100%;
        height: 140px;
        background-size: 100% auto;
        background-position: top; 
        transition: all .3s ease-in-out;
        background-repeat: no-repeat;
    }
    .img-only {
        width: 100%;
        height: 360px;
        background-size: 100% auto;
        background-position: top; 
        transition: all .2s ease-in-out;
        background-repeat: no-repeat;
    }
}

article {
    .article-image {
        margin-top: 3rem;
        margin-bottom: 3rem;
        img, div {
            display: flex;
            justify-content: center;
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
    }
    a {
        &:hover {
            text-decoration: none;
        }
    }
    h3 {
        font-size: 1.4em;
    }
    .article_content {
        background: var(--background-alt); padding-left: 2rem; padding-right: 2rem; padding-bottom: 1rem; filter: alpha(opacity=987); -moz-opacity: 0.987; -khtml-opacity: 0.987; opacity: 0.987;
    }
}

.articlemeta {
    margin-bottom: .5rem;
    &:first-child {
        font-weight: bold;
    }
}

#pagination {
	display: flex;
	justify-content: center;
	margin: 1rem;
    a {
        padding: .5rem;
        margin: .5rem;
    }
}

img.dark-shadow{
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1));
}

.dark-shadow{
   text-shadow: 0px 3px 3px rgba(0, 0, 0, 1);
   color: white;
}

.funny-text-shadow {
  color: #fff;
  text-shadow: 0px 4px 4px #282828;
}

fieldset {
    display: flex; flex-wrap: wrap; flex-direction: row; padding: 0; border: none; margin: 0 0 .3rem .5rem;
}

.w100 {
	width: 100%;
}

.column {
    flex-direction: column;
}

#result {
    white-space: pre; display: none; background: var(--background-body);
    padding: 1rem 0 1rem 1rem; 
    margin-top: 1rem;
    -webkit-user-select: all;
    user-select: all;
}