*{
	box-sizing: border-box;
}


@font-face { font-family: "montserrat"; src: url("schrift/montserrat-light.ttf"); }

@font-face{
    src: url(schrift/StraightToHellBB.ttf);
    font-family: lucifer;
}

@font-face{
    src: url(schrift/OratorStd.otf);
    font-family: emre;
}

@font-face{
    src: url(schrift/DIABLO_L.TTF);
    font-family: papa;
}

@font-face{
    src: url(schrift/Quick\ Kiss\ Personal\ Use.ttf);
    font-family: lady;
}




body div {
    font-family: 'MS Reference Sans Serif';
    color: black;
}

#win {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(0,128,131);
    overflow: hidden;
}

#taskbar {
    background-color: rgb(192,192,192);
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border-top: ridge 2px white;
}

#start {
    background: url(http://zombiechops.com/wp-content/uploads/2016/07/icon.png) left center no-repeat;
    background-size: 17px 15px;
    text-align: left;
    font-weight: bolder;
    float: left;
    display: inline-block;
    padding: 1px 2px;
    margin-left: 2px;
    cursor: default;
    user-select: none;
}

#startMenu {
    top: -238px;
    left: 2px;
    height: 240px;
    width: 164px;
    background-color: rgb(192,192,192);
    position: absolute;
    display: block;
    border-top: ridge 3px white;
    border-left: ridge 3px white;
    border-bottom: ridge 2px black;
    border-right: ridge 2px grey;
}

    #startMenu #left {
        width: 28px;
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        background-color: rgb(128,128,128);
        font-family: Arial;
        font-weight:900;
        text-transform: capitalize;
    }

    #startMenu .menuItem, 
    .replaytext {
        color:black;
        height: 32px;
        width: 134px;
        margin-left: 24px;
        padding-left:10px;
        padding-top:10px;
        vertical-align:central;
    }

    #startMenu .menuItem:hover,
    .replaytext{
        background-color:rgb(0,0,128);
        color:white;
    }

    #startMenu .expander:after{
        content:'▶';
        float:right;
        margin-right:5px;
    }

    #startMenu .menuItem:first-letter,
    .replaytext
    {
        text-decoration:underline;
    }
    
    #startMenu #shutdown:first-letter,
    .replaytext
    {
        text-decoration:none;
    }

    
        #startMenu #left .b {
            color: rgb(192,192,192);
            transform: rotateZ(-90deg);
            transform-origin: center left;
            display: inline-block;
            width: 200px;
            white-space: nowrap;
            font-size: 20px;
            margin-top: 215px;
            margin-left: 10px;
        }

        #startMenu #left .num95 {
            font-weight: 100 !important;
            color: white;
        }

.startRest {
    border-top: ridge 2px white;
    border-left: ridge 2px white;
    border-bottom: ridge 2px black;
    border-right: ridge 2px black;
}

.startClick {
    border-top: inset 2px black;
    border-left: inset 2px black;
    border-bottom: inset 2px white;
    border-right: inset 2px white;
}

#notifications {
    margin-right: 2px;
    border-top: inset 2px grey;
    border-left: inset 2px grey;
    border-bottom: inset 2px white;
    border-right: inset 2px white;
    padding-top: 17px;
    display: inline-block;
    float: right;
}

#desktop {
    height: calc(100% - 26px);
    background-color: transparent;
    width: 100%;
    padding: 10px;
}

#clock {
    display: inline-block;
    float: right;
    margin-top: -13px;
}

.desktopIcon {
    margin: 2px 7px;
    display: block;
    text-align: center;
    vertical-align: bottom;
    font-size: 1.5vh;
    color: white;
    margin-bottom: 2vh;
}

#mycomputer {
    background-color: transparent;
}

.divider{
    height:1px;
    border-top: ridge 1px white;
    border-bottom: ridge 1px grey;
    margin: 2px ;
}

.background{
    height: 100%;
    width: 100%;
    position: absolute;
}

.hintergrundbox{
    position: absolute;
}

.computericon{
    display: block;
    height: 5vh;
    width: 5vh;
    margin: auto;
}

