:root {
  --theme: #cba4a4;
  --hoverTheme: #65b0b7;
}

header {
  display: flex;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #e4d7d7;
    background-color: rgb(21, 20, 20);
  }

  ul li a {
    color: #000000;

  }

  header h1 {
    color: #000000;
  }

  .theme {
    background-color: #b58585;
  }

  .centered {
    color: black;
    font-size: medium;
    text-shadow:
      0 0 5px #ffff,
      0 0 10px #ffff,
      0 0 20px #ffff,
      0 0 40px #ffff,
      0 0 80px #ffff;
  }

}

@media (prefers-color-scheme: light) {
  body {
    color: black;
    background-color: white;
  }

  header div h1 {
    color: white;
  }

  .theme {
    background-color: #d3b4b4;
  }
}

@media only screen and (min-width: 600px) {

  a {
    display: inline-block;
  }

  header div h1 {
    padding-top: 1em;
  }

  .page_container {
    margin-left: 3em;
  }

  .headerimg,
  .house {
    height: 20vh;
    width: 25vw;
    position: absolute;
    top: 12px;
    left: 0;
  }

  .headerimg:hover {
    height: 10vh;
    width: 15vw;
  }

  .house {
    height: auto;
    width: 8vw;
    border-radius: 0;
    top: 15px;
    left: 20px;
  }

  .house:hover {
    height: auto;
    width: 40vw;
  }

  .footerimg {
    height: 10vh;
    width: 10vw;
    right: 0;
  }

  .page_container {
    display: grid;
    grid-template-columns: 26vw 26vw 35vw;
    row-gap: 1em;
    grid-template-areas:
      "groundFloor groundFloor groundFloor"
      "img1 text1 text1"
      "img2 text2 text2"
      "img3 img4 text3"
      "img5 text4 ."
      "firstFloor firstFloor firstFloor"
      "imgFirstFloor imgFirstFloor imgFirstFloor"
      "text5 text5 text5"
      "secondFloor secondFloor secondFloor"
      "imgSecondFloor imgSecondFloor imgSecondFloor"
      "text6 text6 text6";
  }

  .img1 {
    grid-area: img1;
  }

  .text1 {
    grid-area: text1;
  }

  .img2 {
    grid-area: img2;
  }

  .text2 {
    grid-area: text2;
  }

  .img3 {
    grid-area: img3;
  }

  .img4 {
    grid-area: img4;
  }

  .text3 {
    grid-area: text3;
  }

  .img5 {
    grid-area: img5;
  }

  .text4 {
    grid-area: text4;
  }

  .firstFloor {
    grid-area: firstFloor;

  }

  .imgFirstFloor::-webkit-scrollbar {
    display: none;
  }


  .imgFirstFloor::scroll-button(right),
  .imgFirstFloor::scroll-button(left) {
    content: '>';
    color: white;
    border: none;
    background-color: rgb(202, 148, 148);
    height: 60px;
    width: 60px;
    border-radius: 50%;
    padding-bottom: .1em;
    position: fixed;
    position-anchor: --carousel;
    position-area: right center;
    translate: -50%
  }

  .imgFirstFloor::scroll-button(left) {
    content: '<';
    position-area: left center;
    translate: 40%;
  }

  .imgFirstFloor::scroll-button(right):disabled,
  .imgFirstFloor::scroll-button(left):disabled {
    opacity: 20%;
    cursor: auto;
  }

  .hostimg {
    height: 90vh;
    width: auto;
    border-radius: 0;
    justify-content: center;
    margin: 5vh 0 5px;
  }

  .hostLivingroom {
    margin-top: 10vh;
  }

  img {
    width: 20vw;
    height: 20vw;
    margin-right: 1em;
    border-radius: 1em;
  }
  .hostLivingroom {
  height: auto;
  width: 50vw;}
  .imgSecondFloor{
    margin-left: 15%;
  }
}


#menu-icon {
  display: none;
  background: var(--theme) url(http://treehouse-blog.s3.amazonaws.com/Respond-Menu/img/menu-icon.png) no-repeat center;
}

