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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  scroll-behavior: smooth;
}

/* Bckground Image */

body {
  background-image: url("img/page-bg.png")
}

/* Importing Dosis Font*/

@font-face {
    font-family: 'dosissemibold';
    src: url('font/dosis-semibold-webfont.woff2') format('woff2'),
         url('font/dosis-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'dosisregular';
    src: url('font/dosis-regular-webfont.woff2') format('woff2'),
         url('font/dosis-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'dosislight';
    src: url('font/dosis-light-webfont.woff2') format('woff2'),
         url('font/dosis-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'dosisextralight';
    src: url('font/dosis-extralight-webfont.woff2') format('woff2'),
         url('font/dosis-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'dosisextrabold';
    src: url('font/dosis-extrabold-webfont.woff2') format('woff2'),
         url('font/dosis-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* Fonts and Font Sizes */

h1 {
  font-family: dosissemibold;
  font-size: 2.5em;
  padding: 8px 16px;
  color: #b33d43;
}

h2 {
  font-family: dosissemibold;
  font-size: 2em;
  padding: 8px 16px;
  color: #1f2022;
}

h3 {
  font-family: dosissemibold;
  font-size: 1.5em;
  padding: 16px 16px 8px;
  color: #1f2022;
}

p {
  font-family: dosisregular;
  font-size: 1em;
  line-height: 1.5em;
  padding: 0.1em 16px 16px;
  color: #1f2022;
}

a {
  font-family: dosissemibold;
  text-decoration: none;
  color: #1f2022;
}

a:hover {
  color: #b33d43;
  -webkit-transition: 0.3s;
}

.imgs {
  width: 100%;
}

.img-links {
  width: 100%;
}

.img-links-socmed {
  height: 50px;
}

/*------- ID's Anker ------- (used to be 120 & 80)*/
#home {
  scroll-margin-top: 0px;
}

#article01 {
  scroll-margin-top: 0px;
}

/*------- Header -------*/
.logo {
  height: 100%;
}

.logo:hover {
  opacity: 0.8;
}

header {
  position: fixed;
  z-index: 99;
  top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 65px;
  /*background: rgba(178,61,67,0.8);/* Hier kannst du die Hintergrundfarbe vom Header ändern*/ 
  background: rgba(230,187,145,1);
  border-bottom: double;
  border-bottom-color: #B23D43;
  padding: 2% 4%;
}

nav {
  width: 100%;
  top: 100%;
  padding: 0 10%;
  position: absolute;
  left: 0;
  background: rgba(230,187,145,1);
  display: none;
}

nav ul {
  list-style: none;
  padding: 24px 0;
}

nav li {
  text-align: center;
  text-transform: uppercase;
  padding: 6px 0;
}

/* Input Checkbox ausblenden & öffnen der Navigation */
.nav-toggle {
  display: none;
}

.nav-toggle:checked ~ nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Nav Toggle Label (Burger mit Span) */
.nav-toggle-label {
  position: absolute;
  right: 4%;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: black;
  height: 4px;
  width: 2em;
  border-radius: 2px;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: "";
  position: absolute;
}

.nav-toggle-label span::before {
  bottom: 7px;
}

.nav-toggle-label span::after {
  top: 7px;
}

/* Burger Animation Close */
.nav-toggle:checked ~ * span {
  background: transparent;
  transition: 200ms ease-in-out;
}

.nav-toggle:checked ~ * span::before {
  transform: rotate(45deg) translate(5px, 5px);
  -webkit-transform: rotate(45deg) translate(5px, 5px);
  -moz-transform: rotate(45deg) translate(5px, 5px);
  -ms-transform: rotate(45deg) translate(5px, 5px);
  -o-transform: rotate(45deg) translate(5px, 5px);
  transition: 400ms ease-in-out;
}

.nav-toggle:checked ~ * span::after {
  transform: rotate(-45deg) translate(5px, -5px);
  -webkit-transform: rotate(-45deg) translate(5px, -5px);
  -moz-transform: rotate(-45deg) translate(5px, -5px);
  -ms-transform: rotate(-45deg) translate(5px, -5px);
  -o-transform: rotate(-45deg) translate(5px, -5px);
  transition: 400ms ease-in-out;
}

/* Burger Animation Open */
.nav-toggle ~ * span {
  transition: 600ms ease-in-out;
}

.nav-toggle ~ * span::before {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transition: 400ms ease-in-out;
}

.nav-toggle ~ * span::after {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transition: 400ms ease-in-out;
}

/*------- Main ------- (margin used to be 200 auto 120)*/
main {
  width: clamp(300px, 80%, 1200px);
  margin: 150px auto 90px;
}

hr {
	width: 100%;
	border-top: 3px solid #b23d43;
	margin-bottom: 50px;
}


/*------- Nav Small ------- */
.nav-small {
    text-align: center;
    width: 100%;
}


/*------- Article -------*/
.article {
  padding_bottom: 10px;
}

.imgs {
  margin-bottom: 20px;
  align-self: center;
  max-height: 1000px;
  object-fit: contain;
}

.img-links {
  margin-bottom: 20px;
  align-self: center;
  max-height: 1000px;
  object-fit: contain;
}
  .img-links:hover {
	opacity: 0.8;
	-webkit-transition: .3s;
	-webkit-transform: scale(1.05);
}

.img-links-socmed {
  margin-bottom: 20px;
  margin-right: 10px;
  align-self: center;
  max-height: 1000px;
  object-fit: contain;
}
.img-links-socmed:hover {
	opacity: 0.8;
}


/*------- Section -------*/
section p {
  padding-bottom: 60px;
}

/*------- Footer -------*/
footer {
  width: 100%;
  height: 200px;
  background: #1f2022; /* Hier kannst du die Hintergrundfarbe vom Footer ändern */
  padding-top: 25px;
  text-align: center;
  color: #fff5e3;
  border-top: double;
  border-top-color: #b23d43;
}

footer p {
  color: #fff5e3;
  font-size: 1em;
}

footer a {
  color: #fff5e3;
  font-size: 1em;
}	

.small {
	font-weight:lighter;
	margin-bottom: 20px;
}


/*-------------- Media Queries --------------*/

/* Das hier macht die Seite responsive */

@media (min-width: 850px) {

  /* Hier kannst du die Textgrösse ändern (h1, h2, h3, p) */

  h1 {
    font-size: 4.5em;
    line-height: 1em;
  }

  h2 {
    font-size: 3em;
  }

  h3 {
    font-size: 2em;
  }

  p {
    font-size: 1.4em;
  }

  nav {
    position: static;
    background: none;
    display: block;
    text-align: right;
    padding: 0;
  }

  nav ul {
    padding: 0;
    width: 100%;
    text-align: right;
  }

  nav li {
    display: inline;
    padding: 0 8px;
  }

  .nav-toggle-label {
    display: none;
  }

  .galerie {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    gap: 20px;
    padding-right: 20px;
    padding-top: 20px;
  }

	
  .galerie-half {
	display: grid;
    grid-template-columns: 50% 50%;
    gap: 20px;
    padding-right: 20px;	
	}
	
  .about {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-column-gap: 20px;
    padding-right: 20px;  
	}

}

@media (min-width: 690px) {
  /*------- Header -------*/
  header {
    align-items: center;
    padding: 12px 36px;
  }

  .logo {
    padding: 0;
  }
}