/* styles.css */

:root {
	--brilliant-rose: #F651B0;
	--shocking-pink: #F2239A;
	--mirage: #1B1527;
	--foreground-colour: var(--brilliant-rose);
	--background-colour: var(--mirage);
}
body {
	background-color: var(--background-colour);
	color: var(--foreground-colour);
	font-family: sans-serif;
	font-size: 1.5rem;
	padding: 2rem 1rem;
}

a {
	color: var(--shocking-pink);
}
a:hover,
a:focus {
	text-decoration: none;
}
@supports (animation-name: blink-animation) {
	a:hover,
	a:focus {
		animation: blink-animation .5s steps(10, start) infinite;
	}				
}
@keyframes blink-animation {
	from {
		text-decoration: underline;
	}
	to {
		text-decoration: none;
	}
}

.header {
	text-align: center;
}
.header__heading {
	text-align: center;
}
.header__pic {
	border-radius: 18%;
}
.header__link {
	display: block;
	margin: 2rem 0;
}
.header__icon {
	width: 3rem;
}
.header__icon-path1{
	fill: var(--foreground-colour);
}
.header__icon-path2{
	fill: var(--background-colour);	
}

.post {
	margin: 4rem auto;
}
.post__heading {
	font-size: 1.5rem;
}
.link {
	display: inline-block;
}
.link__img {
	margin-right: 1rem;
	width: 3rem;
}
@media (min-width: 640px) {
	.post {
		width: 60vw;
	}			
}
.footer {
	text-align: center;
}