:root {
	--void: #05060F;
	--line: rgba(234, 237, 247, 0.09);
	--text: #EAEDF7;
	--muted: #8A90B3;
	--amber-full: rgba(212, 146, 74, 1.0);
	--amber-mid: rgba(212, 146,74, 0.6);
}

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.sora {
	font-family: "Sora", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

.grid-container-title {
	display: grid;
	grid-template-columns: 35vw 20vw;
	gap: 25vw;
	background-color: transparent;
	padding: 8px;
	justify-content: center;
}

.grid-container-title div {
	background-color: transparent;
	color: rgba(255, 255, 255, 1.0);
	padding: 10px;
}

.img_homepage {
	position: relative;
	max-width: 200px;
	max-height: 200px;
	border-radius: 50%;

	animation: anim_img_homepage ease-in-out 3s infinite;
}

@keyframes anim_img_homepage {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-15px);
	}
	100% {
		transform: translateY(0);
	}
}

.link_abo {
	color: var(--amber-mid);
}

.link_abo:hover {
	color: var(--amber-full);
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--void);
	color: var(--text);
	font-family: 'sora', sans-serif;
	overflow-x: hidden;
	position: relative;
}

/* starfield */

#stars {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

#rain-canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.nebula-glow {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: 
	radial-gradient(600px 500px at 12% 8%, rgba(217, 139, 208, 0.1), transparent 60%),
	radial-gradient(700px 600px at 85% 25%, rgba(111, 214, 208, 0.09), transparent 60%),
	radial-gradient(800px 700px at 50% 90%, rgba(244, 195, 97, 0.06), transparent 60%);
}

/* nav */

.divheader {
	position: relative;
	display: flex;
	align-items: center;
	padding: 10px;
	font-family: 'sora', monospace;
	font-size: 13px;
	letter-spacing: 0.02em;
}