@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Satisfy&display=swap');

:root{
		--bg-color: #333;
		--color: #fff;
		--accent: #D80;
		--link: #0E7;
		--quote-bg-color: #222;
		--nav-bg-color: #222;
	}
@media(prefers-color-scheme: light){
	:root{
		--bg-color: #DDD;
		--color: #333;
		--accent: #D80;
		--link: #090;
		--quote-bg-color: #AAA;
		--nav-bg-color: #AAA;
	}
}

html, body{
	background-color: var(--bg-color);
	color: var(--color);
	scroll-behavior: smooth;
	padding: 0;
	margin: 0;
	font-family: 'Poppins', sans-serif;
}

a{
	color: var(--link);
}

nav{
	top:0;
	width: calc(100% - 20px);
	position: fixed;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	text-align:center;
	align-items: center;
	background-color: var(--nav-bg-color);
}

nav > .nav-img > img{
	border-radius: 50%;
}

nav > .nav-img{
	text-decoration: none;
}

nav > .nav-img > p{
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	font-family: 'Satisfy', cursive;
	color: var(--color);
}

nav > .links > a{
	color: var(--color);
	text-decoration: none;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
	transition: .5s border-top, .5s border-bottom;
}

nav > .links > a:hover{
	transition: .5s border-top, .5s border-bottom;
	border-top: 2px solid var(--color);
	border-bottom: 2px solid var(--color);
}

main{
	padding: 12px;
}

.quote{
	margin: 10px 0;
	border-left: 3px solid var(--accent);
	padding: 10px;
	width: auto;
	background-color: var(--quote-bg-color);
	border-radius: 3px;
}

footer{
	display: flex;
	justify-content: space-between;
	padding: 10px;
	background-color: var(--quote-bg-color);
}

footer > .socials > a{
	margin: 0 5px;
	color: var(--color);
}