:root{--c-txt:#cecbc0;--c-txt-h:#f4f2ec;--c-bg:#282623;--c-bg2:#352f1e;--c-bg3:#23272b;--c-txt-a-visited:#535353;--c-txt-a:#000;--c-txt-a-hover:#62542a;--c-brd:var(--c-txt-a-hover);--c-brd2:#4e4426}body{color:var(--c-txt);background-color:var(--c-bg);background:linear-gradient(180deg,var(--c-bg),var(--c-bg2),var(--c-bg3));background-attachment:fixed;font-family:sans-serif;line-height:1.5;text-align:center;height:100vh}body,ul,div{margin:0;padding:0}ul.nodots{list-style:none}p{text-align:justify;padding:10px}h1,h2,h3{color:var(--c-txt-a-hover)}a{color:var(--c-txt-a)}a:hover{color:var(--c-txt-a-hover)}a:visited{color:var(--c-txt-a-visited)}div#container{margin:auto;max-width:768px;text-align:left;height:100vh;display:flex;flex-direction:column;text-align:left}header{padding:0;padding-top:10px;position:relative;a#logolink{ line-height: 0px; img{ height: 125px; } } div#head-outer{ display: flex; flex-direction: row; } div#head-inner{ flex-grow: 1; margin-top: 10px; display: flex; flex-direction: column; justify-content: end; a#opossumcz{ text-decoration: none; font-size: 3em; margin: 0px; margin-left: 30px; margin-bottom: 10px; color: var(--c-txt); } } li{ display: inline-block; vertical-align: top; padding: 3px; font-weight: normal; margin: 0px; font-size: 1em; text-transform: none; } #mainMenu{ margin-bottom: -9px; a, a:visited { text-decoration: none; color: var(--c-txt-h); } >li{ margin-right: 15px; border-radius: 7px; background-color: var(--c-brd2); border: 1px solid var(--c-brd); font-size: 0.9em; text-transform: uppercase; position: relative; padding: 0.1em 0.5em 0.8em 0.5em; } >li.active, >li.ancestor{ background-color: var(--c-txt); >a { color: var(--c-bg); font-weight: bold; } } li:last-of-type{ margin-right:0px; } ul{ display:none; width: max-content; position: absolute; top: 2.5em; left: 0; transform: translate(-50%, 0); z-index: 10; li{ padding: 0.3em 0.5em 0.3em 0.5em; } li.active > a{ font-weight: bold; border-bottom: 3px solid var(--c-brd); } a, a:visited { color: var(--c-bg); } } li.active > ul, li.ancestor > ul { display: block; } } #langFlags{ position: absolute; top: 10px; right: 10px; li{ display: inline-block; } li.active > a{ font-weight: bold; border-bottom: 3px solid var(--c-brd); } a, a:visited { text-decoration: none; color: var(--c-txt); } }}main{flex-grow:1;color:var(--c-bg);background-color:var(--c-txt);padding:10px;padding-bottom:30px;border-radius:7px;z-index:3;ul{ margin-left: 20px; } #storesDiv{ display: flex; flex-wrap: wrap; justify-content: space-evenly; .store{ padding: 15px; background-color: var(--c-txt-h); border-radius: 7px; text-align: center; margin: 5px; ul{ text-align: left; margin-left: 5px; list-style: none; } } } #contactDiv{ font-weight: bold; span{ min-width: 7ch; font-weight: normal; display: inline-block; text-transform: capitalize; } }}footer{color:var(--c-txt);text-align:center;padding:2em}@media(max-width:799px){header #mainMenu{margin-bottom:0;> li { margin: 0; margin-right: 5px; margin-bottom: 5px; padding: 0px; padding-left: 4px; padding-right: 4px; }}header div#head-inner{padding:5px;a#opossumcz{ margin: 0; padding: 0; }}}@media(max-width:400px){#logolink{display:none}}