:root {
  --fontcolor: rgb(54, 53, 53);
  --bgcolor: white;
  --fontcolor: black;
  --fokus: #ff5722;
  --grey: lightgrey;
  --check:  #ff5722;
  
  --headerfont: 1.7rem;
  --fokusfont: 1.3rem;
  --navfont: 1rem;
  --readingfont: 1.2rem;
  --footerfont: 0.6rem;
}

* {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--bgcolor);
  color: var(--fontcolor);
  margin: 0px;
  padding: 0px;
}

.main {
  display: flex;  
  flex-flow: row wrap;
}

.main > * {
  flex: 1 100%;
}

a {
  text-decoration: none;
  color: var(--fontcolor);
}
  
a:visited {
  text-decoration: none;
  color: var(--fontcolor);
}

a:hover {
  text-decoration: none;
  color: var(--check);
}

a.reg {
  text-decoration: none;
  color: var(--check);
}
ul {
  padding: 0px;
  margin: 0px;
}

ul.a {
  margin-left: 2rem;
}
  
li {
  list-style: none;
}

li.a {
  list-style: disc;
}

img.logo {
  display: inline-block;
  text-align: left;
  height: 200px;
}

img.hero {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

img.title {
  display: block;
  margin-right: 2rem;
  height: 450px;
  width: auto;
}

img.sticker {
display: flex;
  height: 100px;
  margin: 0.5rem;  
}

img.sticker2 {
  height: 40px;
  margin: 0.5rem;  
}


.stickers {
  display: inline-flex;
  flex-wrap: row wrap;
  align-items: center;
  
}

.media-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.media-row .caption {
  text-align: left;
  font-size: var(--headerfont);
  line-height: 1;
  display: inline-block;
  margin-top: 35px;
}

.header {
  display: flex;
  justify-content: center;
  height: 200px;
  align-items: center;
}

.subheader {
  font-size: var(--headerfont);
  margin: 0px;
  padding-bottom: 0%;
}

.fokus {
  font-size: var(--fokusfont);
  color: var(--fokus);  
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-align: right;
  padding-bottom: 1rem;
}

.menu-items {
  display: flex;
  margin: 1rem;
}

.menu-items li {
  font-size: var(--navfont);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.menu-item-active {
  color: var(--check);
}

.hours {
  margin: 0px;
  padding: 0px;
  font-size: var(--headerfont);  
}

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin-left: 1rem;
  margin-right: 1rem;
}

.content div {
  width: fit-content;
  font-size: var(--readingfont);
  max-width: 850px;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: fit-content;
  padding-top: 1rem;
}

.footer div {
  text-align: center;  
  font-size: var(--footerfont);
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    width: 100%;
  }
}