:root {
    --color-1: #F2EFDC;
    --color-2: #101010;
    --color-3: #202020;
    --color-4: #000;
    --color-5: #000;
    --color-6: #858aa1;
    --page-color-transition: background .2s ease, color .2s ease;
    --margin-l: 0;
  }
  
  [data-theme="dark"] {
    --color-1: #0e0e0d;
    --color-2: #F2EFDC;
    --color-3: #b8b6a7;
    --color-4: #000;
    --color-5: #000;
    --color-6: #b0918a;
    --margin-l: calc(100% - 5vh);
  }

body {
    background-color: var(--color-2);
    margin: 0;
    height: 110vh;
    transition: all 0.2s;
}

nav {
    position: fixed;
    width: 100vw;
    height: 10vh;
    background-color: var(--color-3);
    margin: 0;
    top: 0;
    transition: all 0.2s;
}
a {
    display: block;
    height: 10vh;
    transition: all 0.2s;
}
nav .themebutton {
    background-color: var(--color-2);
    border-radius: 100px;
    width: calc(10vh + 2px * 2);
    height: calc(5vh + 2px * 2);
    margin-top: calc(5vh / 2 - 2px);
    float: right;
    margin-right: calc(5vh / 2 - 2px);
}
nav a sliderback{
    border-radius: 100px;
    width: 10vh;
    height: 5vh;
    margin: auto;
    margin-top: 2px;
    display: block;
}

nav a sliderback slider {
    background-color: black;
    height: 100%;
    aspect-ratio: 1/1;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    border-radius: 100px;
    transition: all 0.2s;
    margin-left: 0;
}

nav a .lightslider {
    margin-left: calc(100% - 5vh);
}

nav .menubutton {
  height: 10vh;
  aspect-ratio: 1/1;
  float: left;
  margin-right: 5vw;
  cursor: pointer;
  transition: margin-left 1.5s;
  position: fixed;
}

nav .menu {
  width: 40vw;
  left: calc(-40vw - 2px);
  height: 100vh;
  background-color: var(--color-3);
  position: fixed;
  transition: all 0.2s;
  transition: left 1.5s;
  border-right: 2px solid var(--color-2);
}

nav .buttonmenu {
  width: 90%;
  margin: auto;
  margin-top: 2vw;
  margin-bottom: 2vw;
  background-color: var(--color-2);
  border-radius: 25px;
  height: 7vh;
  text-decoration: none;
}


.buttonmenu .buttontext {
  text-align: center;
  line-height: 7vh;
  color: var(--color-1);
  font-family: Verdana;
  text-decoration: none;
  display: block;
  position: relative;
  bottom: 7vh;
}
.menu h1 {
  margin-bottom: 1vh;
  margin-top: 1vh;
}
.buttonmenu .logodiv {
  aspect-ratio: 1/1;
  height: 7vh;
}

hr {
  border-color: var(--color-2);
  border-style: solid;
  color: var(--color-2);
} 

.triangle {
  height: 0;
  border: 3vh solid rgba(0, 0, 0, 0);
  border-top-width: 0;
  top: .5vh;
  left: .5vh;
  border-bottom-color: var(--color-6);
  position: relative;
  aspect-ratio: 1/1;
}
.housebase {
  height: 3vh;
  margin: auto;
  aspect-ratio: 1/1;
  border-radius: 2px;
  top: calc(0.5vh + 3vh / 2);
  background-color: var(--color-6);
}

@keyframes housedooropen {
  0% {width: 0; right: .75vh}
  100% {width: .75vh; right: 0;}
}
@keyframes housedoorclose {
  100% {width: 0; right: .75vh}
  0% {width: .75vh; right: 0;}
}

.housedoor {
  margin: auto;
  height: 1.5vh;
  width: 0;
  right: calc(1vh / 2);
  border-radius: 1px;
  top: -1.5vh;
  background-color: var(--color-2);
  position: relative;
  transition: right ease-in-out .75s, width ease-in-out .75s;
}

.filter {
  position: fixed;
  width: 200vw;
  height: 200vh;
  margin: 0;
  background-color: rgba(0, 0, 0, 0);
}

.curvedline {
height: 4%;
width: 60%;
border-radius: 50%/100px 100px 0 0;
background-color: var(--color-6);
position: relative;
}

h1 {
    color: var(--color-1);
    text-align: center;
    margin: auto;
    display: block;
    font-family: Verdana;
    font-size: 5vh;
    transition: all 0.2s;
    padding-left: 5vw;
    padding-right: 5vw;
    margin-bottom: 15vh;
}

h2 {
  color: var(--color-1);
    text-align: center;
    margin: auto;
    display: block;
    font-family: Verdana;
    font-size: 4vh;
    transition: all 0.2s;
    padding-left: 5vw;
    padding-right: 5vw;
    margin-bottom: 15vh;
}

p {
  color: var(--color-1);
  text-align: center;
  margin: auto;
  display: block;
  font-family: Verdana;
  font-size: 1.5vw;
  transition: all 0.2s;
  padding-left: 5vw;
  padding-right: 5vw;
  text-wrap:balance;
}

