html {
font-family:'Open Sans', 'San Francisco', Roboto, Helvetica, Geneva, Arial, sans-serif;
text-rendering:optimizelegibility;
scroll-behavior:smooth;
}

body {
position:relative;
margin:auto;
max-width:1280px;
}

img {
max-width:100%;
height:auto;
}

figure {
  margin:0;
  padding:0;
}

figcaption {
  padding:.25rem .5rem;
}

a {
color:steelblue;
text-decoration:none;
}

a:hover {
  color:peru;
}

a:focus {
  outline:3px solid rgba(0,0,0,.7);
}

p {
  margin-bottom:0;
}

header,footer {
text-align:center;
position:relative;
max-width:800px;
margin:auto;
}

header a, header h1 {
  color:white;
}

header a:focus > *, footer a:focus > *, header a:hover > * {
  color:white;
}

nav, aside {
text-align:center;
border-top:2px solid steelblue;
border-bottom:2px solid steelblue;
}

nav:before {}



main > hgroup, main > figure, main-context, main-content {
display:block;
max-width:800px;
margin:0 auto;
padding:0 1rem;
}

hgroup {
    margin-bottom:3rem !important;
}

#context address {
  position:relative;
  font-style:normal;
  height:3rem;
  line-height:3;
  max-width:360px;
}

#context address img {
  display:block;
  float:left;
  height:3rem;
  width:3rem;
  border-radius:50%;
  box-shadow: 0px 0px 0px 2px steelblue;
}

#context address img:hover {
    box-shadow: 0px 0px 0px 3px peru;
}


#context time + address {
  top:-1.75rem;
}

#context time + address + time {
  top:-3rem;
}

#context a[content] {
  margin-left:.5rem;
  position:relative;
  opacity:.8;
  font-kerning:none;
  font-variant-ligatures:none;
}

#context a[content]:before {
  content:attr(content);
  opacity:.4;
  position:absolute;
  left:0;
  font-weight:bold;
}

#context a[content]:after {
  content:"";
  width:100%;
  position:absolute;
  bottom:-0.1em;
  left:0;
  position:absolute;
  height:.25em;
  background-color:rgba(255,255,255,.4);
}

#context time {
  margin-right:1rem;
  cursor:default;
  font-family:monospace;
  display:inline-block;
  font-weight:300;
  font-size:.85em;
  color:darkgray;
}

#context address + time {
  margin-left:3.5rem;
}

#context address + time, #context address + time + time {
  position:relative;
  top:-1.25rem;
}

header h1 {
  margin:0;
  padding:0;
}

#logo {
  display:inline-block;
  vertical-align:middle;
}

#logo b {
  display:block;
  padding:.5rem;
  position:absolute;
  font-size:1rem;
  top:-2rem;
  left:0;
}

#logo img {
  display:block;
  aspect-ratio:18/5;
  width:75vw;
  max-width:720px;
  height:auto;
  margin:auto;
}

#label {
display:block;
overflow:hidden;
position:absolute;
background:peru;
color:white;
box-sizing:border-box;
font-weight:500;
font-size:1.5rem;
top:0;
left:24%;
left:max(6%,calc(50% - 210px));
padding:.25rem .5rem;
border-radius:0 0 .5rem .5rem;
text-shadow:1px 1px 5px rgba(0,0,0,.5);
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
z-index:100;
}

#label:first-child  {
text-transform:uppercase;
font-weight:bold;
font-size:1.75rem;
padding:.25rem .75rem;
left:22%;
}

#lang {
  aspect-ratio:4/7;
  width:3rem;
  display:inline-block;
  vertical-align:bottom;
  padding:0;
  margin:6px;
  border-radius:3rem;
  font-style:normal;
  font-weight:300;
  font-size:2rem;
  background:rgba(255,255,255,.7);
  box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.5);
  line-height:1.33;
  margin-bottom:min(3vw,2.5rem)
}

#lang i {
padding:.5rem;
position:absolute;
top:0;
right:0;
font-size:1rem;
margin-top:-2rem;
mmargin-top:clamp(-2rem, calc(10000vw - 64000px), 0px);
}

#lang:before {
    margin-bottom:-0.5rem;
}

#lang:after, #lang:before {
  display:block;
  aspect-ratio:1;
  width:100%;
  border-radius:50%;
  color:steelblue;
}

#lang:lang(ro):after, #lang:lang(en):before {
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  background:steelblue;
  color:white;
}

#lang[data-before]:before {
    content:attr(data-before);
}

#lang[data-after]:after {
    content:attr(data-after);
}

#info {
  display:flex;
  align-items:center;
  justify-content: space-between;
  list-style: none;
  padding-left:0;
  padding-right:1rem;
  margin: 0 auto;
  overflow:hidden;
}

#info li {
  display:inline-block;
  padding:0;
  margin: 0;
}

#info img {
  display:inline-block;
  vertical-align:middle;
  margin:8px;
}

#info a {
  text-decoration:none;
  font-weight:300;
}



#bar {
  display:block;
  margin:0 auto;
  padding:0 .5rem;
  text-decoration:none;
  overflow-x:auto;
scroll-behavior:smooth;
scroll-snap-align:center;
scroll-snap-stop:always;
scroll-snap-type:x mandatory;
scroll-padding:0 50%;
scroll-padding-inline:100px;
white-space:nowrap;
max-width:50rem;
}

#bar li {display:inline-block;
padding:.5rem;
}

#bar li:has(a[property]) {
  background:steelblue;
  scroll-margin-inline: 20px;
}

#bar li:has(a[property]) a {
  color:white;
}