html,
body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

* {
	user-select: none;
	touch-action: manipulation;
}

#bootup {
	width: 100vw;
	height: 100vh;
	background-color: #000;
}

#bootup-text {
	font-family: "Black-Chancery";
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	background: linear-gradient(to right, #000, #250902, #38040e, #640d14, #800e13, #ad2831, #d03943);
	background-clip: text;
	text-shadow: 10px 10px 0 #ffffff05;
	color: transparent;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: gradient 3s linear 0;
}

canvas {
	display: none;
	width: 100vw;
	height: 100vh;
}

/* main {
	display: none;
	position: absolute;
	background-color: rgba(127, 127, 127, 0.75);
	top: 10vh;
	left: 35vw;
	height: 70vh;
	width: 30vw;
	border-radius: 5vh;
	display: flex;
	justify-content: baseline;
	align-items: center;
	flex-direction: column;
} */

main {
	padding: 1vh;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: calc(100vh - min(10vw, 7vh));
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(6, 1fr);
}

.shortcut {
	width: 85%;
	height: 95%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
	color: white;
	font-size: medium;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	text-align: center;
}

.shortcut:hover {
	background-color: #2f2f2f;
}

.shortcut[class*="focused"] {
	background-color: #444444;
}

.thumbnail {
	width: calc(min(8vw, 8vh));
	height: calc(min(8vw, 8vh));
}

.thumbnail img {
	width: 100%;
	height: 100%;
}

.folder {
	position: absolute;
	top: 10vh;
	left: 15vw;
	display: none;
	width: 66vw;
	height: 66vh;
	background-color: #292929dd;
	box-shadow: 0 0 15px #ffffff88;
	grid-template-rows: 5fr 1fr 1fr 1fr 1fr;
}

.folder[class*="focused"] {
	display: grid;
}

@media screen and (max-width: 1000px) {
	main {
		grid-template-columns: repeat(4, 1fr);
	}

	.shortcut {
		width: 15vw;
		height: 10vh;
	}

	.thumbnail {
		width: calc(min(5vw, 6vh));
		height: calc(min(5vw, 6vh));
	}
}

footer {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: calc(min(10vw, 7vh));
	background-color: #111111;
	border-top: 1px solid #444444;
	justify-content: space-between;
	align-items: center;
	color: white;
}

footer #right-bar {
	display: flex;
	justify-content: start;
	align-items: center;
}

footer #right-bar .right-bar-icon {
	width: calc(min(9vw, 6.5vh));
	height: calc(min(9vw, 6.5vh));
	background-size: calc(min(9vw, 6.5vh)) calc(min(9vw, 6.5vh));
}

footer #right-bar .right-bar-icon:hover {
	background-color: #55555599;
	/* box-shadow: 0 0 5px #555555; */
}

footer #right-bar #windows-icon:hover {
	filter: brightness(133%);
	background-color: transparent;
}

#windows {
	position: absolute;
	bottom: calc(min(10vw, 7vh));
	left: 1vw;
	display: none;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 8em;
	color: white;
	background-color: #494949;
	border-radius: 0.2em;
	z-index: 999;
}

.windows-item {
	border-top: 1px solid black;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 7em;
	height: 1.75rem;
	cursor: pointer;
	z-index: 999;
}

.windows-item:first-child {
	border: none;
}

.windows-item img {
	width: 1.5rem;
	height: 1.5rem;
}

footer #left-bar {
	text-align: right;
	margin-right: 1vw;
	display: flex;
	justify-content: right;
	align-items: center;
	gap: 0.75rem;
}

footer #made-by {
	font-size: large;
}

footer a {
	color: #0000a8;
	font-weight: bold;
}

footer div[id*="icon"] {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	background-size: 1.5rem 1.5rem;
}

/* main > div {
	width: 30vw;
	height: 60vh;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	overflow-y: auto;
}

@media screen and (max-width: 1000px) {
	main > div {
		width: 75%;
	}
}

main > div::-webkit-scrollbar {
	display: none;
	width: 0.5vw;
}

main > div:hover::-webkit-scrollbar {
	display: block;
}

main > div::-webkit-scrollbar-thumb {
	background: #2a2a2a;
	border-radius: 0.25vw;
}

main > div::-webkit-scrollbar-thumb:hover {
	cursor: ns-resize;
	background: #222;
}

main h1 {
	margin: 1em 0 0 0;
	border-radius: 5vh;
	width: 95%;
	text-align: center;
	color: #d0a3bf;
	text-shadow: 0 0 1em black;
	box-shadow: 0 0 2vh rgb(95, 95, 95);
	background-color: rgb(95, 95, 95);
	z-index: 999;
}

.container {
	margin: 1.5vh 1px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-direction: column;
	flex-wrap: wrap;
}

.element {
	width: 10vw;
	height: 30vh;
	display: flex;
	justify-content: baseline;
	align-items: center;
	flex-direction: column;
	border-radius: 2vh;
	box-shadow: 0 0 0.5em black;
	background-color: rgb(75, 75, 75);
	text-decoration: none;
}

.element h3 {
	height: 5%;
	color: #d0a3bf;
	text-align: center;
}

.element .screenshot {
	height: 60%;
	width: 60%;
}

.element .button {
	text-transform: uppercase;
	font-weight: bold;
	font-size: large;
	color: #d6bbc0;
	width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

@media screen and (max-width: 600px) {
	main {
		width: 70vw;
		left: 15vw;
	}

	.element {
		width: 25vw;
	}

	footer {
		font-size: large !important;
	}

	h1 {
		margin-top: 0.33em !important;
	}

	#waste-of-space {
		height: 10% !important;
	}
}

footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 7.5vh;
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgba(255, 255, 255, 0.75);
	font-size: xx-large;
	font-weight: bolder;
	letter-spacing: 0.1em;
	text-shadow: 0 0 1.25em white;
}

footer a {
	color: blue;
	letter-spacing: 0.2em;
	margin: 0.5em;
	text-decoration: none;
	text-shadow: 0 0 0.75em white;
} */