@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap";body,html{height:100vh;width:100vw;margin:0;padding:0;background-color:#222;font-family:Montserrat,sans-serif}body{display:flex;justify-content:space-around;align-items:center;flex-direction:column}#controls{display:flex;justify-content:center;align-items:center;gap:1rem;width:100%;color:#fff}button{background:none;border:none;outline:none;cursor:pointer;font-family:inherit;text-transform:uppercase;font-size:2rem;color:#fff;background-color:#0003;border:1px solid #fff;border-radius:1rem;padding:.5rem 2rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}button:hover{background-color:#fff;color:#222}#PlayPause.active{background-color:#cfc;color:#222}#PlayPause.active:hover{background-color:#fcc;color:#222}#Options{margin:0;padding:0;font-size:1.5rem;color:#fff;text-decoration:underline;cursor:pointer}dialog[open]{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.5rem;background-color:#222;color:#fff;border:1px solid #fff;border-radius:1rem;padding:2rem}dialog::backdrop{background-color:#00000080;pointer-events:none}dialog h2{margin:0;padding:0}form{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1rem}form fieldset{width:100%}input-group{display:flex;justify-content:space-between;width:100%}
