@import "nunito.css";


* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}


html, body {
  height: 100vh;
  width: 100vw;
  margin: 0px;
  font-family: 'Nunito-ExtraLight', sans-serif;
  font-size: clamp(12px, 3vmin, 18px)
}

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

.bremen {
  width: 100svw;
  margin: auto;
  position: relative;
  height: 100svh;
  display: grid;
}

.hb1 {
  grid-template-columns: 1fr minmax(15em, 45em) minmax(15rem, 45rem) fr;
  grid-template-rows: 60px auto(repeat);
  align-items: center;
  grid-template-areas:
  "nav           nav            nav            nav"
  "hero-txt      hero-txt       hero-txt       ."
  ".             title          title          ."
  "index         index          index          index"
  ".             sec1-left      sec1-right     ."
  ".             sec2-left      sec2-right     ."
  ".             sec3-left      sec3-right     ."
  ".             sec4-left      sec4-right     ."
  ".             sec5-left      sec5-right     ."
  ".             sec6-left      sec6-right     ."
  ".             sec7-left      sec7-right     ."
  ".             sec8-left      sec8-right     ."
  "footer-txt    footer-txt     footer-txt     footer-txt"
  "footer-links  footer-links   footer-links   footer-links";
}

.hb2 {
  grid-template-columns: 1vw 1vw 1minmax(15rem, 45rem) 1vw;
  grid-template-rows: 60px auto(repeat);
  align-items: center;
  grid-template-areas:
  "nav           nav            nav            nav"
  ".             title          title          ."
  ".             sec1           sec1           ."
  ".             sec2           sec2           ."
  ".             sec3           sec3           ."
  "footer-txt    footer-txt     footer-txt     footer-txt"
  "footer-links  footer-links   footer-links   footer-links";
}

.hero-image {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
  padding: 0rem;
  position: relative;
}
  
.hero-image img {
  display: block;
  width: 100svw;
  max-height: 100svw;
  margin-left: auto;
  margin-right: auto;
  object-fit: cover;
}  
  
.hero-overlay {
  grid-area: hero-txt;
  position: absolute;
  top: 10svh;
  left: 10svw;
  color: white;
  font-family: 'Nunito-ExtraLight', sans-serif;
  font-size: calc(11px + 2vw);
  font-weight: bold;
  text-align: left;
}

.more p {
  font-size: 40%;
}

.more {
  background-color: transparent;
  border: 1px solid white;
  border-style: solid;
  border-radius: 15px;
  color: white;
  padding: 4px 8px;
  text-align: center;
  text-decoration: none;
  font-family: 'Nunito-ExtraLight', sans-serif;
  font-weight: normal;
  font-size: 40%;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
}
  
.title {
  grid-area: title;
  position: relative;
  justify-self: center;
  text-align: center;
  max-width: 45em;
  padding-left: 2vw;
  padding-right: 2vw;
}

.index {
  grid-area: index;
  position: relative;
  justify-self: center;
  padding-left: 2vw;
  padding-right: 2vw;
}

.index p {
  text-align: center;
}

.sec1 {
  grid-area: sec1;
  width: minmax(15em, 45em);
  padding: 1rem;
  position: relative;
  justify-self: center;
}

.sec2 {
  grid-area: sec2;
  width: minmax(15em, 45em);
  padding: 1rem;
  position: relative;
  justify-self: end;
}

.sec3 {
  grid-area: sec3;
  width: minmax(15em, 45em);
  padding: 1rem;
  position: relative;
  justify-self: end;
}

.alt1-text {
  grid-area: sec1-right;
  padding: 1rem;
  position: relative;
  justify-self: left;
}

.alt1-image {
  grid-area: sec1-left;
  padding: 1rem;
  justify-self: right;
}

.alt2-text {
  grid-area: sec2-left;
  padding: 1rem;
  justify-self: right;
}

.alt2-image {
  grid-area: sec2-right;
  padding: 1rem;
  position: relative;
  justify-self: left;
}

.alt3-text {
  grid-area: sec3-right;
  padding: 1rem;
  position: relative;
  justify-self: left;
}

.alt3-image {
  grid-area: sec3-left;
  padding: 1rem;
  position: relative;
  justify-self: right;
}

.alt4-text {
  grid-area: sec4-left;
  padding: 1rem;
  position: relative;
  justify-self: right;
}

