*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;   
   /* es gilt das Gesamtmaß, nicht das des Inhalts */
}

body{
   font-family: Arial, Helvetica, sans-serif;
   padding: 0.2rem;
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
   background-color: black;
}

main{
 display: flex;
 gap: 0.25rem;
 height:calc(100vh - 2.5rem);
}

#box-types{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap:0.2rem;
   button{
      display: flex;
      flex-direction: column-reverse;
      width: 8rem;
      justify-content: start;
   }
   img{
      background-color: white;
   }
}

header{
   background-color: lightsalmon;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   padding: 0.25rem;
   border-bottom: 1px solid gray;
   gap: 1rem;

   h1{
      font-size: 1.5rem;
      span{
         font-size: 1.1rem;
         font-style: italic;
         background-color: white;
         border-radius: 4rem;
         padding:0.25rem;
      }
   }

   a{
      color: black;
   }
}

svg{
   background-color: white;
   transform-origin: top left;
   transform: scale(1);
}
article{
   background-color: gainsboro;
   width: 100%;
   padding: 0.25rem;
   border-radius: 0.25rem;
   font-size:1.1rem;
   border: 1px solid gray;
}
section{
   width: calc( 100vw - 350px);
   display: flex;
   flex-direction: column;
   gap:0.2rem;
}

aside{
   background-color: gainsboro;
   width:320px;
   background: none;

   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   position: absolute;
   top: 4rem;
   right: 0;
   color: gainsboro;
}

footer{ height: 2rem; text-align: center; color: gainsboro}

#options-box{
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem;

   button{
      background-color: transparent;
      border: none;
      text-decoration: underline;
      font-size: 0.9rem;
   }

   button:hover{
      font-weight: bold;
   }
}

#text{

   margin-left: 0.5rem;
   background-color: white;
   padding:0.25rem;
   border-radius: 0.25rem;
   overflow: hidden;
   
    &::before{
      content:"Beschreibung / Anleitung";
      padding:0.25rem;
      font-weight: bold;
      margin-left: -0.25rem;
    }
}

.is-active{
   background-color: lightsalmon;
}

#options{
   flex-direction: column;     
   gap: 0.25rem;

   #inputs{
      display: flex;
      flex-direction: column;     
      gap: 0.25rem;
   }

   select, label{
      width: 20rem;
      font-size: 1.1rem;
   }

   label{
      display: flex;
      justify-content: space-between;
   }

   [type=number]{
      width: 5rem;
   }

   [type=checkbox]{
      width: 1rem;
   }


}

#svg-options{

   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1rem;
   padding:0.25rem;
   border-bottom: 1px solid gray;

   label{
      display: flex;
      animation: center;
      gap: 0.25rem;

   }

   button{
      background-color: cornflowerblue;
      color: white;
      border-radius: 0.25rem;
      font-size: 1.3rem;
      padding:0.15rem;
      border:none;

   }

   button:hover{
      transform: scale(1.1);
   }
}

#svg{
   display: flex;
   flex-direction: column;
   gap:0.25rem;
}

dialog{
   
   margin: 0.5rem auto;
   border: none;
   border-radius: 0.25rem;
   width: 40rem;
   max-height: calc( 100vh - 1rem);
   h2{
      background-color: lightsalmon;
      padding:0.5rem;
      border-bottom: 1px solid grey;
   }

   button{
      font-size: 1.2rem;
      background-color: lightsalmon;
      border: none;
      padding: 0.25rem;
      border-radius: 0.25rem;
      border: 1px solid gray;
   }
}

dialog div{
   padding: 1rem;
   display: flex;
   flex-direction: column;
   border: 1px solid gray;
   gap: 1rem;
}

dialog::backdrop{
   background-color: rgba(0,0,0,0.4);
}

.support{
   width:100%;
   display: flex;
   gap:1rem;
   background-color: gainsboro;
   border-radius: 0.25rem;
}

.small-text{
   font-size: 0.8rem;
}

select{
   background-color: lightsalmon;
   border:none;
}

#storage{
   display: flex;
   font-size: 0.9rem;
   margin-top: 0.5rem;
   justify-content: space-between;
}

.ads::before{
   content: "Werbung*";
   font-size: 0.8rem;
   color: gainsboro;
}

#info-modal{

   position: absolute;
   padding: 0.25rem;
   top: 10px;
}

.localstorage-item{
   display: flex;
   flex-direction: row;
   width: 100%;
   border: none;
   padding: 0;
   margin: 0;
}

@media (max-width: 800px) {
   aside{
      display: none;
   }

   section{
      width: 100%;
   }

   svg{
        max-width:100%;
   }
}