@font-face 
{
  font-family: 'Lucida Sans';
  src: url('../fonts/LHANDW.TTF');
}

        html, body
        {
          background-color: rgb(204, 139, 19);
        }
        
        #links
        {
          position: absolute;
          margin-top:-10px;
          margin-left:-10px;
          height:96%;
          width: 150px;
          background-color: rgb(204, 139, 19);
          display: block; 
        }

        #content
        {
          position: absolute;
          margin-top:-10px;
          margin-left: 140px; 
          width:80%; 
          height:96%;
          background-color: rgb(243, 196, 108);
          
        }

        #navi
        {
          position: relative;
          margin-top: -6%;
          margin-left:22%; 
          height: 100px;
          width: 100%;
          display:inline-block;
        }

        #me
        {
          background-image: repeating-linear-gradient( rgb(243, 196, 108), rgb(206, 113, 7) );
          width:200px;
          height:50px;
          border-width: 4px 0px 4px  4px;
          border-color:rgb(153, 80, 13);
          border-radius: 25px 0px 0px 25px;
          margin-right:5px;
          display: inline-block; 
          
        }

        #aqua
        {
          background-image: repeating-linear-gradient( rgb(243, 196, 108), rgb(206, 113, 7) );
          width:200px;
          height:50px;
          border-width: 4px 0px 4px 0px;
          border-color:rgb(153, 80, 13);
          border-radius: 0px 0px 0px 0px;
          margin-right:5px;
          margin-top: 5px;
          display: inline-block; 
          
        }
        
        #acryl
        {
          background-image: repeating-linear-gradient( rgb(243, 196, 108), rgb(206, 113, 7) );
          width:200px;
          height:50px;
          border-width: 4px 0px 4px 0px;
          border-color:rgb(153, 80, 13);
          border-radius: 0px 0px 0px 0px;
          margin-right:5px;
          margin-top: 5px;
          display: inline-block; 
          
        }

        #leinwand
        {
          background-image: repeating-linear-gradient( rgb(243, 196, 108), rgb(206, 113, 7) );
          width:200px;
          height:50px;
          border-width: 4px 4px 4px  0px;
          border-color:rgb(153, 80, 13);
          border-radius: 0px 25px 25px 0px;
          margin-top: 5px;
          display: inline-block; 
          
        }

       

        @keyframes drehung
        {
          0% {
            rotate: 0;
          }
          100% {
            rotate: 1turn;
          }
        }

        #foot
        {
          position: absolute;
          bottom: 0px;
          margin-left: 150px; 
          width:80%;
          height:5%;
          margin-bottom: -10px;
          background-color:rgb(204, 139, 19);
        }



        #palette
        {
          position: absolute;
          margin-top:0%;
          margin-left: 42%;
          width:200px;
          height:200px;
          background-image: url("../Bilder/palette.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          animation-name: drehung;
          animation-duration: 3s;
          animation-delay: 0s;
          animation-direction: alternate;
          animation-timing-function: ease-in-out;
          
        }

        #impressum
        {
          margin-top:50px;
          border:1px;
          border-color:white;
        }
        
        h5 /*Header*/
        {
          margin-top:2%; 
          margin-left:0%; 
          font-family: 'Lucida Sans', -apple-system,  'Open Sans';
          font-weight: normal;
          text-align:center;
          color:rgb(255, 255, 255);
          font-size: 2.5em;
          text-shadow: 2px 2px 5px rgb(107, 72, 6) ;
          transform: rotate(-2deg);
        }

        h1 
        {
          margin-top:-2%; 
          font-family: Lucida Sans, -apple-system,  'Open Sans';
          font-weight: normal;
          margin-left:-5%;
          text-align:center;
          color:black;
          font-size: 1.5em;
          
        }
        
        p 
        {
          margin-top:5%; 
          font-family: Lucida Sans, -apple-system,  'Open Sans';
          font-weight: normal;
          text-align:center;
          font-size: 1.5em;
        }

        #pklein
        {
          margin-top:0%; 
          font-family: Lucida Sans, -apple-system,  'Open Sans';
          font-weight: normal;
          margin-left:-5%;
          font-size: 1em;
          line-height: 200%;
        }

        #psizewert
        {
          margin-top:0%;
          margin-left:-30%;
          font-size: 1.5em;
        }



        a:link
        {
          text-decoration: none;
          color:white;
        }
        a:visited
        {
          text-decoration: none;
          color:white;
        }
        a:hover
        {
          text-decoration: none;
          color:rgb(153, 80, 13)
          
        }
        a:active
        {
          text-decoration: none;
          color:black;
        }

        img
        {
          border: 5px solid;
          border-color: rgb(153, 80, 13);
          border-radius: 10px;
          width:350px;
          box-shadow: 2px 2px 5px black ;
        }


       /*Bildergalerie Aqryl*/ 
      @keyframes fade1
      {
        0% {opacity: 0;}
        11.11% {opacity: 1;}
        22.22% {opacity: 0;}
        33.33% {opacity: 0;}
        44.44% {opacity: 0;}
        100% {opacity: 0;}
      }

       css-slides img.aniacryl
       {
        opacity: 0;
        animation-name: fade1;
        animation-duration: 60s;
        animation-iteration-count: infinite;
        position: absolute;
        left:0;
        right:0;
       }

       css-slides img.aniacryl:nth-child(1)
       {
        animation-delay: 0s;

       }
       css-slides img.aniacryl:nth-child(2)
       {
        animation-delay: 10s;
     
       }
       css-slides img.aniacryl:nth-child(3)
       {
        animation-delay: 20s;

       }
       css-slides img.aniacryl:nth-child(4)
       {
        animation-delay: 30s;
     
       }
       css-slides img.aniacryl:nth-child(5)
       {
        animation-delay: 40s;
     
       }

       css-slides img.aniacryl:nth-child(6)
       {
        animation-delay: 50s;
     
       }

       @keyframes fade2
      {
        0% {opacity: 0;}
        11.11% {opacity: 1;}
        22.22% {opacity: 0;}
        33.33% {opacity: 0;}
        44.44% {opacity: 0;}
        100% {opacity: 0;}
      }


       css-slides #anim1
       {
        opacity: 0;
        animation-name: fade2;
        animation-duration: 60s;
        animation-iteration-count: infinite;
        position: absolute;
        left:0;
        right:0;
       }

      #anim1
      {
        position: absolute;
        margin-left:25px;
        width: 350px;
        font-size:18px;
      }

       css-slides p.aniacryl:nth-child(1)
       {
       animation-delay: 0s;
     
       }
      css-slides p.aniacryl:nth-child(2)
       {
       animation-delay: 10s;
   
       }
       css-slides p.aniacryl:nth-child(3)
       {
       animation-delay: 20s;

       }
      css-slides p.aniacryl:nth-child(4)
       {
       animation-delay: 30s;

       }
       css-slides p.aniacryl:nth-child(5)
       {
       animation-delay: 40s;

       }

       css-slides p.aniacryl:nth-child(6)
       {
       animation-delay: 50s;

       }


       #slide1
       {
        position: absolute;
        margin-top:0%; 
        margin-left: 36%; 
       }

       #slide2
       {
        position: absolute;
        margin-top: -2%; 
        margin-left: 36%; 
       }


        /*Bildergalerie Aquarell*/ 
      @keyframes fade3
      {
        0% {opacity: 0;}
        11.11% {opacity: 1;}
        22.22% {opacity: 0;}
        33.33% {opacity: 0;}
        44.44% {opacity: 0;}
        100% {opacity: 0;}
      }

       css-slides img.aniaqua
       {
        opacity: 0;
        animation-name: fade3;
        animation-duration: 90s;
        animation-iteration-count: infinite;
        position: absolute;
        left:0;
        right:0;

       }

       css-slides img.aniaqua:nth-child(1)
       {
        animation-delay: 0s;

       }
       css-slides img.aniaqua:nth-child(2)
       {
        animation-delay: 10s;
     
       }
       css-slides img.aniaqua:nth-child(3)
       {
        animation-delay: 20s;

       }
       css-slides img.aniaqua:nth-child(4)
       {
        animation-delay: 30s;
     
       }
       css-slides img.aniaqua:nth-child(5)
       {
        animation-delay: 40s;

       }
       css-slides img.aniaqua:nth-child(6)
       {
        animation-delay: 50s;
     
       }
       css-slides img.aniaqua:nth-child(7)
       {
        animation-delay: 60s;

       }
       css-slides img.aniaqua:nth-child(8)
       {
        animation-delay: 70s;
     
       }
       css-slides img.aniaqua:nth-child(9)
       {
        animation-delay: 80s;

       }
     


       @keyframes fade4
       {
         0% {opacity: 0;}
         11.11% {opacity: 1;}
         22.22% {opacity: 0;}
         33.33% {opacity: 0;}
         44.44% {opacity: 0;}
         100% {opacity: 0;}
       }

       css-slides #anim2
       {
        opacity: 0;
        animation-name: fade4;
        animation-duration: 90s;
        animation-iteration-count: infinite;
        position: absolute;
        left:0;
        right:0;
       }

      #anim2
      {
        position: absolute;
        margin-left:25px;
        width: 350px;
        font-size: 18px;
      }

       css-slides p.aniaqua:nth-child(1)
       {
       animation-delay: 0s;
     
       }
      css-slides p.aniaqua:nth-child(2)
       {
       animation-delay: 10s;
   
       }
       css-slides p.aniaqua:nth-child(3)
       {
       animation-delay: 20s;

       }
      css-slides p.aniaqua:nth-child(4)
       {
       animation-delay: 30s;
       }
       css-slides p.aniaqua:nth-child(5)
       {
       animation-delay: 40s;
     
       }
      css-slides p.aniaqua:nth-child(6)
       {
       animation-delay: 50s;
   
       }
       css-slides p.aniaqua:nth-child(7)
       {
       animation-delay: 60s;

       }
      css-slides p.aniaqua:nth-child(8)
       {
       animation-delay: 70s;
       }
       css-slides p.aniaqua:nth-child(9)
       {
       animation-delay: 80s;

       }
    

       #slide3
       {
        position: absolute;
        margin-top:0%; 
        margin-left: 36%; 
       }

       #slide4
       {
        position: absolute;
        margin-top: -2%; 
        margin-left: 36%; 
       }

       

       /*Auf eine Leinwand malen.*/

       #mycanvas
       {
        position:absolute;
        margin-top:7%;
        margin-left:36%;
        border: 1px solid rgb(148, 96, 0);
        background-color: white;
        box-shadow: 2px 2px 5px black;
        cursor: url("../Bilder/pinsel.png"), auto;
       }

       #farben
       {
        margin-left:42%;
       }

       #farben:after
       {
        content:".";
        display:block;
        width:100%;
        clear:both;
        height: 0;
        visibility: hidden;
        }

        #farben div
        {
          height:20px;
          width:30px;
          border:2px solid white;
          margin-top:0%;
          margin-left:0%;
          cursor:pointer;
          display:inline-block;
        }
        #schwarz
        {
          background-color: rgb(0, 0, 0);
        }
        #weiß
        {
          background-color: rgb(255, 255, 255);
        }
        #rot
        {
          background-color: red;
        }

        #gelb
        {
          background-color: rgb(255, 166, 0);
        }

        #gruen
        {
          background-color: rgb(30, 196, 8);
        }

        #blau
        {
          background-color: rgb(17, 0, 255);
        }
        #groeßenschieber
        {
         position:relative;
         margin-top:-9%;
         margin-left:44%;
         color:rgb(148, 96, 0);
         width:15%;
        }

        #slidervalue
        {
          color:rgb(0, 0, 0);
        }

        #meinschieber
        {
          position:relative;
          border-radius: 5px;
          color:rgb(148, 96, 0);
        }
       
        @import "tablet.css" screen and (max-width:810px);
        

        @import "handy.css" screen and (max-width:450px);