.alt4-image {
  grid-area: sec4-right;
  padding: 1rem;
  position: relative;
  justify-self: left;
}

.alt5-text {
  grid-area: sec5-right;
  padding: 1rem;
  position: relative;
  justify-self: left;
}

.alt5-image {
  grid-area: sec5-left;
  padding: 1rem;
  position: relative;
  justify-self: right;
}

.alt6-text {
  grid-area: sec6-left;
  padding: 1rem;
  position: relative;
  justify-self: right;
}

.alt6-image {
  grid-area: sec6-right;
  padding: 1rem;
  position: relative;
  justify-self: left;
}

.alt7-text {
  grid-area: sec7-right;
  padding: 1rem;
  position: relative;
  justify-self: left;
}

.alt7-image {
  grid-area: sec7-left;
  padding: 1rem;
  position: relative;
  justify-self: right;
}

.alt8-text {
  grid-area: sec8-left;
  padding: 1rem;
  position: relative;
  justify-self: right;
}

.alt8-image {
  grid-area: sec8-right;
  padding: 1rem;
  position: relative;
  justify-self: left;
}

.alt1-image img, .alt2-image img, .alt3-image img, .alt4-image img, .alt5-image img, .alt6-image img, .alt7-image img, .alt8-image img {
  display: block;
  max-width: 100%;
  height: 100%;
  max-height: 80svh;
}

.alt1-image, .alt2-image, .alt3-image, img {
  align-self: start
}

.alt1-text h2, .alt3-text h2, .alt5-text h2, .alt7-text h2 {
  text-align: left;
}

.alt2-text h2, .alt4-text h2, .alt6-text h2, .alt8-text h2, .alt8-text p {
  text-align: right;
}

.alt1-text p, .alt2-text p, .alt3-text p, .alt4-text p, .alt5-text p, .alt6-text p, .alt7-text p {
  text-align: justify;
}

* p, h1, h2, h3, ul {
  margin-bottom: 1.5vh;
  padding-right: 1.5vw;
}

* h1 {
  font-size: 220%;
  text-align: center;
}

* h2 {
  font-size: 175%;
}

* h3 {
  font-size: 125%;
}

* p, ul {
  font-size: 100%;
  hyphens: none;
}

.hb1-footer {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 13;
  grid-row-end: 15;
  background-color: #353C40;
  height: 100%;
  width: 100vw;
}

.hb2-footer {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 6;
  grid-row-end: 8;
  background-color: #353C40;
  height: 100%;
  width: 100vw;
}

.footer-txt {
  grid-area: footer-txt;
  justify-self: center;
  z-index: 1;
  padding-top: 1vh;
}

.footer-txt p {
  color: white;
  text-align: center;
}

.footer-links {
  grid-area: footer-links;
  justify-self: center;
  color: white;
  z-index: 1;
  padding-bottom: 1vh;
  text-align: center;
}

.footer-links, .footer-txt, p {
  font-weight: normal;
}

.footer-icon {
  display: inline-block;
  margin-top: 5px;
  width: 40px;
  height: 40px;
  background-color: white;
}
   
.footer-icon img {
  width: 40px;
  height: 40px;
  background-color: white;
}

.menu-item {
  display: inline-block;
  text-align: center;
  font-weight: normal;
  font-size: clamp(16px, 4vmin, 24px);
  margin: 2vh 2vw;
  cursor: pointer;
}

.footer-txt, .footer-links a {
  font-size: 80%;
}

* ul {
  padding-left: 1.5rem;
  list-style-position: outside;
}

* ul ul {
  padding-left: 2.5rem;
  list-style-position: outside;
}
  
.la {
  list-style-type: lower-alpha;
}

.link-list {
  line-height: 2.5;
}

.link-list {
  line-height: 2.5;
}

.text ul {
  padding-left: 2vw;
  color: black;
}


.table {
  border-collapse: collapse;
}

tr:nth-child(1), tr:nth-child(3), tr:nth-child(7), tr:nth-child(11) {
  border-bottom: solid 2px black;
}


/* navigation */

.hamburger {
  display: none;
}

.nav {
  grid-area: nav;
  align-self: start;
  justify-self: right;
  z-index: 1;
}

.menu-item.lowkey {
  color: white;
}

.menu-item.highkey {
  color: black;
}