html{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(82, 78, 73);
    font-size:1rem;
/* min-height und overflow damit bc nicht scrollt */
    min-height: 100vh;
    overflow: hidden;
   
}
/* Mobile first */
/* Galaxy Fold 280 bis Sourface Dou 540 */
body{
    margin:0;
    background-image: url(../img/bc009hd.png);
    background-repeat: no-repeat;
    /* background-size: cover; */
  background-position: top; 

}


.title{
    margin: 1.6rem;
    text-align: center;
    line-height: 1;
}

.subtitle{
    font-size:1.2rem;
    margin: 0;
    text-align: center;
    padding:0rem 1.5rem 0rem 1.5rem;
}

img{
    width: 85vw;
    position: fixed;
    margin: auto;
    bottom: 4rem;
    left: 1rem;
    right: 1rem;
}
.anweisung{
    color: gray;
    font-size: 0.7rem;
    padding: 1rem;
    text-align: center;
}
.text{
    padding: 2rem;
   
    text-align: center;
}

  /* BUTTON */
  button{
    position: fixed;
    color: rgb(221, 24, 57);
    font-size: 1rem;
    background-color:rgba(33, 132, 219, 0.6);
    border: none;
    width: 5.7rem;
    height: 1.5rem;
    border-radius: 10px;
    text-align: center;
   
}
#prev{
    bottom: 1rem;
    left: 1rem;

}
#next{
    bottom: 1rem;
    right: 1rem;
}

#about {
  font-size: 0.8rem;
    bottom: 2rem;
    left: 1rem;
    width: 6.7rem;
    height: 1.5rem;
    z-index: 1;
}

#work {
    font-size: 0.8rem;
    bottom: 2rem;
    right: 1rem;
    width: 6.7rem;
    height: 1.5rem;
    z-index: 1;
}


button:hover{
    background-color: rgba(238, 212, 234, 0.5);
    cursor: pointer;
}



.enter{
    position: fixed;
    margin: auto;
   bottom: 9rem;
    left: 1rem;
    right: 1rem;
    width: 200px;
    height: 80px;
    color: rgb(221, 24, 57);
    background-color:rgba(33, 132, 219, 0.6);
    border: solid 3px rgba(33, 132, 219, 0.6);
    border-radius: 10px;
    font-size: 1.5rem;
  }
/* disabled */
.disabled {
    pointer-events: none;
    opacity: 0.6;
}
/* Unsichtbar */
.none{
    display:none;
}

/* IMAGES */

.einhorn{
   display:block
}

/* Canvas responsive versuch */
#stage-parent {
    width: 100%;
  }

/* mini */
@media only screen and (max-width: 180px) {
#about {
    font-size: 0.8rem;

      bottom: 1rem;
      left: 1rem;
      width: 6.7rem;
      height: 1.5rem;
  }
  
  #work {
      font-size: 0.8rem;
      bottom: 1rem;
      right: 1rem;
      width: 6.7rem;
      height: 1.5rem;
  }
}
@media only screen and (max-width: 320px) {

    img{
        width:70vw;
    }
}

    /* Mobile 600px */
/* nexus7 600, ipad mini 768, ipad 768 */
@media only screen and (min-width: 600px) {
    /* /responsove canvas */
    #stage-parent {
        width: 100%;
      }
    .title{
        font-size:4rem;
        margin-top: 4.1rem;
    }
    
    .subtitle{
        font-size: 1.5rem;
        line-height: 2.3rem;
    }
    .text{
        padding: 2rem;
        font-size:1.5rem;
    }
    img{
        width: 90vw;
        position: fixed;
        margin: auto;
        bottom: 3rem;
        left: 1rem;
        right: 1rem;
    }
    #about {
        font-size: 1rem;
          left: 7rem;
          width: 8rem;
          height: 3.5rem;
      }
      
      #work {
          font-size: 1rem;
          right: 7rem;
          width: 8rem;
          height: 3.5rem;
      }
}


    /* Mobile 640px */
/* Blackberry 230 querformat */
@media only screen and (min-width: 640px) {
    /* /responsove canvas */
    #stage-parent {
        width: 100%;
      }
    .title{
        font-size:2rem;
        margin-top: 1rem;
    }
    
    .subtitle{
        font-size: 0.8rem;
        line-height: 1rem;
    }
    .text{
        padding:1rem;
        margin: 0;
        font-size:0.7rem;
    }
    img{
        width: 40vw;
    }
    #about {
        font-size: 1rem;
          left: 7rem;
          width: 8rem;
          height: 2rem;
      }
      
      #work {
          font-size: 1rem;
          right: 7rem;
          width: 8rem;
          height: 2rem;
      }
}
  /* Mobile 800px */
/* ipad pro 1024, kindle fire hdx 800, */
@media only screen and (min-width: 768px) {
    /* @media only screen and (min-width: 800px) { */

body{
    background-image: url(../img/bc009.png);
    background-size: cover;
  background-position: top; 
}
.title{
    font-size: 3.2rem;
    margin-top: 3.6rem;
    text-align: center;
    line-height: 1;
}

   
    .subtitle{
        font-size: 1.8rem;
        line-height: 2.5rem;
        padding: 0rem 2rem 0rem 2rem;
    }

    .text{
        padding: 3.5rem;
        font-size:2rem;
    }
    img{
        width: 90vw;
        position: fixed;
        margin: auto;
        bottom: 3rem;
        left: 1rem;
        right: 1rem;
    }

}

  /* Desktop  und tablet quer*/

@media only screen and (min-width: 1019px) {
    /* @media only screen and (min-width: 1079px) { */

    body{
        background-image: url(../img/bc009.png);
        background-size: cover;
      background-position: top; 
    }

    .einhorn1{
        display: flex;
        flex-direction: column;
    }
    img{
       
        width: 43vw;
        /* width: 43vw; */
        bottom: 2rem;
        left: 4rem;
        right: 4rem;
    }
    .title{
        margin: 3rem 3rem 0rem 3rem;
        padding: 0;
    }
        .subtitle{
            font-size: 1.8rem;
            line-height: 2.5rem;
           padding: 1rem 2rem 0rem 2rem; 
            
        }
    
        .text{
            padding: 3.5rem;
            font-size:2rem;
        }

          /* BUTTON */
  button{
    font-size: 2rem;
    width: 8.7rem;
    height: 3.5rem;
   
}
#prev{
    bottom: 1.5rem;
    left: 3rem;

}
#next{
    bottom: 1.5rem;
    right: 3rem;
}

#about {
    font-size: 1.5rem;
      left: 7rem;
      width: 15rem;
      height: 3.5rem;
  }
  
  #work {
      font-size: 1.5rem;
      right: 7rem;
      width: 15rem;
      height: 3.5rem;
  }
        
    
    }

    /* blackbery playbook 1024 und height 600 */
    @media only screen and (min-width: 1024px) and (max-height: 600px) {
        html{
            font-size:0.8rem;  
        }

        img{
            width: 48vw;
        }
    }