/* inter-regular - latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: local(''), url('/static/fonts/inter-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/static/fonts/inter-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* inter-500 - latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: local(''), url('/static/fonts/inter-v11-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/static/fonts/inter-v11-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* inter-700 - latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: local(''), url('/static/fonts/inter-v11-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/static/fonts/inter-v11-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } * { margin: 0; padding: 0; } html { font-size: 62.5%; } body { font-size: 1.5rem; font-family: inter; background-color: #f9f9f9; } #lyrics { color: #171717; line-height: 2.5rem; } #lyrics a { background-color: #ddd; color: inherit; } #lyrics a:hover { background-color: #ccc; } #nav { font-size: 2.5rem; text-align: center; font-weight: 700; background-color: #FFCD38; color: #1B1A17; padding: 0.5rem; letter-spacing: 1rem; font-family: monospace; } a { text-decoration: none; } #metadata { display: flex; flex-direction: column; gap: 0.5rem; } #metadata h1 { font-size: 2rem; color: #171717; } #metadata h2 { font-size: 1.4rem; color: #1E1E1E; font-weight: 500; } #metadata > img { width: 20rem; border-radius: 3px; box-shadow: 0 1px 1px #ddd; } #container { display: grid; grid-template-columns: 1fr 3fr 1fr; padding: 2rem; } #credits { display: flex; flex-direction: column; gap: 0.5rem; } #title { font-size: 2rem; color: #1B1A17; } #credits summary { font-size: 1.4rem; cursor: pointer; color: #1E1E1E; } #credits p { font-size: 1.3rem; padding: 0.5rem; color: #171717; } #info { display: flex; flex-direction: column; gap: 2rem; } #about { display: flex; flex-direction: column; gap: 0.5rem; } #about p { font-size: 1.4rem; color: #171717; line-height: 1.8rem; }