body{
    overflow:hidden;
    /* width:1920px; */
    background-color: white;
    font-family: 'Comic Sans MS'; 
    font-size:11pt;
}

::-webkit-scrollbar {
    width: 0.7em;
}
   
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgb(255, 255, 255);
}
   
::-webkit-scrollbar-thumb {
    background-color: rgb(192, 192, 192);
    border-radius:0.25em;
    /* border:1px solid rgb(0, 255, 34); */
    height:1em;
}

h3{
    font-size:1.3em;
    width:100%;
}

h5{
    font-size:1.2em;
    width:100%;
}
h6{
    font-size:1.1em;
    width:100%;
}

.megatron{
    /* margin: auto; */
    /* padding-top: 30px; */
    position:relative;
    background-repeat: no-repeat; 
    background-size: cover; 
    padding-top:  56.25%;
    overflow-y:hidden;
    overflow-x:hidden;
}

.container_modal{

    padding:2%;
    position:absolute;
    top:10%;
    left:5%;
    height:80%;
    width:90%;
    border-radius:2em;
    z-index:120;
    background-color:white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-size:0.9em;
    
}


/* #wurstschnappen_modal{ */
    /* position:absolute; 
    background-color:white; 
    z-index:120; 
    width:1024px; 
    height:900px; 
    border-radius:0.1vw;
    top:5%;
    left:10%;       */
/* } */

.topnav{

    width:100%;
    /* background-color: #60a8b3 ; */
    background-color: transparent ;
    color:white;
    text-align:right;
    padding:5px;
    position:fixed;
    z-index:99;

}

.anim{
    animation: glonki_move 0.2s infinite forwards;
    cursor:pointer;
}

@keyframes glonki_move {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% {transform: rotate(0deg); }
  }

.glonki_hello_anim{
    animation: glonki_entry 0.3s forwards infinite;
}

