:root{--body-bg:#32332f;--text-color:#95967b;--banner-bg:#6e7d6f;--banner-color:#bac6af;--banner-bg-hover:rgba(200, 200, 200, 0.1);--menu-bottom:var(--body-bg);--banner-color-transparant:rgba(186, 198, 175, 0.1)}*{box-sizing:border-box}body,html{height:100vh;margin:0;padding:0}body{font-family:poired one,sans-serif;font-size:16px;background-color:var(--body-bg);color:var(--text-color);-webkit-user-select:none;-ms-user-select:none;user-select:none;display:grid;grid-template-rows:min-content minmax(0,1fr)min-content;grid-gap:.5em;height:100vh;width:100vw;margin:0}::-webkit-scrollbar{width:.5em;height:7px}::-webkit-scrollbar-thumb{background-color:rgba(150,150,150,.4);outline:1px solid #000;border-radius:50px}::-webkit-scrollbar-track{box-shadow:inset 0 0 4px rgba(0,0,0,.2)}header{display:grid;grid-template-columns:1fr min-content min-content;background-color:var(--banner-bg);color:var(--banner-color);padding:0 .5em;overflow:hidden}header .logo{display:grid;grid-template-columns:min-content max-content;grid-template-rows:min-content min-content;column-gap:.5em;grid-template-areas:"icon title" "icon subtitle";overflow:hidden;text-overflow:ellipsis}header .logo #logoimage{grid-area:icon}header .logo #logotitle{font-size:1.3em;grid-area:title}header .logo #logosubtitle{font-family:Poired One,sans-serif;font-size:16px;grid-area:subtitle}header .logo>img{border-radius:50%;width:50px;height:50px;margin:.5em}nav{background-color:var(--banner-bg)}nav .hamburger{color:#fff;font-size:2em;text-decoration:none;text-align:center;align-items:center;padding:10px 0;display:none;cursor:pointer}.ShowMenu{display:none}nav ul{list-style-type:none;margin:0;padding:0;background-color:var(--banner-bg);display:flex;align-items:center}nav ul li{display:inline-block;margin-right:1px}nav ul li a{display:block;min-width:140px;font-weight:700;font-size:1.2em;height:50px;text-align:center;line-height:50px;color:var(--banner-color);text-decoration:none}nav ul li:hover a{background:var(--banner-bg-hover);color:var(--banner-color)}nav ul li ul{display:none}nav ul li ul li{display:block;float:none}nav ul li a{width:auto;min-width:100px;padding:0 20px}ul.language-switcher{display:flex;list-style:none;gap:1em}@media screen and (max-width:760px){.hamburger{display:block!important}.menu{position:fixed;display:none;left:0;width:100%;z-index:500}.menu li{margin-bottom:1px}ul li,li a{width:100%}.menuitem{float:left}.menu>.menuitem:not(:last-child){border-bottom:1px solid var(--banner-color)}.ShowMenu:checked~.menu{display:block}}@media screen and (min-width:760px){.menu{height:100%}.hamburger{display:none}}.hamburger{color:#fff;font-size:2em;text-decoration:none;text-align:center;align-items:center;padding:10px 0;cursor:pointer}footer{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:.2em;background-color:var(--banner-bg);color:var(--banner-color);overflow:hidden;text-overflow:ellipsis}.panel{display:block;position:relative;border-radius:5px;flex-grow:1;flex-shrink:1;height:100%;overflow:auto}main{padding:0 .5em;position:relative;overflow:auto}a{color:#95967b}a:hover{color:#6e7d6f}.about{margin:0 auto;max-width:60rem;line-height:1.6em}.gallery-grid{padding:1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));grid-gap:1rem;a { text-decoration: none; color: inherit; } .card { display: flex; background-color: var(--banner-color-transparant); flex-direction: column; justify-content: center; align-items: center; text-align: center; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; border-radius: 0.5rem; padding: 1rem; width: 15rem; height: 15rem; p { padding: 0; } } .card:hover { background-color: var(--banner-bg); color: var(--banner-color); }}