nav a sliderback slider {
  background: var(--color-3);
    transition: all 0.2s ease-in-out, var(--page-color-transition);
    margin-left: var(--margin-l);
}
nav a sliderback {
    background-color: var(--color-2);
    transition: transform 0.2s ease-in-out, var(--page-color-transition);
    cursor: pointer;
}

#darkmode {
  width: 5vh;
  height: 5vh;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.darkmode_icon {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--color-6);
  transform-origin: center center;
  transition: transform 0.75s ease-in-out, var(--page-color-transition);
}

.darkmode_icon::after {
  position: absolute;
  content: '';
  width: 16px;
  height: 16px;
  left: 8px;
  bottom: 4px;
  border-radius: 10px;
  background: var(--color-3);
  transform-origin: center center;
  transition: transform 0.5s ease, left 0.25s ease, bottom 0.25s ease, var(--page-color-transition);
}

.darkmode_icon .ray {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: var(--color-6);
  transform-origin: center;
  transition: transform 0.5s ease-in-out, var(--page-color-transition);
}

.ray:nth-child(1) {
  transform: rotate(45deg) translateX(0);
}
.ray:nth-child(2) {
  transform: rotate(90deg) translateX(0);
}
.ray:nth-child(3) {
  transform: rotate(135deg) translateX(0);
}
.ray:nth-child(4) {
  transform: rotate(180deg) translateX(0);
}
.ray:nth-child(5) {
  transform: rotate(225deg) translateX(0);
}
.ray:nth-child(6) {
  transform: rotate(270deg) translateX(0);
}
.ray:nth-child(7) {
  transform: rotate(315deg) translateX(0);
}
.ray:nth-child(8) {
  transform: rotate(360deg) translateX(0);
}

[data-theme="dark"] {
  & .darkmode_icon {
    transform: scale(0.6);
  }
  & .darkmode_icon::after {
    left: 15px;
    bottom: 8px;
    transform: scale(0);
  }
  & .ray:nth-child(1) {
    transform: rotate(45deg) translateX(-16px);
  }
  & .ray:nth-child(2) {
    transform: rotate(90deg) translateX(-16px);
  }
  & .ray:nth-child(3) {
    transform: rotate(135deg) translateX(-16px);
  }
  & .ray:nth-child(4) {
    transform: rotate(180deg) translateX(-16px);
  }
  & .ray:nth-child(5) {
    transform: rotate(225deg) translateX(-16px);
  }
  & .ray:nth-child(6) {
    transform: rotate(270deg) translateX(-16px);
  }
  & .ray:nth-child(7) {
    transform: rotate(315deg) translateX(-16px);
  }
  & .ray:nth-child(8) {
    transform: rotate(360deg) translateX(-16px);
  }
}

@keyframes menutox_top {
  0% {rotate: 0deg; top: calc(30% - 4%);}
  33% {rotate: 0deg;}
  66% {top: calc(50% - 2.5%); right:0}
  100% {rotate: -45deg;top: calc(50% - 2.5%); right:2.5%}
}

@keyframes menutox_mid {
  0% {rotate: 0deg; top:calc(50% - 4%); width: 60%;}
  33% {rotate: 0deg; top:calc(50% - 4%); width: 1%;}
  66% {rotate: 45deg; top:calc(50% - 4%); width: 60%;}
  100% {rotate: 45deg;}
}

@keyframes menutox_bot {
  0% {rotate: 0deg; top: calc(70% - 4%);}
  33% {rotate: 0deg;}
  66% {top: calc(50% - 2.5%);left: 0;}
  100% {rotate: -45deg;top: calc(50% - 2.5%);left: 2.5%;}
}
@keyframes xtomenu_top {
  100% {rotate: 0deg; top: calc(30% - 4%);}
  66% {rotate: 0deg;}
  33% {top: calc(50% - 2.5%); right:0}
  0% {rotate: -45deg;top: calc(50% - 2.5%); right:2.5%}
}

@keyframes xtomenu_mid {
  100% {rotate: 0deg; top:calc(50% - 4%); width: 60%;}
  66% {rotate: 0deg; top:calc(50% - 4%); width: 1%;}
  33% {rotate: 45deg; top:calc(50% - 4%); width: 60%;}
  0% {rotate: 45deg;}
}

@keyframes xtomenu_bot {
  100% {rotate: 0deg; top: calc(70% - 4%);}
  66% {rotate: 0deg;}
  33% {top: calc(50% - 2.5%);left: 0;}
  0% {rotate: -45deg;top: calc(50% - 2.5%);left: 2.5%;}
}

.middleline {
  margin: auto;
}
.topline {
  top: calc(30% - 4%);
  rotate: 0deg;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(1,0,0,1);
  animation-play-state: paused;
  animation-direction: normal;
  animation-duration: 1.5s;
  animation-name: menutox_top;
}
.midline {
  top: calc(50% - 4%);
  rotate: 0deg;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(1,0,0,1);
  animation-play-state: paused;
  animation-direction: normal;
  animation-duration: 1.5s;
  animation-name: menutox_mid;
}
.botline {
  top: calc(70% - 4%);
  rotate: 0deg;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(1,0,0,1);
  animation-play-state: paused;
  animation-direction: normal;
  animation-duration: 1.5s;
  animation-name: menutox_bot;
}