/* root element adjustments */
:root {

}

/* reset all styles from default browser preferences */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    background-repeat: no-repeat;
    /*scroll-margin-top:var(--space-m)*/
}

/* html element */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  height:100%
}

body{
  background-color: rgba(240, 238, 233,1);
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
}

/* webfont declaration  */
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/Bitter-VariableFont_wght.ttf') format(''); }
@font-face { font-family: 'Bitter'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/Bitter-Italic-VariableFont_wght.ttf') format(''); }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Bitter-VariableFont_wght.ttf') format(''); }
@font-face { font-family: 'Bitter'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/Bitter-Italic-VariableFont_wght.ttf') format(''); }
/* textstyles */
p{
  font-family: 'Bitter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
}
p i{
  font-family: 'Bitter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
}
p b{
  font-family: 'Bitter', sans-serif;
  font-weight: 500;
  font-size: 1rem;
}
p b i{
  font-family: 'Bitter', sans-serif;
  font-weight: 500;
  font-size: 1rem;
}
h1{
  font-family: 'Bitter', sans-serif;
  font-weight: 500;
  font-size: 1.75rem;
}
h2{
  font-family: 'Bitter', sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
}
h3{
  font-family: 'Bitter', sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
}
h4{
  font-family: 'Bitter', sans-serif;
  font-weight: 500;
  font-size: 1rem;
}
a {
  font-family: 'Bitter', sans-serif;
  font-weight: 500;
  font-size: inherit;
  text-decoration: none;
  -webkit-transition: color ease-in-out 200ms;
  transition: color ease-in-out 200ms;
  color: rgba(0,0,0,1);
}
a:hover{
  color: rgba(0,0,0,0.5);
}

/* header */
.main-header{
  display:inline-flex;
  position:relative;
  width:100%;
  height:12rem;
}
.logo{
  position: relative;
  display: inline-block;
  width:100%;
  height: 10rem;
  margin-top:1rem;
  margin-bottom: 1rem;
  padding:0;
}
.logo a{
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:10rem;
}
.logo img{
  width: auto;
  height: 100%;
}

/* navigation */
nav.main {
  container-name: main-nav;
  display:inline-flex;
  position:relative;
  width:100vw;
  height:3rem;
}
.main-nav {
  display: inline-flex;
  width:100%;
  line-height:1.2;
  justify-content: center;
  align-items: center;
}
ul.main-nav>li{
  list-style-type: none;
}
ul.main-nav>li a{
  position:relative;
  display: inline-block;
  font-family: 'Bitter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
  width:100%;
  font-size: 1rem;
  margin-bottom:1rem;
  text-decoration: none;
  -webkit-transition: all ease-in-out 200ms;
  transition: all ease-in-out 200ms;
  color: rgba(0,0,0,1);
  padding-left:2rem;
}
ul.main-nav>li a:hover, .main-nav-footer a:hover{
  text-decoration: none;
  color: rgba(122, 121, 119, 1);
}

/* content */
#content{
  container-name: main;
  min-inline-size: 72%;
  min-height: 50vh;
  display: flex;
  width:100%;
  flex-direction: column;
  justify-content: space-between;
  margin-inline: auto;
  container-type: inline-size;  
  margin-bottom:2rem;
}
#content>*{
  padding-left:2rem;
  padding-right: 2rem;
}
.news-item{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:100%;
  margin-bottom:2rem;
}
img.news-image{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:75%;
  margin-top:2rem;
}
img.news-image-s{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:50%;
  margin-top:2rem;
}
img.news-image-xs{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:25%;
  margin-top:2rem;
}

.main-footer{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:100%;
  margin-bottom:2rem;
}
.main-footer a{
  position:relative;
  display: inline-flex;
  font-family: 'Bitter', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  text-align: left;
  font-size: 0.75rem;
  text-decoration: none;
  -webkit-transition: color ease-in-out 200ms;
  transition: color ease-in-out 200ms;
  color: rgba(0,0,0,1);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.main-footer a:hover{
  color: rgba(122, 121, 119, 1);
}
.main-footer p{
  position:relative;
  display: inline-flex;
  text-align: left;
  font-size: 0.75rem;
  color: rgba(0,0,0,1);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

/* container in fullwidth > portrait */
@container main-nav (min-width: 100vw) {
}
/*container as sidebar */
@container main-nav (max-width: 99vw) {
}
/*container in fullwidth > portrait */
@container main (min-width: 100vw) {
}
/*container */
@container main (max-width: 99vw) {

}