@-moz-document url-prefix() {
  div{
    scrollbar-color: rgba(113, 128, 128, 0.774) rgba(212, 212, 212, 0.041) !important;
    scrollbar-width: thin !important;
  }
}

@font-face {
  font-family: "Nulshock";
  src: url('fonts/Nulshock.otf');
}
@font-face {
  font-family: "Nexa";
  src: url('fonts/Nexa-ExtraLight.ttf');
}

body, html{
    padding:0px;
    margin: 0 auto;
          background:rgb(95, 134, 187);
}

#canvasholder{
    width:100vw;
    height:100vh;
    margin:0 auto;
    margin-top:-3%;
    padding:0;
    position:fixed;
    overflow:hidden;
}
#canvas{
    width:100vw;
    height:120vh;
    margin:0 auto;
   
    padding:0;
    position:fixed;
}

#container{
    width:45%;
    max-width:800px;
    height:75%;
    min-height: 500px;
    margin-left:10%;
    margin-top:3%;
    z-index:0;
    position:relative;

}

.tab{
    position:relative;
    width:17%;
    height:25%;
    max-height:150px;
    margin-left:-1.25%;
    overflow: auto;
    clip-path: polygon(3% 15%, 15% 0, 100% 0, 100% 100%, 15% 100%, 3% 85%, 0% 80%, 0 20%);
}
.tabtitle{
    position:relative;
    font-family: "Nexa", sans-serif;
    z-index:inherit;
    color:white;
    margin-top:27%;
    margin-left:2%;
    padding-bottom:50%;
    writing-mode: sideways-lr;
    white-space:preserve nowrap;
     user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            -moz-user-select: none;
            -ms-user-select: none;
}
#cover{
    background:rgb(117, 83, 83);
    z-index:3;
}
#devices{
    background:rgb(92, 55, 33);
    margin-top:-1.5%;
    z-index:2;
}
#websites{
    background:rgb(199, 166, 106);
    margin-top:-1.5%;
    z-index:1;
}


#main{
    z-index:50;
    width:90%;
    height:100%;
    margin-left:3%;
    border-radius: 10px;
    position:absolute;
     overflow: auto;
    background:rgb(134, 99, 99);
}
.mainbody{
    width:95%;
    height:96%;
    margin-left:2.5%;
    margin-top:2.5%;
    border-radius:10px;
    background:rgb(235, 232, 232);
    overflow:hidden;
    position:absolute;
    z-index:1;
    /* offset-x | offset-y | blur-radius | spread-radius*/
    box-shadow:0px 0px 1px 2px rgb(104, 103, 103), 
               inset 0px 0px 5px 5px rgba(185, 183, 183, 0.829);
}


.coverarea{
    margin:2% 0% 2% calc(5% - 10px);
    width:90%;
    padding:10px;
    border-radius:10px;
    border: 1px solid black;
    text-align:center;
}
.audiobtn{
    width:50%;
    margin-left:25%;
}

#exit{
    text-align:center;
    margin-top:2.5%;
    font-family:'Nexa';
}
#exit a {
    text-decoration:none;
    color:rgb(167, 20, 9);
}



.progbox{
    height:20%;
    min-height:175px;
    width:90%;
    margin:5%;
}

.titlebar{
    height:15%;
    border-bottom:1.5px solid black;
    display:flex;
    flex-direction:row;
    justify-content: space-between;
}
.titlebar h3{
    font-size:2em;
    padding:0px 5px 0px 5px;
    display:inline;
    font-family: "Nexa", sans-serif;
       background:#EBE8E8;
}
.titlebar h4{
    font-size:1.8em;
    display:inline;
    font-style:italic;
    width: 100%; 
    font-family: "Nexa", sans-serif;
       background:#EBE8E8;
       padding-right:10px;
   
}

.titleright{
    margin-top:2%;
    background:#EBE8E8;
}

.titleright h5{
  display:inline;
  font-size:1.2em;
  font-style:italic;
   margin-bottom:auto;
   background:#EBE8E8;
   padding:5px;
}
.titleright h5 a{
    text-decoration:none;
    color:rgb(5, 134, 134);
}



.progbar{
    margin: 3% 0% 2% 2.5%;
    width:95%;
    height:7%;
    background:rgba(91, 91, 163, 0);
    border-radius:10px;
    border:1px grey solid;
    overflow:hidden;
}
.progbarbody{
    width:var(--w);
    height:100%;
    background:green;

}


.todo{
    width:100%;
    height:60%;
    padding-top:1%;
    display:flex;
    flex-direction:row;

}