.müllicon{
    display: block;
    height: 5vh;
    width: 5vh;
    margin: auto;
}

.wrapper{
    position: absolute;
    display: flex;
    flex-direction: column;
    margin-left: auto; 
    float: left; 
    vertical-align: center;
}

.container {
    position: relative;
    border: 1pt solid;
    border-bottom-color: #535353;
    border-right-color: #535353;
    border-left-color: #dbdbdb;
    border-top-color: #dbdbdb;
    background-color: #bfbfbf;
    font-size: 13px;
    padding: 2px;
    display: none;
}
    
ul.toolbar {
      list-style: none;
      padding: 2px 0;
      margin: 0;
      font-size: 1.2vh;
    }

li {
        display: inline-block;
        padding: 0 5px;
      }
    
    .container-inner {
      border: 2px solid;
      border-bottom-color: #c7c7c7;
      border-right-color: #c7c7c7;
      border-left-color: #808080;
      border-top-color: #808080;
      }

ul.icons {
        list-style: none;
        padding: 2px 0;
        margin: 0;
         }
li {
          display: inline-block;
          padding: 0 5px;
        }
      
   
    .statusbar {
        display: flex;
        height: 2vh;
      
    }

    .left, .right {
        border: 1px solid;
        border-color: #888 #dadada #dadada #888;
        display: inline-block;
        padding: 0px 5px;
        font-size: 8px;
      }
      .left {
        width: 33%;
      }
      .right {
        width: 66%;
      }
    

  .title {
    background-color: #808080;
    padding: 2px 4px 3px 4px;
    position: relative;
    height: 2.5vh;
    
    }
    
    h1 {
      font-weight: bold;
      color: #bcbcbc;
      font-size: 13px;
      margin: 0;
      position: absolute;
      font-size: 1.5vh;
      
    }
    
    button,
    .pbuttons1,
    .pbuttons2,
    .pbuttons3 {
      margin-left: 0.5vh;
      height: 2vh;
      width: 2vh;
    }
    
    .pbuttons1 {
      right: 34px;
    }

    .pbuttons2 {
      right: 18px;
    }

    .pbuttons3 {
      right: 2px;
    }

.icon-my-computer {
    width: 100%;
    height: 100%;
}
.icon-minimize {
    height: 100%;
    width: 100%;
}

.minus{

}

.full{
    height: 80%;
    width: auto;
    border: 1px black;

}

.kreuz{

}

.icon-expand {}
.icon-close {}
.icon-inbox {}
.icon-trash {}
.icon-floppy {}
.icon-disk {}
.icon-control-panel {}
.icon-programs {}
.icon-documents {}
.icon-settings {}
.icon-find {}
.icon-help {}
.icon-run {}
.icon-shut-down {}
.icon-start {}
.icon-sound {}

.behälter{
    height: 98%;
    width: 71%;
    padding-left: 10%; 
    position: absolute;
    overflow: hidden;
    
    
}

.knöpfe{
    position: absolute;
    display: flex;
    flex-direction: row;
    width: 99%;
    height: 100%;
    margin-left: auto; 
    float: left; 
    vertical-align: center;
    justify-content: flex-end;
}

@font-face { font-family: "montserrat"; src: url("schrift/montserrat-light.ttf"); }

@font-face{
    src: url(schrift/StraightToHellBB.ttf);
    font-family: lucifer;
}

@font-face{
    src: url(schrift/OratorStd.otf);
    font-family: emre;
}

@font-face{
    src: url(schrift/DIABLO_L.TTF);
    font-family: papa;
}

@font-face{
    src: url(schrift/Quick\ Kiss\ Personal\ Use.ttf);
    font-family: lady
}

.temre,
.tteufel,
.tlady,
.tpapst,
.text
{   display: flex;
     background-color: #000000;
     align-items: flex-end;
     justify-content: flex-start;
     color: beige;
     padding-bottom: 14%;
     word-wrap: break-word;
    hyphens: auto;
 }


 .text{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 45pt
 }

.temre{
    font-family: emre;
    font-size: 40pt;
    color: #39ff14 
 }
 
.tteufel{
    font-family: lucifer;
    font-size: 49pt;
    color: rgba(115, 12, 2, 100);
}

