/* global */

body {
    --base-font-family: system-ui, sans-serif;
    --lightgrey: #dfe1e1;
    --metalblack: #3a3d4d;
    --metalblack-x: #23252f;
    --metalblack-hover: #3a3d4ddd;

    --sandyellow: #f1f181;
    --sandyellow-strong: #fafa72;

/* buttons */
    --button-color: #313025;
    --button-color-hover: #313025dd;
    --button-selected: #9e9b76;
    --button-selected-hover: #9e9b76e9;

    /* header/footer */
    --sandygrey: #bebba3;
    --sandygrey-hover: #a2a08c;
    --sandyblack: #1b1c15;

    --box-margin: 26px;
    --box-box-margin: 34px;
    --box-max-width: 620px;
    --text-font-size: 16px;
    --text-line-height: 22px;
    --text-margin: 16px;
    --text-margin-mobile: 12px;
    --text-max-width: 730px;
    --text-max-width-x: 840px;
    --narrow-text-max-width: 580px;
    --box-slight-indent: 0.4%;
    --list-item-margin: 5px;
    --menu-gap: 8px;
}

/* common */

body { margin: 0;  background-position: center center;  background-repeat: repeat;  font-family: var(--base-font-family); font-size: var(--text-font-size); }
body * { box-sizing: border-box;}

table td { vertical-align: top;}

table { border-collapse: collapse;}
h1, h2 { font-size: 30px; letter-spacing: -1px; margin-top: var(--text-margin); margin-bottom: var(--text-margin);}
h3 { font-size: var(--text-font-size)}

p, td, tr, li, h3 { line-height: var(--text-line-height);}
p, ul { margin-top: var(--text-margin); margin-bottom: var(--text-margin); }

a, .transition, .submit-button, .control-button, label { transition: all 0.17s ease;}

.nowrap { white-space: nowrap;}
.text-center { text-align: center;}


/*  layout  */

