/*================================= GENERAL SETTINGS */
* {
  margin: 0;
  padding: 0;
  
}

h4, h3, h2, h1, p, a{
  color: #353531;
  text-decoration: none;
}
a{
  color: #568EA3;
}

a:hover{
  color: #9FC3C9;

}

.sidebarleft h2:hover,  #new:hover{
  color: #9FC3C9;
}

.clicked{
  color: #568EA3;
  
}

#impressum{
  font-size:smaller;
  margin-top: 5px;
  opacity: 30%;
}

body {
  background-color: #E7EDEF;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: normal;

/* Verwendung von URL und Koordinaten 
cursor:  url(mouse2.svg), auto;
*/
}

/*================================= INDEX SETTINGS */

.container {
  /*
  display: flex;
  justify-content: center;
  flex-direction: column;  
  gap: 5px;

  */
  margin-top: 2.5vh;
  margin-left: 2.5vw;
  margin-right: 2.5vw;
  width: 95vw;
  height: 95vh;
  display: grid;
  grid-template-columns: 175px auto 110px 170px 130px;
}





/*================================= SIDEBAR */

.sidebarleft {
  grid-column: 1 / 2;
  /*

  */
  display: grid;
  grid-template-rows: auto 67px 80px 80px 80px;
  grid-template-columns: 80px 80px;
  gap: 5px;

  height: 95vh;
  width: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  
}

.menu {
  grid-row: 1/2;
  grid-column: 1/3;
  float: left;
}
#a2{
  grid-row: 2/3;
  grid-column: 1/3  ;
  line-height: 30px;
}
#a3{
  grid-row:3/4;
  grid-column: 1/2  ;
}
#a4{
  grid-row: 4/5;
  grid-column: 1/2  ;
}
#a5{
  grid-row: 5/6;
  grid-column: 1/2  ;
}
#b3{
  grid-row:3/4;
  grid-column: 2/3  ;
}
#b4{
  grid-row: 4/5;
  grid-column: 2/3  ;
}
#b5{
  grid-row: 5/6;
  grid-column: 2/3  ;
}

.sidebarleft img{
  width: 100%;
  aspect-ratio: 1/1;
}

.sidebarleft img:hover{
  opacity: 50%;
}

.menu, #a2, #a3, #a4, #a5, #b2, #b3, #b4, #b5{
  /*

  */
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

/*================================= MIDDLE */
.draw {
  width: 100%;
  height: 95vh;
  grid-column: 2 / 3;
  aspect-ratio: 1 / 1;;
}

#canvas{
  display: flex;
  justify-content: center;
}

.tutorial {
  width: 100%;
  height: 95vh;
  grid-column: 2 / 3;
  aspect-ratio: 1 / 1;

  display: grid;
  grid-template-rows: repeat(31, 0.2fr);
  grid-template-columns: 1fr 1fr;
  gap: 0.25vw;
}

.tutorial p{
  height: 17px;
}

/*============= EXAMPLES */

.ex-container {
  grid-column: 2 / 6;
  height: 95vh;
  overflow-y: scroll;
}

.wrapper {
  width: 10.96vw;
  aspect-ratio: 1/1;
  margin: 5px;
  display: block;
  float: left;
  position: relative;

}
.wrapper img, .wrapper video {
  display: block;
  width: 100%;
  height: 100%;

}
.wrapper .text {
  opacity: 0;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 2px 0px;
  font-size: smaller;
  color: #E0F5E9;
  background: #353531;
  text-decoration: none;
  text-align: center;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;

}
.wrapper:hover .text {
  opacity: 0.8;
}


/*============= CONCEPT */
.concept{
  grid-column: 2/6;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  overflow-y: scroll;
  
}

.col1, .col2, .col3{
  padding-right: 40px;

  display: block;
  height: 100%;
} 

div, p, img, video{
  /* 
      outline: 1px solid red;
    min-height: 20px;
  */ 

}

.impressum1{
  grid-column: 1/2;
  padding-right: 40px;
  text-align: right;
}
.impressum2{
  grid-column: 2/3;
  padding-right: 40px;
}
.impressum3{
  grid-column: 3/4;
  padding-right: 40px;
}







/*================================= USER INTERFACE */
.label,
.slider,
.check {

  display: grid;
  grid-template-rows: repeat(33, 1fr);
  grid-template-columns: 1fr;
  
  max-height: 100%;
  width: 100%;

  /*

  border-color:turquoise;
  border-width: thick;
  border-style: inset;
  */
}

.label {
  grid-column: 3 / 4;
  text-align: right;
}
.label p{
  margin-right: 10px;
}

.slider {
  grid-column: 4 / 5;
}

.check {
  grid-column: 5 / 6;
}

.label p,
.slider p,
.check p {
  max-height: 15px;
  
}