.tpapst{
    font-family: papa;
    font-size: 45pt;
    color: goldenrod;
}

.tlady{
    font-family: lady;
    font-size: 43pt;
    color: rgba(254, 100, 255, 100);
}
 .optionen{
    display: flex;
    flex-direction: column;
    width: 40%;
    height: 100%;
    margin-left: auto;
    margin-right: 2%;
    justify-content: space-around;
    align-items: center;
    align-content: center;   
    float: left; 
    vertical-align: center;
}

.normaloo,
.teufel,
.emre,
.lady,
.normal,
.papst{
    display: flex; 
    background-color: white;
    text-decoration: none;
    word-wrap: break-word;
    hyphens: auto;
}
.normal2{
    font-family: 'Times New Roman', Times, serif;
    font-size: 32pt;
    background-color: #000000;
    display: flex;
    color: #39ff14 !important;
}

.normal{
    font-family: 'Times New Roman', Times, serif;
    font-size: 32pt;
    color: #000000 !important;
}

.normaloo{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 25pt;
    color: blue !important;
}

.teufel{
    font-family: lucifer;
    font-size: 36pt;
    color: rgba(115, 12, 2, 100) !important;
}

.emre{
    font-family: emre;
    font-size: 36pt;
    color: black !important;
    
}

.papst{
    font-family: papa;
    font-size: 25pt;
    color: goldenrod !important;
}

.lady{
    font-family: lady;
    font-size: 30pt;
    color: rgba(254, 100, 255, 100) !important;
}

.behälteroptionen{
    height: 29%;
    width: 40%; 
    bottom: 4%;
    position: absolute;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: space-around;
    
}

.behälteroptionen1{
    height: 72%;
    justify-content: space-around;
    width: 40%; 
    position: absolute;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    padding-left: 2%;
    right: 0;
    
    
}

.containeroption1,
.containeroption2,
.containeroptiondrei,
.containeroption {
    border: 1pt solid;
    border-bottom-color: #535353;
    border-right-color: #535353;
    border-left-color: #dbdbdb;
    border-top-color: #dbdbdb;
    background-color: #bfbfbf;
    font-size: 13px;
    padding: 2px;
}

.containeroption1{
margin-bottom: 4%;

}

.containeroption2{
margin-bottom: 1%;
}

.containeroption3{
margin: 0;
}

.containeroptionstarten {
    border: 1pt solid;
    border-bottom-color: #535353;
    border-right-color: #535353;
    border-left-color: #dbdbdb;
    border-top-color: #dbdbdb;
    background-color: #bfbfbf;
    font-size: 13px;
    padding: 2px;
    margin-right: 3%;
}

.containeroptionheadline{
    border: 1pt solid;
    border-bottom-color: #535353;
    border-right-color: #535353;
    border-left-color: #dbdbdb;
    border-top-color: #dbdbdb;
    background-color: #bfbfbf;
    font-size: 13px;
    padding: 2px;
    margin-right: 10%;
}

@media screen and (max-device-width: 480px) {
    body {
      flex-direction: column;
    }
  }

  .statusbaroptionen {
    display: flex;
    height: 1vh;
  
}

.container-inneroptionen{
    border: 2px solid;
      border-bottom-color: #c7c7c7;
      border-right-color: #c7c7c7;
      border-left-color: #808080;
      border-top-color: #808080;
}

.sprech{
    all: unset;
    margin: 0;
    padding: 0;
}

.video1{
width: 100%;
height: 55%;

}

.schieber{
    width: 95%;
    height: 95%;
    position: absolute;
    right: 0;
    visibility: visible;
}

.schieberaktiv{
    width: 95%;
    height: 95%;
    position: absolute;
    right: 0;
    visibility: visible;
}

.containeroptionstarten {
    border: 1pt solid;
    border-bottom-color: #535353;
    border-right-color: #535353;
    border-left-color: #dbdbdb;
    border-top-color: #dbdbdb;
    background-color: #bfbfbf;
    font-size: 13px;
    padding: 2px;
    margin-left: 3%;
}

