* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background-color: #2c2c31;
}

::-webkit-scrollbar-thumb {
	background-color: #443961;
	border-radius: 20px;
}
@keyframes entering {
	from {
		opacity: 0;
		transform: translateY(-200px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
:root {
	--font-text: 'Roboto', sans-serif;
	--light-color1: #eaeaea;
	--light-color2: #bebebf;
	--dark-color1: #9e9ea0;
	--bg-color: #121215;
	font-size: 16px;
}

body {
	background-color: var(--bg-color);
	color: var(--light-color1);
	font-family: var(--font-text);
	font-weight: 400;

	display: grid;
	grid-template-areas: 'profile timeline';
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 100vh;
}
section {
	overflow-y: scroll;
}
nav {
	padding: 4rem;
	grid-area: timeline;
	animation: entering 1s ease-in-out;
}

.memories {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	text-decoration: none;
	margin-bottom: 64px;
}

.memories small {
	color: var(--light-color2);
	font-size: 0.75rem;
}

.memories h2 {
	font-size: 2rem;
	font-weight: bold;
	color: var(--light-color1);
}

.memories img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	border-radius: 8px;
	transition: transform 0.3s ease-in-out;
}
.memories div {
	width: 100%;
	height: 280px;
	overflow: hidden;
	border-radius: 8px;
}
.memories:hover img {
	transform: scale(1.1);
}
.memories p {
	font-size: 1.2rem;
	color: var(--light-color2);
	line-height: 1.75rem;
}

aside {
	grid-area: profile;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	border-right: 1px solid;
	border-image: linear-gradient(#727275, #2c2c31) 1;
	background-image: url(../assets/background.svg);
	background-position: top right;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

aside * {
	animation: entering 1s ease-in-out;
}
aside img:nth-child(2) {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	border: 4px solid transparent;
	background: linear-gradient(#d39e33, #ed5636, #633bbc) padding-box,
		linear-gradient(260deg, #d39e33, #ed5636, #633bbc) border-box;
}

aside p {
	font-size: 2.5rem;
	text-align: center;
}

aside span {
	font-size: 1rem;
	color: var(--dark-color1);
}
.social {
	display: flex;
	justify-content: center;
	align-content: center;
	gap: 25px;
	padding: 5px;
}
.social p {
	font-size: 2rem;
}
.icons {
	padding: 5px;
}
.icons a {
	text-decoration: none;
	color: var(--light-color1);
	margin-right: 16px;
}
.icons i:hover {
	color: #996dff;
}
@media (max-width: 768px) {
	:root {
		font-size: 14px;
	}
	body {
		grid-template-columns: 1fr;
		grid-template-rows: 0.2fr 0.8fr;
		grid-template-areas:
			'profile'
			'timeline';
	}

	aside {
		border-right: none;
		padding: 32px 12px;
	}

	section {
		overflow-y: visible;
	}
	nav {
		padding: 22px;
	}
	.social {
		flex-direction: column;
		gap: 10px;
	}
	.icons {
		display: flex;
		gap: 30px;
	}
	.icons a {
		margin: 0 auto;
	}
}