@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;}

#stuffMenu{grid-column: 1; grid-row: 3 / 5;
    background-color:black; border-top: 1px solid white; border-right: 1px solid white;
    width:75%;
}
#stuffMenu div {color: white; background:black; height:20%;}
#stuffMenu div:hover {background:gray;}
#stuffMenu div:active {color:black; background:white;}


#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;
}

#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;}
#langDiv{width:60px; height:100%; float:right;}


#desktop div {/*background-color:gray; border:1px solid white;*/}

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


/* SOMETRASH */

#sometrash {
    width:50%; height:100%; 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;
}
.close {
    float:right;
}
#gray {
    position:fixed; bottom:0; left:0; width:100%; height:96px;
}

@media screen and (max-width: 1500px) { /*arreglar stuffMenu */
    #box {width:60%; height:95vh;}
    #sometrash {width:98%;}
    #desktop {
        display:grid;
    }
    #taskbar {position:fixed; bottom: 0; height:100px; width:60%;}
    #stuffMenu {position:fixed; bottom: 100px; width:200px; height:250px;}

    
}
@media screen and (max-width: 800px) { .noPhone {display:none;}
    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;}
    #messageBox{grid-column: 1; grid-row: 1 / 3; width:100%; display:inline-block; position:relative; right:20px;}
}