*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
html {
	background-color: #181A1B;
	scroll-behavior: smooth;
	font-family: "Calibri";
}
body {
	max-width: 100vw;
}


.logo-container {
	display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		gap: 2rem;
		align-items: center;
		justify-content: center;
		align-content: center;
	width: min(380px, calc(100vw - 32px));
	min-width: 240px;
	height: 100vh;
	margin: auto;
}
	.logo-container a {width: 100%;}
	#logo {
		width: 100%;
		margin: auto;
		transition: all 0.1s;
		/*filter: invert(100%);*/
	}
	#logo:hover {
		transform: scale(1.02);
	}


.container-links {
	display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
	width: 100%;
}
	div.link {
		display: flex;
			justify-content: center;
			align-items: center;
		height: 38px;
		font-size: 1.2rem;
		background-color: #202020;
	}
	.container-links a {
		width: 100%;
		color: #606060;
		text-decoration: none;
	}
	.link:hover {
		background-color: #D83A3A;
		cursor: pointer; 
		color: white;
	}