.detail-link {
    color: var(--clr-5);
    border: 2px solid var(--clr-5);
    border-radius: 1rem;
    padding: .5rem;
    font-size: var(--fs-400);
}

.detail-link:hover,
.detail-link:focus {
    color: var(--clr-3);
    border: 2px solid var(--clr-3);

}


.detail-page {
    line-height: 1.8;
    display: grid;
    grid-template-columns: 1fr;
    text-align: left;
    width: clamp(50px, 50rem, 90%);
    margin-inline: auto;
    gap: 2rem;
    font-size: var(--fs-400);
    margin-bottom: 3rem;


    @media (min-width: 60rem) {
        .topbar {
            display: flex;
            width: 100%;
            justify-content: space-between;
        }
    }

    h1 {
        font-size: var(--fs-700);
        color: var(--clr-dtg-orange-700);
        font-weight: var(--fw-xbold);
        text-align: center;
        text-wrap: balance;

        /*text-align: justify-all;*/
    }

    h2 {
        font-size: var(--fs-600);
        color: var(--clr-dtg-orange-700);
        text-align: left;
        padding-block: .5rem;
    }
}

.topbar {
    color: var(--clr-dtg-orange-700);
    padding-top: 2vh;
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr;
    margin-inline: auto;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-300);

    /*a :hover,*/
    /*a :focus {*/
    /*    color: red;*/
    /*}*/

    span:last-of-type {
        /*font-size: var(--fs-500);*/
    }
}

.play-btn {
    /*background-color: var(--clr-dtg-orange-700);*/
    text-decoration: none;
    border: 2px solid var(--clr-5);

    /*display: inline-block;*/
    /*text-align: right;*/
    color: var(--clr-5);
    border-radius: 1rem;
    width: max-content;
    padding-inline: .5rem;
    padding-block: .3rem;
    /*padding-block: .4rem;*/
    font-size: var(--fs-300);


}

.play-btn:hover,
.play-btn:focus {
    color: var(--clr-3);
    border: 2px solid var(--clr-3);

}