.doing, .done{
    margin-left:6%;
    border-radius:10px;
    border:1px rgba(64, 46, 66, 0.411) solid;
    width:40%;
    height:100%;
    position:relative;
    overflow:hidden;
}
.doing h3, .done h3{
    margin:0.2% 0% 2% 4%;
    font-size:1.2em;
    font-family:"Nexa";
}
.todo ul{
    margin:0% 0% 0% 10%;
    padding:0px;
}
.todo li{
    padding-left:10px;
    font-size:0.8em;
}
.doing ul{
    list-style-type: "◇";
}
.done ul{
    list-style-type: "◈";
}

  .slapgrad{
    --grad-color:rgba(64, 46, 66, 0.411);
    --grad-dir:0deg;
    background:linear-gradient(var(--grad-dir), rgba(1,1,1,0) 21%, 
                                      rgb(from var(--grad-color) r g b / calc(alpha - 0.55)) 26%,
                                      rgb(from var(--grad-color) r g b / calc(alpha - 0.55)) 28%,
                                      rgba(1,1,1, 0) 28%,

                                      rgba(1,1,1, 0) 30%,
                                      rgb(from var(--grad-color) r g b / calc(alpha - 0.45)) 31%,
                                      rgb(from var(--grad-color) r g b / calc(alpha - 0.45)) 36%,
                                      rgba(1,1,1, 0) 37%, 

                                      rgba(1,1,1, 0) 39%,
                                      rgb(from var(--grad-color) r g b / calc(alpha - 0.35)) 40%,
                                      rgb(from var(--grad-color) r g b / calc(alpha - 0.35)) 45.5%,
                                      rgba(1,1,1, 0) 46%,

                                      rgba(1,1,1, 0)48%,
                                        rgb(from var(--grad-color) r g b / calc(alpha - 0.25)) 49%,
                                      rgb(from var(--grad-color) r g b / calc(alpha - 0.25)) 56.5%,
                                      rgba(1,1,1,0) 57%,

                                      rgba(1,1,1, 0) 60%,
                                      rgb(from var(--grad-color) r g b / calc(alpha - 0.25)) 60.5%,
                                      rgb(from var(--grad-color) r g b / calc(alpha - 0.25)) 68.5%,
                                      rgba(1,1,1, 0) 69%,

                                      rgba(1,1,1, 0) 73%,
                                      rgb(from var(--grad-color) r g b / calc(alpha - 0.20)) 73.5%,
      
                                      var(--grad-color) 83.5%,
                                      var(--grad-color) 100%);
    width:100%;
    height:80%;
    opacity:0.4;
    position:absolute;
    border-radius:5px;
  }

#devicesbody{
    visibility: hidden;
}
#websitesbody{
    visibility: hidden;
}



.bodyentry{
    width:100%;
    height:100%;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    padding:10px;
    overflow-y:scroll;
    font-size:0.9em;
}


.bodyentry p, .bodyentry li{
    font-family: sans-serif;
}

.titlearea{
    margin-left:calc(5% - 10px);
    margin-bottom:5%;
    width:90%;
    height:70%;
    position:relative;
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    overflow:hidden;
    border-radius:10px;
    border: 1px solid black;;
}
.titlearea:last-of-type{
    margin-bottom:20%;
}
.devimage{
    height:45%;
    width:40%;
    background:rgba(0, 128, 0, 0.185);
}

.titlelabel{
    width:60%;
    height:45%;
    text-align:center;
}
.titlelabel h3{
    font-size:2.4em;
    text-align:center;
    padding:0px;
    margin: 4% auto;
    margin-bottom:-1%;
    font-family:'Nulshock';
}
.titlelabel p{
    font-size:1.1em;
    padding-top:10px;
    margin: 0 auto;
    font-family:'Nexa';
}
.titlelabel i{
    font-size:0.8em;
    padding-top:10px;
    margin: 0 auto;
    font-family:sans-serif;
}
.titlelabel hr{
    width:80%;
}

table{
    margin:0 auto;
    width:95%;
    font-family: sans-serif;
}
th, td{
    text-align:left;
    font-weight:normal;
    border: 1px dotted black;
    padding:2px;
    font-size:0.7em;
}

.cost{
    font-size:0.8em;
}

.devdesc{
    width:97%;
    height:50%;
    overflow-y:scroll;
    padding:10px;
}

.devdesc ul{
    list-style-type: '⇢';
}
.devdesc li{
   padding-left:5px;
}
.devdesc a{
    color:rgb(64, 94, 158);
    text-decoration: none;
}



@media only screen and (max-width: 2048px){
    #container{
        margin-left: 3%;
    }
.titlearea{
    flex-direction:column;
    flex-wrap:nowrap;
    width:90%;
    height:90%;
}
.devimage{
    order:1;
    width:100%;
    height:25%;
}
.titlelabel{
    width:100%;
    height:auto;
    order:2;
}
.devdesc{
    width:95%;
    order:3;
}

}
@media only screen and (max-width: 1024px){

#container{
    margin-left:5%;
    margin-top: 10%;
    min-width:500px;
}
#canvas{
    visibility: hidden;
}
#main{
    margin-top:0%;
}

.tab{
    transform: rotate(90deg);
}
.tabtitle{
    margin-left:3%;
}
#cover{
    background:rgb(134, 99, 99);
    z-index:3;
    margin-left:5.5%;
}
#devices{
    background:rgb(73, 43, 25);
    margin-top:-43%;
    margin-left:16%;
    z-index:1;
}
#websites{
    background:rgb(199, 166, 106);
    margin-top:-30%;
    margin-left:44%;
    z-index:2;
}




}