.body { background-color: #f3f3e1; }

.site-container { max-width: 1050px; background-color: white; margin: 0 auto; padding-top: 1px; }
.main {  padding: 0 2.8%; margin-bottom: var(--text-margin); /* fix, better on .aside-main, but this works not ;) */ display: flow-root; /* fix short articles */ }

.aside { width: 38%;  float: right; margin: 22px 0 var(--box-margin) 3.2%; /* .main + box-slight-indent */ }
.aside-main { margin-top: var(--text-margin); /* fix scrollTo */ }

.article { min-height: 180px; }
.article p, .article ul, .article h2, .article h3 {  max-width:  var(--text-max-width);  }
.article .narrow-text { max-width: var(--narrow-text-max-width); }

@media (max-width: 520px)
{
    .article h1, .article h2 { margin-left: 2px;  }
    .main {  padding: 0 1.8%; }
}

/*  menu  */

    /* common */
.button { padding: 8px 30px 10px;  border-radius: 3px; text-decoration: none; text-align: center; background-color: var(--button-color); color: white;}
.button:hover {  background-color: var(--button-color-hover);}
.button-link { padding-right: 45px; padding-left: 22px; background-image: url("images/icons/next-white.png");  background-repeat: no-repeat; background-position: right center;}

.scrollup-button, .scrolldown-button { background-position: right center;  background-repeat: no-repeat; }
.scrollup-button { background-image: url("images/icons/scrollup-white.png");}
.scrolldown-button { background-image: url("images/icons/scrolldown-white.png");}
.icon-right { padding-right: 14px;}


.developer-menu { position:absolute; top: 22px; right: 12px;}
.developer-menu .button { background-color: #4b4b41; padding: 6px 26px; border: 1px solid white; color: white;}
.developer-menu .button:hover { background-color: #67675b;}

.lang-menu { position:absolute; right: 12px; top: 12px; display: flex; flex-flow: wrap row; align-items: flex-end; gap: var(--menu-gap);}
.lang-button { background-color: var(--button-color); padding: 7px 20px 9px 28px; background-position: left center; background-repeat: no-repeat;}
.lang-button:hover { background-color: var(--button-color-hover); }
.lang-menu .selected { background-image: url("images/icons/checked-button-white.png");}

.main-menu { display: flex; flex-flow: wrap row; align-items: flex-end; gap: var(--menu-gap); }
.main-menu a { flex-grow: 1;}
.main-menu .button { padding-left: 12px;  padding-right: 12px; color: white;}

.main-menu-container { margin-left: 12px; margin-right: 12px; }
.top-menu-container nav { align-items: flex-start;}
.top-menu-container { margin-top: 11px;}
.bottom-menu-container nav { align-items: flex-end;}
.bottom-menu-container { margin-bottom: 11px;}

.toggle-menu-button { z-index: 0; padding: 10px 12px 12px; margin-bottom: var(--menu-gap); cursor: pointer; }
.toggle-menu-button:hover { background-color: var(--button-color);}
.toggle-menu-button-opened , .toggle-menu-button-opened:hover /* fix */ { background-color: var(--button-selected);}
.opened-caption { display: none;}
.toggle-menu-button-opened .opened-caption { display: initial;}
.toggle-menu-button-opened .closed-caption { display: none;}
.toggle-icon { float: right;  margin-top: 0; width: 22px; height: 22px; background-position: center top 0;  background-repeat: no-repeat;  background-image: url("images/icons/rolldown-toggle-menu.png");}
.toggle-menu-button-opened .toggle-icon { background-position-y: -50px;}


.button-bar {  display: flex; flex-flow: wrap row; justify-content: flex-start; gap: var(--box-margin) var(--box-margin); margin: var(--box-box-margin) var(--box-margin);}
.button-bar-centered { justify-content: center;}

    /* common - override */
.main-menu .selected {  background-color: var(--button-selected);}
.main-menu .selected:hover {  background-color: var(--button-selected-hover); }

@media (max-width: 1600px)
{
    .developer-menu {  display: none;}  /* testing */
}

@media (max-width: 850px)
{
    .main-menu-container { margin-left: 9px; margin-right: 9px; }
    .top-menu-container { margin-top: 8px;}
    .bottom-menu-container { margin-bottom: 8px;}
    .main-menu { gap: 6px; }

    .lang-menu { right: 7px; top: 7px; gap: 6px;}
    .lang-button { padding: 4px 14px 6px 26px;}
}

@media (max-width: 570px)
{
    .article { min-height: auto;}
    .main-menu-container { margin-left: 8px; margin-right: 8px; }
    .top-menu-container { margin-top: 7px;}
    .bottom-menu-container { margin-bottom: 7px;}
    .main-menu { gap: 5px; }
    .button-bar { margin-left: 2%;  margin-right: 2%; justify-content: center; gap: var(--text-margin);}
}

@media (max-width: 560px)
{
    .lang-menu { right: 10px; top: 10px; gap: 9px;}
    .lang-button { padding: 7px 20px 9px 28px;}
}

@media (max-width: 420px)
{
    .main-menu { flex-direction: column; gap: 4px; }
    .main-menu .button {  width: 100%; }
}

/* footer */

.site-footer { background-color: var(--sandygrey);}
.footer-bar { color: black; margin: 0; padding: 22px 45px; min-height: 28px;  line-height: 28px;}
.footer-delim { margin: 0 6px;}
.link-bar { float: right; }
.footer-link { color: black; padding: 2px 12px 5px; margin-right: -12px;  border-radius: 18px; }
.footer-link:hover { background-color: var(--sandygrey-hover);}
.footer-link + .footer-link { margin-left: 16px;}

@media (max-width: 780px)
{
    .footer-bar { text-align: center; padding-left: 6px; padding-right: 6px;}
    .link-bar {  float: none; display: block;  }
}

@media (max-width: 520px)
{
    .footer-bar { text-align: center; padding-left: 6px; padding-right: 6px;}
    .footer-snipp { display: block;}
    .footer-delim {  display: none;}
}