@keyframes glonki_entry {
    0% { transform: rotate(0deg);}
    25% { transform: rotate(2deg);}
    50% { transform: rotate(0deg);}
    75% { transform: rotate(-2deg);}
    100% {transform: rotate(0deg);}
}



    .megatron_overlay{  
        position:absolute; 
        background-repeat: no-repeat; 
        height:100%;
        z-index:99;
    }

    .hover:hover{
        transform: scale(1.1);
    }
    
    #sofa{
        position:absolute; 
        top:20%; 
        left:32%;
        height:14%;
    }

    #schrank{
        position:absolute; 
        top:10.1%; 
        left:57%;
        height:23%;
    }

    #tisch{
        position:absolute; 
        top:74.0740741%; 
        left:46.875%;
        height:17.5925926%; 
        z-index:99;
    }

    #schreibtisch{
        position:absolute; 
        top:75%; 
        left:26%;
        height:17%; 
        z-index:99;
    }

    #blume{
        position:absolute;
        top:62%;
        left:37%;
        height:10%;
        z-index:89;
    }

    #malbuch{
        position:absolute; 
        top:78.5%; 
        left:31%;
        height:5%; 
        z-index:100;
    }

    #kochbuch{
        position:absolute; 
        top:77%; 
        left:55%;
        height:5%; 
        z-index:99;
    }

    #kellertuer{
        position:absolute;
        height:19.8%; 
        top:50.8%; 
        left:26.35%;
        z-index:1;
    }
    #kellertuer_clickdiv{
        position:absolute;
        height:19.8%; 
        width:10%;
        top:50.8%; 
        left:26.35%;
        z-index:101;
    }

    #sofatisch{
        position:absolute; 
        top:38%; 
        left:36%;
        height:9%; 
        z-index:99;
    }

    #radio{
        position:absolute; 
        top:38.5%; 
        left:9.5%;
        height:5%; 
        z-index:100;
    }

    #kaerrele_bild{
        position:absolute; 
        top:17%; 
        left:30%;
        height:5%; 
        z-index:0;
    }

    #bett{
        position:absolute; 
        top:31%; 
        left:60.3%;
        height:15.6%; 
        z-index:99;
    }

    #regal{
        position:absolute; 
        top:12%; 
        left:20%;
        height:21%; 
    }   
    #regal_clicker{
        position:absolute; 
        top:12%; 
        left:20%;
        height:21%; 
        width:7%;
        z-index:101;
    } 

    #kueche{
        position:absolute; 
        top:55.5555556%; 
        left:60.5%;
        height:17.5925926%;
        width:20%;
    }

    #kuehlschrank{
        position:absolute; 
        top:0%; 
        left:0%;
        height:100%;

    }
    /* #kuehlschrank_modal{
        position:absolute;
        top:10%;
        left:10%;
        z-index:100;
        background:white;
        border-radius:15px;
        padding:2%;
    } */

    #ofen{
        position:absolute; 
        top:34%; 
        left:20%;
        height:73.6842105%;
    }

    #kuechenschrank{
        position:absolute; 
        top:0%; 
        left:57.5%;
        height:100%;
    }

    #wurstschnappen_angel{
        position:absolute;
        top:22%;
        left:81%;
        width:9%;
        height:45%;
        z-index:110;
    }

    #glonki_main{
        position: absolute; 
        top:18%; 
        left:70.5%; 
        height:18.5%;
        width:8%;
    }
    #glonki_main:hover{
        animation: glonki_entry 0.3s forwards infinite;
    }
    
    #glonki_front{
        height:100%;
    }
    #glonki_front_left{
        height:100%;
    }
    #glonki_front_right{
        height:100%;
    }
    #glonki_back_left{
        height:100%;
    }

    #glonki_schlafen{
        position: absolute; 
        top:36%; 
        left:71.7%; 
        height:6%;
        z-index:100;
    }

    #img_glonki_schlafen{
        height:100%;
    }

    #glonki_hello{
        height:60%;
        width:23%; 
        position:absolute; 
        top:30%; 
        left: 100%;
    }

    #speechbubble{
        width:46%; 
        position:absolute;  
        top:8%; 
        left:12%; 
    }

    #hello{
        background-color: transparent; 
        font-size:1em;
        position: absolute; 
        left:12%; 
        top:8%; 
        width:65%; 
        height:90%; 
        overflow-y:auto;
    }

    .day_icon{
        position:absolute;
        top:0%;
        height:100%;
        text-align:center;
        width:33%;
    }

    .zubehoer{
        cursor:pointer;
    }

    #losgehts{
        width:40%; 
        max-height:80%; 
        position:absolute; 
        top: 10%; 
        left: 15%; 
        z-index:119; 
        background-color: white; 
        border-radius: 2em;
        /* border: 2px solid rgb(0, 0, 0);  */
        padding:3%; 
        overflow-y:auto;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        font-size: 0.9em;
    }

    #quests{
        position:absolute;
        top:20%;
        left:0%;
        height:60%;
        width:4%;
        background:transparent;
        z-index:130;
        border: rgb(0, 213, 0)
    }



    #elternbrief{
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    #task_desc, #downloads_desc{
        position:absolute;
        top:10%;
        left:4%;
        width:30%;
        height:30%;
        background-color:white;
        border-radius: 2em;
        /* border:2px solid rgb(0, 0, 0); */
        padding:10px;
        display:none;
        z-index:130;
        overflow-y: auto;

    }



    .lebensmittel{
        position:absolute;
        width:5%;

    }
    .lebensmittel_falsch{
        position:absolute;
        width:5%;

    }

    .btn-light{
        border: 2px solid rgb(0, 0, 0);
        font-size:1em;
        min-height:2em;
        min-width:4em;
        padding:0.2em;
        border-radius:1em;
    }


    .source, .target {
        float: left;
        margin: 1%;
        /* padding: 10px; */
        
        position:absolute;
      }
      .source{
          border-radius:1em;
          width:25%;
      }
      
      .source_body{
          border: 2px dashed red; 
          overflow-y:auto; 
          left:75%; 
          top:10%; 
          height:60%; 
          width:15%; 
          overflow-y:auto;
      }
      #titel_body{
        position:absolute;
        left:80%; 
        top:8%; 
        height:5%; 
        width:15%; 
        color:red;
      }
      
      .source_tyres{
          border: 2px dashed green;  
          left:15%; 
          top:80%; 
          height:15%; 
          width:50%; 
          overflow-x:auto; 
          overflow-y:hidden;
      }
      #titel_tyres{
        position:absolute;
        left:12%; 
        top:87%; 
        height:5%; 
        width:4%; 
        color:green;
      }
      
      .source_deko{
          border: 2px dashed blue; 
          overflow-y:auto; 
          left:0%; 
          top:10%; 
          height:60%; 
          width:7%; 
      }
      #titel_deko{
        position:absolute;
        left:1%; 
        top:8%; 
        height:5%; 
        width:10%; 
        color:blue;
      }
      
      
      .target{
          background-color:rgba(211, 211, 211, 0.2);;
          position:absolute;
          text-align:center;
          z-index:90;
          
      }
      
      .target_body{
          border: 2px dashed red;
          top:0%;
          left:0%;
          width:100%;
          height:100%;
          border-radius:1em;
      }
      .target_tyres{
          border: 2px dashed green;
          border-radius:5em;
          top:68%;
          width:20%;
          height:30%;
      }
      #target_tyres_1{
          left:25%;
      }
       #target_tyres_2{
           left:65%;
      }
      
      .target_deko{
          border: 2px dashed blue;
          border-radius:5em;
          width:10%;
          height:15%;
      }
      #target_deko_1{
          top:53%;
          left:13%;
      }
       #target_deko_2{
          top:25%;
          left:53%;
      }
      #target_deko_3{
          top:53%;
          left:73%;
      }
      
      #source_container{
          position:absolute;
          top:0%;
          left:0%;
          width:100%;
          height:100%;
          padding-left:1%;
          
      }
      
      #target_container{
          position:absolute;
          top:5%;
          left:11%;
          width:61%;
          height:70%;
      }
      
      #modal_color_picker{
          position:absolute;
          top:20%;
          left:30%;
          height:60%;
          width:40%;
          background-color: white;
          border-radius:1em;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          z-index:130;
      }
      #modal_kaerrelebau{
          position:absolute;
          top:5%;
          left:5%;
          width:90%; 
          height:90%; 
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }
      
      #picker{
          position:absolute;
          top:10%;
          left:10%;
      
      }
      #color_accept_button{
          position:absolute;
          top:2%;
          left:85%;
      }

      .memory_img{
        background: url('backgrounds/hintergrund_memory.png');
        background-repeat: no-repeat; 
        background-size: cover; 
        }
  
    .print_me { 
        display: block; 
        width:100vw;
        height:100vh;
    }


    

    .honarro{
        animation: honarro 2s forwards;
    }

    @keyframes honarro {
        0% { transform: scale(0);  }
        100% {transform:  scale(1); }
    }

    #source_container_maske{
        position:absolute;
        top:0%;
        left:0%;
        width:100%;
        height:100%;
        padding-left:1%
    }
    
    #target_container_maske{
        position:absolute;
        top:5%;
        left:10%;
        width:90%;
        height:70%;
    }

    .target_haes{
        width:20%; 
        height:40%; 
        border-radius:0.5em; 
        border:1px lightgrey solid; 
        position:absolute; 
        top:10%; 

    }
    .target_maske{
        position:absolute; 
        top:0%; 
        left:0%; 
        height:90%; 
        width:100%; 
        border-radius:0.5em; 
        /* border: 1px lightgrey dashed; */
    }

    .source_masken{
        position:absolute;
        top:60%;
        height:20%;
        left:15%;
        width:70%;
        border-radius:1em;
        border: 1px dashed black;

    }

    #modal_maskensort{
        position:absolute;
        top:5%;
        left:5%;
        width:90%; 
        height:90%; 
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .krachinstrument_z-high{
        z-index:111;
    }