src/css/main.css
@import url("https://fonts.googleapis.com/css2?family=Inter&family=Source+Code+Pro&display=swap"); /* Source Code Pro, Inter */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons+Round"); /* Material Icons Round */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"); /* Material Icons Outlined */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone"); /* Material Icons Two Tone */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap");
@import url("./cursors.css");

.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.centertext {
  text-align: center;
}

.fullscreen {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}
div.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

div#app *:not(.window):not(.ol) {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  outline: none !important;
}

div#app *:not(.window)::after,
div#app *:not(.window),
div#app *:not(.window)::before {
  transition: all 0.3s, color 0.1s, top 0s, left 0s;
}

.material-icons-round {
  vertical-align: middle;
  margin: 0 5px;
  font-size: calc(1.4em);
}

div.app {
  background-color: #000;
}

div#app {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

div.app.floating {
  top: 35px;
  left: 0px;
  width: calc(100% - 340px);
  height: calc(100% - 35px);
  overflow: hidden;
}

.gray {
  filter: grayscale(100%) !important;
}

div#app > div.app {
  transition: filter 3s;
}
