@font-face { font-family: "Windows Regular"; src: url('/fonts/Windows-Regular.ttf'); }
@font-face { font-family: "TerminalVector"; src: url('/fonts/TerminalVector.ttf'); }

body {
overflow:hidden;
background-color:#000;
height:100vh;
width:100vw;
user-select: none;
}

.center-screen {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}

.warningscreen {
display:block;
position:absolute;
left:0px;
top:0px;
width:100vw;
height:100vh;
padding:10px;
text-align:center;
background:#000;
color:#fff;
z-index:100;
overflow:scroll;
}

.taskbar {
display:block;
width:100vw;
height:25px;
position:absolute;
left:0px;
bottom:0px;
background-image: linear-gradient(
  0deg,
  hsl(222deg 72% 47%) 1%,
  hsl(222deg 72% 48%) 23%,
  hsl(221deg 72% 49%) 34%,
  hsl(221deg 71% 49%) 42%,
  hsl(220deg 72% 50%) 50%,
  hsl(220deg 72% 50%) 57%,
  hsl(221deg 71% 50%) 63%,
  hsl(221deg 72% 49%) 69%,
  hsl(222deg 72% 48%) 74%,
  hsl(222deg 72% 47%) 79%,
  hsl(221deg 70% 49%) 84%,
  hsl(219deg 68% 51%) 88%,
  hsl(218deg 71% 53%) 92%,
  hsl(216deg 74% 55%) 96%,
  hsl(214deg 77% 57%) 100%
);
overflow:hidden;
z-index:10;
image-rendering: pixelated;

}

.icon {
display:block;
text-align:center;
color:#fff;
cursor:pointer;
z-index:2;
}

.icon img {
width:64px;
height:64px;
image-rendering: pixelated;
}
.icon span {
filter: drop-shadow(1px 1px 0px #000);
}

#icons {
position:absolute;
left:10px;
top:0px;
display:flex;
flex-direction:column;
flex-wrap:wrap;
height:calc(100% - 40px);
column-gap:10px;
align-content:flex-start;
row-gap:10px;
margin-top:10px;
/* https://github.com/removetooth/riffs-awesome-website */
}

.taskbar .time {
float:right;
width:80px;
height:25px;
border-left:2px solid #1fb0ef;
background:#0f8fea;
text-align:center;
font-size:16px;
line-height: 25px;
color:white;
}

a {
text-decoration:none;
}

a:link, a:visited {
color:white;
}

.fadein {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 3s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInOutOpacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*.battery {
width:17px;
height:12px;
-ms-interpolation-mode: nearest-neighbor;
image-rendering: crisp-edges;
image-rendering: pixelated;
background:url("/media/battery.png");
transform: scale(1.3);
}

.battery.highest {background-position: -1px -1px;}
.battery.high {background-position: -19px -1px;}
.battery.medium {background-position: -38px -1px;}
.battery.low {background-position: -56px -1px;}
.battery.charging {background-position: -74px -1px;}*/

.devmode {
position:absolute;
right:15px;
bottom:1vh;
z-index:10;
color:white;
font-family: 'Comic Sans MS', cursive;
font-size:2vw;
opacity:10%;
filter: drop-shadow(0px 0px 10px black) drop-shadow(0px 0px 10px black);
}

#taskbar-icons {
height:25px;
max-width:70vw;
display:inline-block;
}

blink {
animation: fadeInOutOpacity 1s step-start infinite;
}