/* html{ 
    font-family: sans-serif;
    
}; */
*{
    margin:0;
    font-family: sans-serif;
}
/* body{
    background-color:#59df4d ;
} */

/* .section--top{
  
    border:red 10px solid;
    
} */


/* .flex--container{

  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flex-item {
	flex: auto;

} */
 canvas{
    /* border:rgb(43, 255, 0) 10px solid; */
    margin: 0;
    display: block;

 }
/* bilder Logo section Top */
.logo--img{
    width: 100vw;
    position:absolute;
    /* background-color: aqua; */
}

.storytelling--web{
top:0;
/* -webkit-mask:linear-gradient(#fffefe00, transparent); anscheinend von VSC problematisch eingestuft*/
-webkit-mask-image: linear-gradient(to top, transparent 15%, black 85%);
mask-image: linear-gradient(to top, transparent 25%, black 75%);
}



.creative--coding{
bottom:0;
-webkit-mask-image: linear-gradient(to bottom, transparent 1%, black 65%);
mask-image: linear-gradient(to bottom, transparent 1%, black 75%);
}


#textfeld{
    top: 49rem;
    right:5rem;
    left:5rem;
    position:absolute;
    z-index: 1;
    /* background-color: #af112e;
    border:#6989e2 2px solid; */
    background-color: #f3e8ea;
    border-radius: 1%;
   text-align: center;
    
}

.text{
    font-size: 1rem;
    top: 10px;
    padding: 1.3rem;
  
}

/* canvas background */
.canvasGreen{
    /* background-color:#59df4d ; */
    background-color:#6989e2 ;
    /* background-color:#0044ff ; */

    /* border: blue 10px solid; */
}
.canvasRed{
    /* background-color:#0044ff ; */
    background-color:#7df372 ;

    /* background-color:#ff0022 ; */
}
.canvasWhite{
    background-color:#f3e8ea ;
}

.footer--style{
  height:10rem;
  /* border:#6989e2 2px solid; */
 
  display: flex;
  align-items: center;
  /* flex-direction: row; */
  justify-content: space-around;
  background-color:#f3e8ea ;
  
}

a{
  text-decoration: none;
  color:#a620b2
}
/* .flexbox{
  display:flex;
  justify-content: center;
} */
.footer--links{
  margin: 1rem;
  flex-direction: row;
  /* display: flex; */
  
  
}


/* media queries */

@media only screen and (max-width: 290px) {
  body {
    background-color: rgb(230, 191, 173);
  }
  #textfeld{
    top: 50rem;
  
}
  .text{
      font-size: 0.5rem;
      padding:0;
     
  }
}




@media only screen and (max-width: 320px) {
    body {
      background-color: rgb(230, 191, 173);
    }
    #textfeld{
      top: 30rem;
  }
    .text{
        font-size: 0,5rem;
    }
  }
@media only screen and (min-width: 390px) {
    body {
      background-color: rgb(230, 173, 211);
    }
    #textfeld{
        top: 60rem;
    }
  }

  /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
@media only screen and (min-width: 600px) {
    body {
      background-color: lightblue;
    }
    #textfeld{
        top: 65rem;
    }
  }

  @media only screen and (min-width: 800px) {
    body {
      background-color: rgb(173, 230, 181);
    }
    #textfeld{
        top: 85rem;
    }
  }
 /* tablet, landscape iPad, lo-res laptops ands desktops  801*/
  @media only screen and (min-width: 990px) {
    body {
      background-color: rgb(173, 230, 181);
    }
    #textfeld{
        top: 79rem;
        width: 20vw;
        right: 60rem;
        left: 60rem;
    }
  }
  /* big landscape tablets, laptops, and desktops */ 
  @media only screen and (min-width: 1025px) {
    body {
      background-color: rgb(173, 230, 181);
    }
    #textfeld{
      margin: auto;
      padding: 40px;
      position: absolute;
      top: 55rem; 
      left: 0; 
      right: 0;
      /* bottom: 9rem; */
      width: 30rem;
      /* border:#a620b2 2px solid; */
      font-size: 1.2rem;
      line-height:180%;
    }
  }
   /* hi-res laptops and desktops */ 
   @media only screen and (min-width: 1281px) {
    #textfeld{
      /* border:#2cb220 2px solid; */
       top: 79rem; 
   }
  }