style.css

/*
 *    ,-----,
 *    |     |    ,--------------------------------------------------------,
 *    |     |   ( Projekt objęty jest licencją. Przeczytasz o niej na:     )
 *   (|-----|)  < github.com/CiupagaPL/Tebowy_Dzien/blob/stable/LICENSE.md )
 *   |\_____/|   "--------------------------------------------------------"
 *   |       |    __---.
 *   ( o   o )   /      )
 *   \ = . = \__/    --"
 *   /              /
 *  |              |
 *   \ \    \ \   |
 *    | |    | | /
 *   (_(_)--(_(_)
*/

@font-face{
  font-family:orangeKid;
  src:url("orangeKid.otf")format("truetype");
}

@keyframes load{
  0%{ transform:rotate(0turn); }
  100%{ transform:rotate(3turn); }
} @keyframes show{
  0%{
    visibility:visible;
    opacity:0;
  } 50%{
    visibility:visible;
    opacity:0;
  } 100%{
    opacity:1;
    visibility:visible;
  }
} @keyframes hide{
  0%{
    opacity:1;
    visibility:visible;
  } 99%{ visibility:visible; }
  100%{
    opacity:0;
    visibility:hidden;
  }
}

html{
  background-color:#002f6d;
  overflow:hidden;
  user-select:none;
  animation-fill-mode:both;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

#render{
  border:4px solid white;
  position:absolute;
  visibility:hidden;
  opacity:0;
  top:calc(40% - (480px / 2));
  left:calc(50% - (640px / 2));
  width:360px;
  height:360px;
  box-shadow:0px 0px 8px 2px white;
  overflow:hidden;
  cursor:url("Source/mouse.png"),pointer;
}

#load{
  position:fixed;
  bottom:2vw;
  right:2vw;
  width:6vw;
  height:6vw;
  display:flex;
  visibility:visible;
  opacity:1;
} #load::after{
  text-align:center;
  font-family:orangeKid;
  font-size:1vw;
  content:"";
  color:white;
  width:4vw;
  height:4vw;
  border:1vw solid transparent;
  border-top-color:white;
  border-bottom-color:white;
  border-radius:50%;
  animation:load 1.5s ease infinite;
}

#error{
  width:4vw;
  height:4vw;
  position:fixed;
  bottom:3vw;
  right:3vw;
  visibility:hidden;
  opacity:0;
}

#render.show,#load.show,#error.show{ animation:show 1s forwards; }
#render.hide,#load.hide,#error.hide{ animation:hide 0.5s forwards; }