/*!
 * Version: 1.0.0
 */

@import url('https://fonts.googleapis.com/css2?family=Waiting+for+the+Sunrise&display=swap');

body,html,* {margin:0;padding:0;}
body {
	min-height:100vh;
	width:100%;
	font-family: "Waiting for the Sunrise", cursive; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size:var(--font);
	line-height:1;
	text-align:center;
	color:#777;
	--font:2.65rem;
	--link-img:1.5rem;
	--container-width:600px;
}


.main {display:flex;align-items:center;justify-content:center;min-height:100vh;}
.main.container {display:flex;flex-direction:column;align-items:center;max-width:var(--container-width);}

#logo path {
	fill: none;
	stroke: #777;
	stroke-linecap: round;
	stroke-miterlimit: 10;
	stroke-width: 1.5;
	stroke-dasharray: var(--path-length);
	stroke-dashoffset: var(--path-length);
	animation: draw 6s linear forwards;
}
svg {max-width: 100%;}

#message {
	padding:0 2rem;
	margin-bottom:2rem;
	transform:rotate(-3deg);
	opacity:0;
	animation: appear-text 2s 1s linear forwards;
}
.date {white-space:nowrap;}

@media (max-width:1199px) {#logo{margin-top:-5rem;margin-bottom:-5rem;}}
@media (max-width:599px) {#logo{margin-top:-6rem;margin-bottom:-6rem;}}

#links li {transform:translateY(2rem);opacity:0;}
#links li:nth-of-type(1) {animation: appear 1s 2s linear forwards;}
#links li:nth-of-type(2) {animation: appear 1s 2.25s linear forwards;}
#links li:nth-of-type(3) {animation: appear 1s 2.5s linear forwards;}

#links {display:flex;flex-wrap:wrap;gap:1rem;}
#links li {display:inline-flex;gap:1rem;}
#links img {max-height:var(--link-img);width:auto;}

@media (hover:hover) {
	#links a {filter:grayscale(100%);transition:0.75s;}
	#links a:hover {filter:grayscale(0);opacity:1;}
}

@keyframes draw {
	0% {stroke-dashoffset: var(--path-length);opacity:0.75;}
	100% {stroke-dashoffset:0;opacity:1;}
}
@keyframes appear {
	0% {opacity:0;}
	100% {transform:translateY(0);opacity:1;}
}
@keyframes appear-text {
	0% {opacity:0;}
	100% {;opacity:1;}
}

@media (max-width:1199px) {
	body {
		--link-img:1.25rem;
		--container-width:500px;
	}
}
@media (max-width:599px) {
	body {
		--font:1.85rem;
		--container-width:400px;
	}
}
@media (max-width:420px) {
	body {
		--container-width:320px;
	}
}
@media (max-width:375px) {
	body {
		--container-width:280px;
	}
}

@media (max-width:1199px) {
	body,
	.main {
		min-height: -webkit-fill-available; /* For Safari/WebKit */
		min-height: -moz-available; /* For Firefox */
	}
}