.trashclass {
    position: relative;
    border: 1pt solid;
    border-bottom-color: #535353;
    border-right-color: #535353;
    border-left-color: #dbdbdb;
    border-top-color: #dbdbdb;
    background-color: #bfbfbf;
    font-size: 13px;
    padding: 2px;
    width: 100%;
    height: 77%;
    
}

.behältertrash{
    margin-left: 28%; 
    position: absolute;
    display: flex;
    height: 88%;
    width: 24%;
   
    
}

.süssis{
max-width: -moz-available;
max-width: -webkit-fill-available;
min-height: 100%

}

.container-innertrash{
    border: 2px solid;
border-bottom-color: #c7c7c7;
border-right-color: #c7c7c7;
border-left-color: #808080;
border-top-color: #808080;
width: 100%;
height: 90%;
background-color:white;
overflow-y: scroll; 
position: sticky;
}

.trashtext{
    position: absolute;
    color: red;
    word-wrap: break-word;
    hyphens: auto;
     
}

.titletrash {
    background-color: #808080;
    padding: 2px 4px 3px 4px;
    position: relative;
    height: 2.5vh;
}

.replaylink{
text-decoration: none;
}

.computerclass {
    border: 1pt solid;
    border-bottom-color: #535353;
    border-right-color: #535353;
    border-left-color: #dbdbdb;
    border-top-color: #dbdbdb;
    background-color: #bfbfbf;
    font-size: 13px;
    padding: 2px;
    
}

.behältercomputer{
        height: 95%;
        width: 98%; 
        bottom: 8%;
        position: absolute;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
}


.container-innercomputer{
    border: 2px solid;
    border-bottom-color: #c7c7c7;
    border-right-color: #c7c7c7;
    border-left-color: #808080;
    border-top-color: #808080;
}

.computertext{
    display: flex; 
    background-color: white;
    text-decoration: none;
     
}

.titlecomputer {
    background-color: #808080;
    padding: 2px 4px 3px 4px;
    position: relative;
    height: 2.5vh;
}


.containerbox {
    position: relative;
    border: 1pt solid;
    border-bottom-color: #535353;
    border-right-color: #535353;
    border-left-color: #dbdbdb;
    border-top-color: #dbdbdb;
    background-color: #bfbfbf;
    font-size: 13px;
    padding: 2px;
    max-width: 90%;
}
    
ul.toolbar {
      list-style: none;
      padding: 2px 0;
      margin: 0;
      font-size: 1.2vh;
    }

li {
        display: inline-block;
        padding: 0 5px;
      }
    
    .container-innerbox {
      border: 2px solid;
      border-bottom-color: #c7c7c7;
      border-right-color: #c7c7c7;
      border-left-color: #808080;
      border-top-color: #808080;
      }

ul.icons {
        list-style: none;
        padding: 2px 0;
        margin: 0;
         }
li {
          display: inline-block;
          padding: 0 5px;
        }

.achievment{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7);
    padding-left: 0;
    padding-top: 0;
    top: 0;
    left: 0;
    
    
}

.container-innerpopup{
    border: 2px solid;
      border-bottom-color: #c7c7c7;
      border-right-color: #c7c7c7;
      border-left-color: #808080;
      border-top-color: #808080;
      display: flex;
}

.containeroptionpopup {
    border: 1pt solid;
    border-bottom-color: #535353;
    border-right-color: #535353;
    border-left-color: #dbdbdb;
    border-top-color: #dbdbdb;
    background-color: #bfbfbf;
    font-size: 13px;
    padding: 2px;
    position: absolute;
    min-width: 25%;
    max-width: 25%;
}

.behälterpopup{
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    
}

.trophy{
    width: 22%;
    align-self: center;
    padding-left: 2%
}

.achievmenttext{ 
display: flex; 
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 25pt;
color: white !important;
}

.schließtext{
display: flex; 
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
justify-content: center;
align-self: flex-end;
height: auto;
width: auto;
background-color: #8d8d8d;
margin: 0;
padding: 0;
font-size: 2vh;
border: solid 1px black;
}

.achievmentausdruck{
    display: flex; 
    justify-content: center;
    align-content: center;
    padding-left: 5%;
    width: -webkit-fill-available;
}