@font-face {
        font-family: "bluescreenofdeath";
        src: url("font/bluescreenofdeath.ttf");
    }
body {
    height: 95vh; margin:0;
    color:white; background:url(img/bgbody.png);
    font-family:"bluescreenofdeath", sans-serif;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; 
}


/* DESKTOP */

#box {width:50%; margin:auto; margin-top:2%; border: 2px solid white; 
    background:url(img/bg.png);}
#desktop {
    display:grid;
    grid-column: 3;
    grid-row: 4;
    grid-auto-rows: minmax(100px, 150px);
    grid-auto-columns: minmax(100px, 320px);
}
#a1{grid-column: 1; grid-row: 1;}
#a2{grid-column: 1; grid-row: 2;}
#a3{grid-column: 1; grid-row: 3 / 5;}




#b1{grid-column: 2; grid-row: 1;}
#b2{grid-column: 2; grid-row: 2;}
#b3{grid-column: 2; grid-row: 3 / 5;}

#messageBox{grid-column: 1 / 4; grid-row: 2;
    background-color:black; border: 1px solid white;
    width:50%; padding:20px; margin:auto; text-align:center;
    position:relative;
}

#c1{grid-column: 3; grid-row: 1;}
#c2{grid-column: 3; grid-row: 2;}
#c3{grid-column: 3; grid-row: 3 / 5;}


#taskbar{
    color:white; background:black;
    width:100%; height: 30px;
    border-top:solid 1px white;}
#taskbar div {
    display:inline-block;
    height:24px; 
    background:black;
    text-align:center;
    margin:2px;
    border: solid 1px white;}
#stuffButton{width:80px;}
#stuffMenu{grid-column: 1; grid-row: 3 / 5;
    background-color:black; border-top: 1px solid white; border-right: 1px solid white;
    width:90%;
}
#stuffMenu div {color: white; background:black; height:20%;}
#stuffMenu div:hover {background:gray;}
#stuffMenu div:active {color:black; background:white;}
#langDiv, #clock {width:60px; height:100%; float:right;}
#copied {opacity:0;}



figure{text-align:center; margin-left:25%; width:96px; cursor:default;}
figcaption {background-color:black; color:white;}

button{color:white; background:black; border:2px solid white; font-size:20px;
    font-family:"bluescreenofdeath", sans-serif;}
.close{border-top:0; border-right:0; border-bottom:0; height:24px; font-size:16px;}

/* SOMETRASH */

#sometrash {
    width:70%; height:98%; margin:auto; margin-top:1%; background: black;
    border: 2px solid white; border-bottom: 0;
    display:none;
}
#sometrashBar {
    border-bottom: 2px solid white; font-size:20px; height:24px;
}
#categoryBar {
    text-align:end; font-size:18px;
}
.categoryButton:hover {
    background:gray;
    cursor: pointer;    
}
.categoryButton:active {color:black; background:white;}
.active {
    color:black; background-color:white;
}
.categoryTit {text-decoration-line: underline;}
#sometrashContent {
    overflow-y:scroll; overflow-x:hidden; height:94%;
    text-align:center;
}
.close {
    float:right;
}
h3 {color:gray;}
#gray {
    position:fixed; bottom:0; left:0; width:100%; height:96px;
}

#botButtons{
    position:fixed; bottom: 60px; width:68%;
}
.botButton {
     float:right;
}
@media screen and (min-width: 801px) {.noPc {display:none;}
    @media screen and (max-height:700px) {
        #taskbar {position:fixed; bottom: 0; height:100px; width:50%;}
        #stuffMenu {position:fixed; bottom: 100px; width:200px; height:200px;}
    }
}

@media screen and (max-width: 1600px) {
    #sometrash {width:800px;}
    #stuffMenu {width:240px;}
    #botButtons {width:720px;}
}


@media screen and (max-width: 800px) { .noPhone {display:none;} #stuffMenu{position:relative; top:-1000px;}
    body {background:url(img/bg.png);}
    #box {
        background:rgba(0,0,0,0);
        border:0;
    }
    #desktop {
        display:grid;
        grid-column: 1;
        grid-row: 3;
        grid-auto-rows: minmax(200px, 200px);
        grid-auto-columns: minmax(200px, 320px);
    }
    #a1{grid-column: 1; grid-row: 1;}
    #a2{grid-column: 1; grid-row: 2;}

    #c1{grid-column: 1; grid-row: 3;}
    
    figure {width:125px;}
    figure > img {height:100%; width:100%;}
    figure > figcaption {font-size:20px;}

    
    #sometrash {width:98%; height:98%;}
    #botButtons {text-align:center; width:100%;  bottom: 10px;}
    .botButton {float:none;}

    #messageBox{grid-column: 1; grid-row: 1 / 3; width:100%; display:inline-block; position:relative; right:20px;}
}