@import "https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap";:root{--color-dark:#333;--color-subtle:#ddd;--color-light:#f7f7f7;color:var(--color-dark);font-family:"Goudy Bookletter 1911",serif;line-height:1.5}body{background-image:url(./texture-light-DSj4ZtpV.jpg);background-size:min(100vh,700px);align-items:center;min-width:320px;min-height:100vh;margin:0}h1{margin-block:0 .3rem;padding-block:.33em;font-size:3.2rem;line-height:1}h1,footer{padding-inline:1rem}.accent{color:var(--color-light);background-image:url(./texture-dark-98cvGTdK.jpg);background-size:300px}a{color:#4169e1}a:hover{opacity:.8}.controls{flex-wrap:wrap;justify-content:center;gap:.35rem 1rem;padding-inline:.5rem;display:flex}label,select{font-size:1.6rem}select{border:none;border-bottom:2px solid var(--color-dark);background-color:#0000;font-family:inherit}#app{text-align:center;max-width:1280px;margin:0 auto;padding-bottom:1rem}main{border:1px solid var(--color-subtle);flex-wrap:wrap;gap:2rem 4rem;margin-block:1.6rem;display:flex}figure{flex:1 0 300px;margin:0}figure a{text-decoration:none}demo-diagram{--diagram-light:#ecedf3;--diagram-dark:lightsteelblue}.player{border-bottom:2px solid var(--color-subtle);font-size:1.6em}.player:first-of-type{margin-block:0 .6em}.player:last-of-type{margin-block:.6em 0}footer .accent{padding-inline:.6rem}footer{flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex}footer p{gap:.35rem;max-width:350px;margin:0;font-size:1.4rem;line-height:1.3}footer img{width:32px}@media (width>=480px){#app,main{padding:2rem}}