::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100dvw;
  height: 100dvh;
  font-family: Verdana, "PingFang SC", "Microsoft YaHei", "Wenquanyi Micro Hei", sans-serif;
  overflow: hidden;
}

@supports not (width: 100dvw) {
  html {
    width: 100vw;
    height: 100vh;
  }
}

@supports not (width: 100vw) {
  html {
    width: 100%;
    height: 100%;
  }
}

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 35% 65%;
  place-items: center;
  transition: all 0.3s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
}

button {
  cursor: pointer;
}

button>span {
  pointer-events: none;
}

.hide {
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

control-zone {
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 90% 10%;
  place-items: center;
  transition: all 1s ease-in-out;
}

display-canvas {
  grid-area: 1 / 1 / 3 / 2;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  place-items: center;
  background-color: blueviolet;
  transition: all 1s ease-in-out;
}

display-canvas>.space {
  grid-area: 1 / 1 / 2 / 2;
  box-sizing: border-box;
  width: 95%;
  height: 85%;
  margin-top: 10px;
  align-self: start;
  border-radius: 20px;
  transition: all 0.3s ease;
}

ad-space {
  background-color: darkorange;
}

search-space {
  background-color: rgb(0, 210, 45);
}

notification-space {
  background-color: rgb(210, 0, 45);
}

config-space {
  background-color: rgb(0, 45, 210);
}

#privacy_module_check {
  --s: 50px;
  /* adjust this to control the size*/
  height: calc(var(--s) + var(--s)/5);
  width: auto;
  /* some browsers need this */
  aspect-ratio: 2.25;
  border-radius: var(--s);
  margin: calc(var(--s)/2);
  display: grid;
  cursor: pointer;
  background-color: #ff7a7a;
  box-sizing: content-box;
  overflow: hidden;
  transition: .3s .1s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#privacy_module_check:before {
  content: "";
  padding: calc(var(--s)/10);
  --_g: radial-gradient(circle closest-side at calc(100% - var(--s)/2) 50%, #000 96%, #0000);
  background: var(--_g) 0 /var(--_p, var(--s)) 100% no-repeat content-box,
    var(--_g) var(--_p, 0)/var(--s) 100% no-repeat content-box,
    #fff;
  mix-blend-mode: darken;
  filter: blur(calc(var(--s)/12)) contrast(11);
  transition: .4s, background-position .4s .1s,
    padding cubic-bezier(0, calc(var(--_i, -1)*200), 1, calc(var(--_i, -1)*200)) .25s .1s;
}

#privacy_module_check:checked {
  background-color: #85ff7a;
}

#privacy_module_check:checked:before {
  padding: calc(var(--s)/10 + .05px) calc(var(--s)/10);
  --_p: 100%;
  --_i: 1;
}

node-space {
  padding: 1rem;
  display: grid;
  row-gap: 1rem;
  overflow: scroll;
  background-color: rgb(220, 0, 114);
}

node-block {
  width: 100%;
  height: 100%;
  display: grid;
  border-radius: 9999px;
  place-items: center;
}

file-space {
  background-color: rgb(0, 114, 220);
}

navigation-bar {
  grid-area: 2 / 1 / 3 / 2;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 100%;
  grid-auto-flow: column;
  place-items: center;
  transition: all 1s ease-in-out;
}

navigation-bar>button {
  container-name: navbarbtn;
  container-type: size;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  font-weight: bolder;
  display: grid;
  place-items: center;
}

@container navbarbtn (min-width: 0) {
  span {
    font-size: 50cqmin;
  }
}

.clicked {
  filter: drop-shadow(0 0 0.5vmin rgb(0, 0, 0));
}

navigation-bar>button>span {
  pointer-events: none;
}

browse-zone {
  grid-area: 2 / 1 / 3 / 2;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30vmin, 1fr));
  grid-auto-flow: dense;
  place-content: start;
  overflow: scroll;
  transition: all 1s ease-in-out;
}

.fileBlock {
  width: 100%;
  aspect-ratio: 1;
  border: none;
}

.selected {
  transform: scale(0.8);
}

@media screen and (orientation: landscape) {
  body {
    grid-template-columns: 35% 65%;
    grid-template-rows: 100%;
  }

  browse-zone {
    grid-area: 1 / 2 / 2 / 3;
  }
}