@import url(https://fonts.bunny.net/css?family=overlock:400|victor-mono:400i);

@media only screen and (max-width: 576px) {
  body {
  	background-image: none !important;
    font-size: 4vw !important;
    word-wrap: break-word !important;
  }

  .cntn {
  	width: 100% !important;
    min-height: 130vw !important;
  }

  hr {
  	width: 100% !important;
  }
}

@media only screen and (max-width: 1080px) {
  body {
  	background-image: none !important;
    font-size: 4vw !important;
    word-wrap: break-word !important;
  }

  .cntn {
  	width: 100% !important;
    min-height: 130vw !important;
  }

  hr {
  	width: 100% !important;
  }
}

:root {
	--main-font: "Overlock";
	--accent-font: "Victor Mono";
	--gray: #b2b6b9;
	--gray-dark: #343739;
	--accent-color: #0a3e91;
}

body {
	background: white url("../images/yukio.png") right bottom no-repeat fixed;
	font: 1.2rem "Overlock", sans-serif;
}

.cntn {
	width: 50rem;
	padding: .5em;
	background: transparent;
	color: var(--gray-dark);
}

hgroup h1 {
	margin-top: .5rem;
	font-family: var(--accent-font), sans-serif;
}

h1,h2 {
	color: var(--accent-color);
}

h2 {
	font-size: 1.4rem;
}

hgroup p {
	font-size: 1.5rem;
}

i {
	color: var(--accent-color);
}

hr {
	color: var(--accent-color);
	width: 50ch;
	margin: 1em auto;
	border: none;
}

hr::after {
	content: "♡" / "heart";
	text-align: center;
	display: block;
}

a:link {
	text-underline-offset: .3rem;
}

a:not(:is(:hover, :focus)) {
	text-decoration-color: color-mix(in srgb, currentColor, transparent 45%);
}

.footer-txt {
	text-align: right;
	font-size: .9rem;
	margin-bottom: 1em;
}

.footer-txt span {
	color: var(--accent-color);
}

ul.top-nav {
	padding-inline-start: 0;
}

ul.top-nav li {
	display: inline;
	list-style-type: none;
}

.mix-cover img {
	display: block;
	max-width: 350px;
}

dl.mix-tracks {
	display: grid;
	grid-template-columns: max-content auto;
}

dl.mix-tracks dt {
	grid-column-start: 1;
	color: var(--accent-color);
}

dl.mixtracks dd {
	grid-column-start: 2;
}

dl {
	display: initial;
}

dl dt, dl dd, dl dd p {
	margin-block-start: .8rem;
	margin-block-end: .8rem;
}

dl dt {
	color: var(--accent-color);
}

dl dd {
	font-style: italic;
}

details.lyric-snippets {
	margin-block-start: .8rem;
	margin-block-end: .8rem;
}

details.lyric-snippets summary {
	color: var(--accent-color);
	cursor: pointer;
}

details.lyric-snippets summary::marker {
	content: "\2765  " / "heart";
}