@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Share+Tech&family=Tagesschrift&display=swap');

/* --------------------------------- BROWSER RESETS --------------------------------- */

img,
svg,
video {
	width: 100%;
	height: 100%;
}

ul,
ol {
	list-style-type: none;
}

:root {
	--primaryColor: rgb(6, 11, 16);
	--secondaryColor: rgb(18, 24, 31);
	--thridColor: rgb(22, 28, 35);
	--primaryText: rgb(255, 255, 255);
	--secondaryText: rgb(156, 164, 174);
	--primaryLink: rgb(202, 143, 47);
	--primaryButton: rgb(207, 168, 60);
}

.hidden {
	display: none;
}

/* --------------------------------- ASIDE --------------------------------- */

body {
	position: relative;
}

#holder aside {
	padding: 10px;
}

#holder .big-box {
	padding: 30px 10px;
	transition: padding 0.5s, margin 0.5s;
}

#holder .front {
	left: -9px;
	top: -9px;
	z-index: 10;
	width: 100%;
	height: 100%;
	width: 50px;
	height: 50px;
	position: absolute;
	margin: 9px 0px 0px 9px;
	box-shadow: 0px 0px 5px white;
}

#menu {
	box-sizing: unset;
	min-height: 50px;
	width: fit-content;
	max-width: 150px;
	border-radius: 5px;
	background: linear-gradient(to bottom, var(--secondaryColor), var(--thridColor));
}

#menu .navigation {
	gap: 10px;
	display: flex;
	width: fit-content;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#menu .navigation .logo {
	margin: 0;
	width: 50px;
	height: 50px;
	cursor: pointer;
}

#menu .navigation .list {
	margin: 0;
	padding: 0;
}