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 .4s, opacity .4s;
}

.appicon.notloaded {
	transform: scale(.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 .3s, opacity .3s;
}

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

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

.home.page {
	top: 50%;
	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: .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 .3s;
}

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

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

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