/* comic neue font!!! */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
:root, body, button, html, img {
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  user-select: none;
  color: white;
  border: none;
  background: none;
  image-rendering: pixelated;
}
h1 {
  font-size: 5vh;
}
h2 {
  font-size: 3vh;
}
a {
  color: white;
  background: radial-gradient(rgba(255,255,255,.4), transparent 75%);
  height: fit-content;
}
/* bg stuff */
html {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  overflow: hidden;
  background-color: #757ddb;
  background: linear-gradient(180deg, #89c0ff, #4a6cff); /* alt colors #58b7ff, #682bb0*/
}
#bg {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: .2;
  mix-blend-mode:color-burn;
}

/* window stuff */
.window {
  position: absolute;
  background-color: rgba(0, 0, 0, .3) !important;
  backdrop-filter: blur(2vh);
  overflow: hidden;
  min-height: 3vh;
  max-height: 90vh;
  min-width: 30vh;
  max-width: 98vw;
  height: 50vh; /* default sizes */
  width: 50vw; /* default sizes */
  box-shadow: rgba(0,0,0,0.3) .5vw .5vh 1vh;
}
[closed="true"] {
  transition: all 0.15s ease;
}
.titlebar {
  position: relative;
  height: 3vh;
  font-size: 2.5vh;
  background-color: rgba(0,0,0,.1);
  cursor: grab;
}
.titlebar:active {
  cursor: grabbing;
}
.windowtitle {
  white-space: nowrap; 
  width: 70% !important;
  max-width: fit-content; 
  overflow: hidden;
  text-overflow: ellipsis; 
  display: block;
  position: absolute;
  left: .5vw;
}
.tbbtns {
  height: 100%;
  display: block;
  position: absolute;
  right: .5vw;
}
.tbbtns>button {
  opacity: .5;
  padding: 0;
  padding-right: .5vw;
  transition: opacity 0.25s ease;
}
.tbbtns>button:hover {
  opacity: .75;
}
.tbbtns>button:active {
  opacity: 1;
}
.closebtn {
  width: 5vw;
  max-width: 3vh;
  color: rgb(255,100,100);
  height: 100%;
  border: none;
  background-color: transparent;
  font-size: inherit;
}
.minimizebtn {
  width: 5vw;
  max-width: 3vh;
  color: rgb(255, 160, 66);
  height: 100%;
  border: none;
  background-color: transparent;
  font-size: inherit;
}
.winresize {
  background-color: transparent;
  border: none;
  border-bottom: .4vh solid white;
  border-right: .4vh solid white;
  opacity: .45;
  position: absolute;
  height: 2vh;
  width: 2vh;
  bottom: 0;
  right: 0;
  padding: 0;
  transition: all 0.5s ease;
}
.winresize:hover {
  border-bottom-width: .5vh;
  border-right-width: .5vh;
  opacity: 0.75;
}
.winresize:active {
  border-bottom-width: .6vh;
  border-right-width: .6vh;
  opacity: 1;
}
.windowcontent {
  border: none;
  width: 100%;
  height: calc(100% - 3vh);
}

/* app stuff */
.app {
  width: 10vh;
  height: 10vh;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.fileIcon {
  height: 5vh;
}
.fileName {
  font-size: 1.5vh;
  max-width: 9vh;
  padding: 0;
  margin: 0;
  filter: drop-shadow(.2vw .2vh .1vh rgba(0,0,0,0.4));
}

/* taskbar stuff */
#taskbar {
  position: fixed;
  display: flex;
  align-items: center;
  width: 100vw;
  bottom: 0;
  background-color: rgba(0, 0, 0, .3);
  backdrop-filter: blur(2vh);
  height: 6vh;
  padding-top: .5vh;
  padding-bottom: .5vh;
  z-index: 2000;
}
#tbwins {
  display: inherit;
  overflow-x: scroll;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 3vw);
  padding-left: 1.2vh;
}
#taskbaricon, .tbApp {
  background: transparent;
  border: none;
  height: 100%;
  padding: .5vh;
  font-size: 2vh;
  margin-right: .5vh;
}
.tbApp[top=true] {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 10%;
}
#taskbaricon {
  padding: 0;
  padding-right: .5vh;
  margin-right: 1vh;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
#taskbaricon>img {
  height: 100%;
}
#taskbaricon:hover, .tbApp:hover, .app:hover {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 30%;
}
#taskbaricon:active, .tbApp:active, .app:active {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 40%;
}
/* super cool effects */
.glossbg {
 background: linear-gradient(67deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0.15) 25%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.2) 45%, rgba(0,0,0,0.18) 50%, rgba(0,0,0,0.15) 53%, rgba(0,0,0,0.2) 67%, rgba(0,0,0,0.1) 100%); /* super complicated but it works so im keeping it */ 
}
#taskbaricon, .tbApp, .app {
  transition: all 0.25s ease;
}

/* light mode */
@media (prefers-color-scheme: light) {
  .glossbg {
    background: linear-gradient(67deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0.2) 45%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.25) 53%, rgba(255, 255, 255, 0.2) 67%, rgba(255, 255, 255, 0.3) 100%); /* super complicated but it works so im keeping it */ 
  }
  .window, #taskbar {
    background-color: rgba(229, 250, 255, 0.3) !important;
    box-shadow: rgba(0,0,0,0.13) .5vw .5vh 1vh;
  }
  .titlebar {
    background-color: rgba(255, 255, 255, 0.4) !important;
  }
  :root, body, button, html {
    color: black;
  }
  .winresize {
    border-color: black;
  }
  #tbwins {
    scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
  }
  #taskbaricon>img {
    filter: invert();
  }
}