honey/css/Pages/Home.css

.main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.appicon {
  width: 192px;
  height: 192px;
  object-fit: cover;
  transition: transform 0.4s, opacity 0.4s;
}

.appicon.notloaded {
  transform: scale(0.8);
  opacity: 0;
}

#theme-switcher i {
  position: relative;
  overflow: hidden;
}

#theme-switcher i::before,
#theme-switcher i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  --hidden: 1;
  opacity: calc(1 - var(--hidden));
  transform: translate(-50%, -50%) rotateZ(calc(var(--hidden) * 360deg))
    scale(calc(1 - var(--hidden) / 2));
  transition: transform 0.3s, opacity 0.3s;
}

#theme-switcher i::before {
  --hidden: 0;
  --dark: 0;
  content: "light_mode";
}

#theme-switcher i::after {
  --dark: 1;
  content: "dark_mode";
}

.home.page {
  top: 90%;
  left: 50%;
  width: 100%;
  height: auto;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.home.page:not(.current) {
  top: calc(50% - 64px);
}

.home .wrapper {
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
}

.appname {
  font-size: 48px;
}

.appdesc {
  opacity: 0.6;
  margin: 2px 12px;
}

.buttons {
  box-shadow: 2px 2px 8px #0002;
  display: flex;
  margin: 16px auto 0;
  backdrop-filter: var(--blur);
  border-radius: 24px;
  max-width: 480px;
  background: var(--background);
  padding: 2px;
  justify-content: space-between;
  transition: background 0.3s;
}

.buttons > div {
  padding: 16px;
  margin: 2px;
  cursor: pointer;
  border-radius: 20px;
  width: 100%;
  transition: background 0.2s;
}

.buttons > div:hover {
  background: var(--hover);
}

.buttons .text {
  margin-top: -2px;
}