@font-face {
    font-family: 'Cormorant Infant';
    src: url('CormorantInfant-Regular.woff2') format('woff2'),
        url('CormorantInfant-Regular.woff') format('woff'),
        url('CormorantInfant-Regular.svg#CormorantInfant-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}





* { 
	padding: 0; 
	margin: 0; 
	font-family: 'Cormorant Infant';
    font-weight: normal;
    font-style: normal;
	transition: all .5s ease-in-out; 
	text-transform: uppercase;
	letter-spacing: .5ex;
} 

body { 
	background: url("bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #000; 
} 

main { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
} 

a, button { 
	text-decoration: none; 
	font-size: 1.125rem; 
	font-weight: 600; 
} 

.logo { 
	position: relative; 
	height: 100%; 
	width: 100%; 
	margin-top: 8%; 
} 

.logoContainer { 
	margin: 1rem 0; 
	position: relative; 
	height: 225px; 
	aspect-ratio: 1; 
	margin-bottom: 2rem; 
} 

.links { 
	display: flex; 
	flex-direction: column; 
	text-align:center;
} 

.link, button { 
	height: 2rem; 
	width: 12em; 

	display: flex; 
	align-items: center; 
	justify-content: center; 
	color: #000; 

	margin: 0.5rem 0; 
	border-radius: 30px; 
	background: transparent; 
	color: white; 
	border: 1px solid white;
} 

.smicons { margin-top: 1em; margin-bottom: 1em;}
.smicon {	 display: inline-block; width: 32px; }



.musicicons {display:none;  margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; width: 12em; }

#musicicons a img {width: 32px; height: auto;}


.greetings { 
	font-size: 2rem; 
	font-weight: 700; 
	margin-bottom: 2rem; 
	color: white; 
} 

.about { 
	font-size: .9rem;  
	margin-bottom: 2rem; 
	color: white; 
} 

.link span, button span { 
	width: 80%; 
	text-align: center; 
} 

.link img { 
	height: 2rem; 
	aspect-ratio: 1; 
} 

.linkIcon { 
	height: 2rem !important; 
	aspect-ratio: 1; 
} 



.link:hover, button:hover { 
	background: rgba(255,255,255,0.55);
	
	color: #000;

} 

.link>*, button>* { 
	transition: all .5s ease-in-out; 
	transition-delay: 0.1s; 
} 

.link:hover>*,.button:hover>* { 
	 
} 

@media (max-width: 600px) { 
	body { 
		background-size:250%; 
		background-position: top center;
	} 

	.logo img { 
		width: 200px; 
	} 

	.link span, button span { 
		width: 70%; 
		text-align: center; 
	} 

	.link, button { 
		width: 55vw; 
	} 

	.link:hover { 
		 
	} 
}