html{
    height: 100%;
    font-family: sans-serif;
    display:grid;
    align-items:center;
    justify-items:center;
  
    
    --bg: #FFF4E3;
    --bg-box: #FFCDAB;
    --color-headings:#3F3B3B;
    --color-text: #575151;
    --color-lill: #807777;
    --color-eye:#24543C;
  }
html[data-theme="dark"]{
    --bg: #575151;
    --bg-box: #3F3B3B;
    --color-headings:#FFFFFF;
    --color-text: #FFF4E3;
    --color-lill: #FFFFFF;
    --color-eye:#BADA55;
}
  body {
    background-color: var(--bg);
    }
.grid{
  display:grid;
    grid-template-columns: 40% 5% auto;
    grid-template-rows:auto auto;
    grid-template-areas:
    "text-area  text-area text-area"
    "lill container container "
  }
.container{
  grid-area:container;
  background-color:var(--bg-box);
  margin:1em 1em;
  padding:2em;
  border-radius: 15px;
  display:grid;
}
.text-area{
  grid-area:text-area;
  justify-self:center;
}
.toggle-container{
  grid-area:switch;
}
h1{
  font-size: 2.4em;
  color:var(--color-headings);
}

#citat{
  position: relative;
  font-size: 1em;
}
#citat::before{
  position: absolute;
  left: -0.6em;
  content: open-quote;
  font-size: 2em;
  margin-bottom: 0;
}
#citat::after{
  position: absolute;
  right: 0.8em;
  
  content: close-quote;
  
  font-size: 2em;
}
h2, h3, p{
  color: var(--color-text);
  line-height: 1.4em;
}
input[type=checkbox]{
  height:0;
  width:0;
  visibility:hidden;
}
label{
  cursor:pointer;
  text-indent:-9999px; /* need label for screenreaders*/
  width:54px;
  height:27px;
  background:grey;
  float:left;
  border-radius:100px;
  position:relative;
}
label:after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  background:var(--color-eye);
  border-radius:90px;
  transition: 0.3s;
}
input:checked + label{
  background: var(--color-text);
}
input:checked + label:after{
  left: calc(100% - 5px);
  transform:translateX(-100%);
}
label:active:after{
  width:45px;
}
 #lill{
   display:grid;
   grid-area:lill;
   margin-right:3em;
   
  }
  #lill path:nth-child(3){
    stroke-dasharray:499px;
    stroke-dashoffset:499px;
    animation:line 2s ease forwards;
  }
  #lill path:nth-child(4){
    stroke-dasharray:204px;
    stroke-dashoffset:204px;
    animation:line 2s ease forwards 0.5s;
  }
  #lill path:nth-child(5){
    stroke-dasharray:115px;
    stroke-dashoffset:115px;
    animation:line 2s ease forwards 0.5s;
  }
 #lill path:nth-child(6){
    stroke-dasharray:171px;
    stroke-dashoffset:171px;
    animation:line 2s ease forwards 0.8s;
  }
  #lill path:nth-child(7){
    stroke-dasharray:155px;
    stroke-dashoffset:155px;
    animation:line 2s ease forwards 1.1s;
  }
  #lill path:nth-child(8){
    stroke-dasharray:85px;
    stroke-dashoffset:85px;
    animation:line 2s ease forwards 1.1s;
  }
 #lill path:nth-child(9){
    stroke-dasharray:296px;
    stroke-dashoffset:296px;
    animation:line 2s ease forwards 1.1s;
  }
#lill path:nth-child(10){
    stroke-dasharray:139px;
    stroke-dashoffset:139px;
    animation:line 2s ease forwards 2s;
  }
  #lill path:nth-child(11){
    stroke-dasharray:111px;
    stroke-dashoffset:111px;
    animation:line 2s ease forwards 2s;
  }
    #lill path:nth-child(12){
    stroke-dasharray:971px;
    stroke-dashoffset:971px;
    animation:line 2s ease forwards 2.2s;
  }
  #lill path:nth-child(13){
    stroke-dasharray:676px;
    stroke-dashoffset:676px;
    animation:line 2s ease forwards 2.2s;
  }
  #lill path:nth-child(14){
    stroke-dasharray:666px;
    stroke-dashoffset:666px;
    animation:line 2s ease forwards 2.4s;
  }
  #lill path:nth-child(15){
    stroke-dasharray:662px;
    stroke-dashoffset:662px;
    animation:line 2s ease forwards 2.4s;
  }
  .eye{
    animation:color 1s forwards 4s;

    
  }

  @keyframes line{
    to{
      stroke-dashoffset:0;
    }
  }
  @keyframes color{
    from{
      opacity:0;
    }
    to{
      opacity:0.7;
    }
  }
html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: all 750ms !important;
  transition-delay: 0 !important;
}