main.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

@media (prefers-color-scheme: dark) {
  html {
    --window: #121212;
    --bg: #191919;
    --text: #d6d6d6;
    --link: #89b4fa;
    --surface: #1f1f1f;
    --separator: #858585;
    --accent: #f0b77f;
    --hover: #333;
  }

  .menubutton:hover {
    background: var(--hover);
  }
}

@media (prefers-color-scheme: light) {
  html {
    --window: #e0e0e0;
    --bg: #e6e6e6;
    --text: #222;
    --link: #527ec6;
    --surface: #ededed;
    --separator: #7a7a7a;
    --accent: #e99746;
    --hover: #ddd;
  }

  .menubutton {
    filter: invert(100%);
  }

  .menubutton:hover {
    background: #222;
  }
}

html {
  background: var(--bg);
  user-select: none;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
}

body {
  font-size: 16px;
  line-height: 1;
  margin: 1px;
  padding: 1em;
}

a {color: var(--link);}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 100;
  line-height: 1;
}

hr {border: 1px solid var(--separator);}

p {font-size: 16pt;}

ul {text-align: left;}

.main,
.menu {
  background: var(--surface);
  box-shadow: 0 0 5px #00000022;
  font-size: 16px;
  line-height: 1.5;
  margin: 1em;
  overflow: auto;
  border-radius: 10px;
  text-align: center;
}

.main {
  padding-bottom: 7px;
}

.menu {
  top: 10px;
  position: sticky;
  background: var(--surface);
  z-index: 4;
}

.menubutton {
  display: inline-block;
  transition: 0.1s;
  width: 64px;
  height: 64px;
  border-radius: 10px;
}

.windowtitle {
  font-weight: bold;
  font-size: 16pt;
  text-align: center;
  padding: 2px;
  background: var(--window);
  margin-bottom: 5px;
}

.footer {
  text-align: center;
  font-size: 12px;
}

.footertext {
  font-family: monospace;
}

.folder {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 0 5px #00000055;
  margin: 5px;
  text-decoration: none;
  color: var(--text);
  font-size: 35pt;
  text-align: center;
  line-height: 4;
}

.publicmodel {
  display: inline-block;
  margin: 5px;
  padding: 20px;
  width: 200px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 0 5px #00000055;
  text-decoration: none;
  color: var(--text);
  line-height: 1;
}

.folder:hover,
.publicmodel:hover {
  background: var(--hover);
}

.media {
  margin: 5px;
  display: inline-block;
}

.label {
  font-size: 20px;
  font-weight: bold;
  color: var(--text);
  display: block;
}

.titleseparator {
  background: var(--surface);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 3mm;
  padding: 1mm;
  overflow: auto;
  font-size: 30px;
  border-bottom: solid 1mm var(--accent);
}

/*
.model {
  background: var(--surface);
  box-shadow: 0 0 5px #00000022;
  border-radius: 10px;
  font-size: 16px;
  padding: 1em;
  display: inline-block;
  margin: 5px;
  margin-top: 7px;
  margin-bottom: 7px;
}

.Jordan,
.Blueberri {
  width: 512px;
  height: 512px;
  margin: 10px;
}

.JordanMAIN,
.BlueberriMAIN {
  position: absolute;
  z-index: 1;
}


.JordanEye {
  position: absolute;
  z-index: 2;
}

.JordanMouth {
  position: absolute;
  z-index: 3;
}

.BlueberriFace {
  position: absolute;
  z-index: 2;
}

.slidecontainer {
  display: flex;
  width: 100%;
}*/