body{
	margin:0px;
	font-family:Arial,sans-serif;
	color:#111;
	line-height:1.6;
	background-attachment: scroll;
	background-color: rgba(220,220,220,0.8);
	background-blend-mode: lighten;
	background-repeat: no-repeat;
	background-position: 0px -1000px;
}
.hero{
	display:grid;
	grid-template-columns:1fr 1fr;
	min-height:100vh;
	margin-top: 240px;
}
.left{
	padding:6vw;
	display:flex;
	flex-direction:column;
	justify-content:center
}
.right{display:flex;align-items:center;justify-content:center;padding:3rem}
.logo {
    width: 240px;
    position: absolute;
    top: 0;
    left: 6vw;
}
h1{font-size:clamp(3rem,8vw,6rem);margin:.3em 0;opacity:0;transform:translateY(20px);animation:reveal 1.2s forwards}
.honk-h1 {  font-family: "Honk", system-ui;  font-optical-sizing: auto;  font-weight: 400;  font-style: normal;  font-variation-settings:    "MORF" 19,    "SHLN" 50;}
.anton-regular {
	font-family: "Anton", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #300;
	line-height: 100%;
}
.merriweather {
	font-family: "Merriweather", serif;
	font-weight: 700;
	font-size:1.8rem;
	max-width:48rem;
	color: #333;
	font-style: italic;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
.merriweather-tag {
	font-family: "Merriweather", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-variation-settings:
    "wdth" 100;
	font-size:1.2rem;
	max-width:38rem;
	line-height: 125%;
	margin-bottom: 20px;
}

h2 {
	font-family: "Anton", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2em;
}

.cover{max-width:100%;border-radius:20px;box-shadow:0 25px 60px rgba(0,0,0,.25);animation:float 6s ease-in-out infinite}
.buttons{
	display:flex;
	flex-wrap:wrap;
gap:.7rem;	margin-top:1rem;
	height: 20px;
}
.buttons a{text-decoration:none;background:#000;color:#ffd800;padding:.7rem 1rem;font-weight:bold;border-radius:20px;}
.buttons a:hover{
	color: #000;
	background-color: #FCE503;
}
section{
	max-width:900px;
	margin:auto;
	padding:3rem 6vw;
	background-color: #FFF;
}
section#preview{
	border-radius: 25px;
	max-width:900px;
	margin:0px;
	background-color: rgba(220,220,220,0.4);
	border: thin solid #D8D8D8;
	height: auto;
	width: auto;
	vertical-align: top;
	line-height: normal;
	text-align: left;
	padding: 5px;
}
section#lyrics{
	max-width:900px;
	margin:auto;
	padding:3rem 6vw;
	background-color: #FFF;
	background-image: url(bug.png);
	background-repeat: no-repeat;
	background-position: right top;
}
section#credits {
	font-size: 12px;
	line-height: normal;
	}
.social-icons{
	display:flex;
	align-items:center;
	gap:22px;
	margin-top:1.25rem;
}
.social-icons a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	color:#fff;
	text-decoration:none;
	transition:transform .2s ease, color .2s ease, opacity .2s ease;
}
.social-icons svg{
	display:block;
	width:30px;
	height:30px;
	fill:currentColor;
}
.social-icons a:hover{
	color:#FCE503;
	transform:translateY(-3px);
}
footer{
	margin:auto;
	padding:3rem 6vw;
	color: #FC0;
	background-color: #000;
}
footer a, a:active{
	color: #FFF;
	text-decoration: none;
}
footer a:visited{
	color: #666;
}
footer a:hover{
	color: #FF0;
}

pre{white-space:pre-wrap;font-family:inherit}
@keyframes float{50%{transform:translateY(-10px)}}
@keyframes reveal{to{opacity:1;transform:none}}
@media(max-width:800px){.hero{grid-template-columns:1fr}}