a:hover#menu-icon {
  background-color: var(--hoverTheme);
  border-radius: 4px 4px 0 0;
}

@media only screen and (max-width: 600px) {
  header div h1 {
    padding-top: 0.5em;
  }

  nav {
    width: fit-content;
  }

  #menu-icon {
    display: inline-block;
  }

  nav ul,
  nav:active ul {
    display: none;
    /* position: absolute; */
    padding: 10px;
    background: var(--theme);
    border: 2px solid #444;
    top: 60px;
    width: 50%;
    border-radius: 4px 0 4px 4px;
  }

  nav li {
    text-align: center;
    width: 100%;
    padding: 10px;
    margin: 0;
  }

  nav:hover ul {
    display: block;
  }

  h4 {
    font-size: 1.2em;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  p {
    font-size: 1em;
  }

  .imgFirstFloor {
    scroll-snap-type: x mandatory;
  }

  .picture {
    flex: 0 0 100%;
  }

  .headerimg,
  .footerimg,
  .img1,
  .hostimg,
  .house,
  .impressumFoto {
    visibility: hidden;
    width: 0.1vw;
    height: 0.1vh;
  }

  .hostLivingroom {
    margin: 2vh;
  }

  img,
  .picture {
    width: 40vw;
    height: 40vw;
    margin-right: 1em;
  }

  .hostLivingroom {
    width: 80vw;
    height:auto;
  }
  .imgSecondFloor{
    margin-left:0;
  }
}

body {
  margin: 0px 0px 0px 0px;
  font-family: 'Reddit Sans';
}

#nav-wrapper {
  background: var(--theme);
  width: 100%;
}

#nav-wrapper:hover {
  background: var(--hoverTheme);
}

header nav ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

nav ul li {
  display: inline-block;
}

nav ul a {
  text-decoration: none;
}

nav ul a:hover {
  text-decoration: underline;
}

main h1 {
  text-align: center;
}

a {
  padding: 1.5em 1.5em;
  color: rgb(255, 255, 255);
}

header div h1 {
  margin-top: 0;
  text-align: center;
}

footer {
  display: flex;
  justify-content: space-between;
  background-color: grey;
}


h2 {
  text-align: center;
}


.groundFloor {
  grid-area: groundFloor;
  text-align: center;

}

.imgFirstFloor {
  grid-area: imgFirstFloor;
  width: 100%;
  overflow-x: auto;
  margin: 3em auto;
  display: flex;
  gap: 1em;
  scroll-behavior: smooth;
  anchor-name: --carousel;
}

.picture {
  scroll-snap-align: start;
  flex: 0 0 20vw;
  padding: 1em;
  border-radius: 2em;
  align-content: center;
}

.text5,
.text6 {
  grid-area: text5;
  max-width: 100ch;
  justify-self: center;
  margin-top: 0;
}


.secondFloor {
  grid-area: secondFloor;
}

.imgSecondFloor {
  grid-area: imgSecondFloor;
}

.text6 {
  grid-area: text6;
  margin-bottom: 3vh;
}

form {
  display: grid;
  grid-template-columns: [labels] 20vh [controls] 20vh;
  grid-gap: 15px;
}

form>fieldset {
  grid-column: span 3;
}

.button {
  margin-top: 15px;
  width: fit-content;
  height: fit-content;
}

.sideinfo {
  font-size: small;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 3em;
  margin-left: 2vw;
}

section li {
  max-width: 60ch;
}

p {
  max-width: 60ch;
}

#name,
#contact {
  font-weight: bold;
}

.impressum {
  font-size: 1.5rem;
  margin: 24px;
}

.impressumFoto {
  height: 73vh;
  width: 25vw;
  margin-top: 30px;
}

.hostLivingroom {
  border-radius: 0;
}

.winter {
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
  display: block;
}

.container {
  position: relative;
  text-align: center;
  margin-bottom: 10vh;
}

.centered,
.activity {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.activity {
  color: white;
  text-shadow:
    0 0 5px #000,
    0 0 10px #000,
    0 0 20px #000,
    0 0 40px #000,
    0 0 80px #000;
}

.margin {
  margin: 0 24px 10vh;
}