:root{
  --mainbg: url("img/home/26030.jpg");
  --maintxt: #000;
  --accentbg: #55da95;
  --accentbgpale: #d1f7e3;
  --accentbgdull: #99ebc1;
  --accentbgsuper: #00bd5b;
  --accentbgdark: #04743a;
  --bordermain: 2px solid var(--maintxt);
}

@font-face {
  font-family: 'pixelFJ8pt1';
  src: url('font/PixelFJ8pt1Normal.woff2') format('woff2'),
      url('font/PixelFJ8pt1Normal.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Microsoft Sans Serif';
  src: url('font/MicrosoftSansSerif.woff2') format('woff2'),
      url('font/MicrosoftSansSerif.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

.preload {
  width:1px;
  height:1px;
  position: absolute;
  opacity:0;
}

* {
  user-select:none;
  box-sizing:border-box;
  image-rendering:pixelated;
}

html {
  width:510px;
}

body {
  margin:0;
}

.hidden {
    display:none;
}

button {
  border:none;
}

#screen {
  margin:auto;
  position:relative;
  width:510px;
  height:573px; /*funy konami number :)*/ /* :) */
  background:var(--mainbg);
  background-position:center;
  color:var(--maintxt);
  font-family: "pixelFJ8pt1", sans-serif;
}

#loading-screen {
  width:100%;
  height:100%;
  background:rgb(0, 0, 0);
  color:white;
  text-align:center;
  position:absolute;
  z-index:1000;
  padding:20px;
}

#loading-screen:hover {
  cursor: pointer;
}

#logothing{
  width:300px;
  height:300px;
  margin:auto;
  background:url(img/sleep/logo.png);
  background-position:100% 100%;
  background-repeat:no-repeat;
  background-size:contain;
  filter:grayscale(100%)
}

#loading-screen:hover #logothing{
  filter:none;
}

/* APP GRID */

.appgrid{
  display:grid;
  margin:auto;
  width:475px;
  height:450px;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr 1fr 1fr 1fr;
  grid-template-areas:'A1 A2 A3' 'B1 B2 B3' 'C1 C2 C3' 'D1 D2 D3';
  font-family:"pixelFJ8pt1", sans-serif;
}

.appgrid > div {
  height:100%;
  width:100%;
}

.appiconstyle{
  background:var(--appicon);
  background-size:64px;
  background-position:center 20px;
  height: 85px;
  width:75%;
  margin:auto;
  background-repeat:no-repeat;
}

.appiconstyle:hover{
  background:var(--appicon), radial-gradient(circle,rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0.48) 45%, rgba(255, 255, 255, 0.2) 55%, rgba(255, 255, 255, 0) 70%);;
  background-size:64px, 100%;
  background-position:center 17px, center;
  background-repeat:no-repeat;
  cursor:pointer;
}

.appnamestyle{
  text-align:center;
  width:100%;
}

.appA1{
  grid-area:A1;
  --appicon: url("img/home/address.png");
}

.appA2{
  grid-area:A2;
  --appicon: url("img/home/calendar.png");
}

.appA3{
  grid-area:A3;
  --appicon: url("img/home/clock.png");
}

.appB1{
  grid-area:B1;
  --appicon: url("img/home/email.png");
}

.appB2{
  grid-area:B2;
  --appicon: url("img/home/list.png");
}

.appB3{
  grid-area:B3;
  --appicon: url("img/home/web.png");
}

.appC1{
  grid-area:C1;
  --appicon: url("img/home/gallery.png");
}

.appC2{
  grid-area:C2;
  --appicon: url("img/home/music.png");
}

.appC3{
  grid-area:C3;
  --appicon: url("img/home/pen.png");
}

.appD1{
  grid-area:D1;
  --appicon: url("img/home/bridge.png");
}

.appD2{
  grid-area:D2;
  --appicon: url("img/home/secure.png");
}

.appD3{
  grid-area:D3;
}

/* title bar */
#app-tile {
  height:33px;
  width:100%;
  background:var(--accentbg);
  display:grid;
  grid-template-columns:auto 20px 20px 65px;
  grid-template-areas: 'TITLE CONNECT BATTERY TIME';
  place-items:center;
  font-family: "pixelFJ8pt1", sans-serif;
  border-bottom:2px solid var(--maintxt);
}

#app-tile-title{
  grid-area:TITLE;
  text-align:left;
  width:100%;
  padding-left:10px;
}

.app-tile-connect{
  grid-area:CONNECT;
  width:100%;
  height:100%;
  background-image:url(img/home/connect.png);
  background-position:center;
  background-repeat:no-repeat;
}

.app-tile-battery{
  grid-area:BATTERY;
  width:100%;
  height:100%;
  background-image:url(img/home/batt.png);
  background-position:center;
  background-repeat:no-repeat;
}

#app-tile-time{
  grid-area:TIME;
  width:100%;
  text-align:right;
  padding-right:10px;
}

/* button bottom bar */
.buttonbar {
  position:absolute;
  bottom:0;
  height:70px;
  width:100%;
  background:var(--accentbg);
  border-top:2px solid var(--maintxt);
}

#button-back {
  font-size:2rem;
  background:url(img/home/back.png);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center  left;
  height:100%;
  width:100px;
}

#button-back.disable {
  background:transparent;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center  left;
  height:100%;
}

#button-back:not(.disable):hover {
  cursor:pointer;
}

/* APP OPEN */
.app-screen > div {
  width:100%;
  height:470px;
  position:absolute;
  top:33px;
  left:0;
}

.mainA1{
  background-color:var(--accentbgpale);
  color:black;
}

.mainA2{
  background-color:var(--accentbgpale);
  color:black;
}

.mainA3{
  background-color:var(--accentbgpale);
  color:black;
}

.mainB1{
  background-color:var(--accentbgpale);
  color:black;
}

.mainB2{
  background-color:var(--accentbgpale);
  color:black;
}

.mainB3{
  background-color:var(--accentbgpale);
  color:black;
}

.mainC1{
  background-color:var(--accentbgpale);
  color:black;
}

.mainC2{
  background-color:var(--accentbgpale);
  color:black;
}

.mainC3{
  background:url(img/scribble/background.png);
  color:black;
}

.mainD1{
  background-color:var(--accentbgpale);
  color:black;
}

.mainD2{
  background-color:var(--accentbgpale);
  color:black;
}

.mainD3{
  background-color:var(--accentbgpale);
  color:black;
}

.open{
  /*this is here because im scared*/
}