@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fredokaone.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --main-bg-color: hsl(97, 100%, 95%);
}
* { 
    /* outline: solid 2px red;  */
    box-sizing: border-box;
    font-family: 'Fredoka One', sans-serif;
}
html {
    padding: 0;
    margin: 0;
}
body {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: min-content auto;
    min-height: 100cqh;
}
footer, audio {
    display: none;
}
nav {
    background-color: black;
    color: white;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    justify-content: space-between;
    padding: 1rem 0 1rem 1rem;
}
nav label > input[type="radio"] {
    display: none;
}
nav label {
    cursor: pointer;
    padding: 0.5rem;
    /* flex: 1; */
}
nav label:has(:checked) {
    color: red;
    background-color: var(--main-bg-color);
    border-radius: 0.25rem 0 0 0.25rem;
}
nav label > span {
    white-space: nowrap;
    font-weight: 700;
}

main {
    background-color: var(--main-bg-color);
    padding: 1rem;
    max-height: 100cqh;
    overflow: auto;
}
main .header {
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem;
    background-color: hsl(97, 100%, 34%);
    color: white;
}
main > section {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 1rem;
}
main > section.cols5 {
    grid-template-columns: repeat(5, 1fr);
}
main > section article {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
main > section article .caption {
    text-align: center;
}
main > section article .buttons {
    display: flex;
}
main > section article .buttons button {
    flex: 1;
    padding: 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    border-collapse: collapse;
    cursor: pointer;
    background-color: hsl(335, 80%, 90%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.buttons button.b {
    background-color: hsl(335, 80%, 75%);
}
.buttons button:first-child {
    border-radius: 0.25rem 0 0 0.25rem;
}
.buttons button:last-child {
    border-radius: 0 0.25rem 0.25rem 0;
    border-left-style: none;
}
.buttons button:only-child {
    border-radius: 0.25rem;
    border-left-style: inset;
}

.buttons button:is([play],[pause]) {
    background-color: red;  
    color: white;
    flex: 1;
}
.buttons button:is([play],[pause]) span {
    visibility: hidden;
}
.buttons button:is([play],[pause]):before {
    content: '';
    inset: 0;
    position: absolute;
    background-size: 2rem;
    background-position: center center;
    background-repeat: no-repeat;
}
.buttons button[play]:before {
    background-image: url(../images/play.svg);
}
.buttons button[pause]:before {
    background-image: url(../images/pause.svg);
}

@media (orientation: portrait) or (max-width: 1280px) {
    main > section {
        grid-template-columns: repeat(5, 1fr);
    }
    main > section.cols4 {
        grid-template-columns: repeat(4, 1fr);
    }
}