#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

html {
    font-family: Arial, Helvetica, sans-serif;
    font-size:100%;
}

h1 {
    /* 720px width => 2.8rem */
    /* 440px width =>  1.4rem*/
    /* 580px width => 2.1rem */
    /* 2.1rem * 16px/rem = 33.6px => 33.6px / 580px * 100vh/px = 5.8vw*/

    font-size: 2.8rem;
    font-size: 1.4rem;
    font-size: clamp(1.4rem, 5.8vw, 2.8rem);
    margin-bottom: 0.2rem;
}

    h1:focus {
        outline: none;
    }

.hero {
    display: flex;
    padding: 1rem;
    background-color: hsl(210, 80%, 60%);
}

.hero-image {
    padding-right: 2rem;
}

    .hero-image img {
        height: 80px;
        /* 720px width => 80px */
        /* 440px width =>  60px*/
        /* 580px width => 70px */
        /* 70px / 580px * 100vh/px = 12vw*/

        height: clamp(80px, 12vw, 60px);
    }

.hero-text {
    text-align:center;
}

    .hero-text p {
        font-size: 1rem;
        /* 720px width =>  1.0rem */
        /* 440px width =>  0.5rem*/
        /* 580px width =>  0.75rem */
        /* 0.75 rem * 16px/rem = px => 12px / 580px * 100vh/px = 2.1vw*/
        font-size:clamp(0.5rem, 2.1vw, 1.0rem);

        font-weight: bold;
        font-style: italic;
        margin-left: 3.2px;
        margin-bottom: 0;
    }

.podcast-episode {
    border: 3px solid hsl(200, 35%, 60%);
    margin: 0.8rem;
    border-radius: 1rem;
    width: fit-content;
    min-width:260px;
    padding-inline: 0.5rem;
    padding-bottom: 0.2rem;
}

.podcast-episode audio{
    height:1.5rem;
    min-width:400px;
    border: solid black 1px;
    border-radius:0.75rem;
}

.podcast-non-image-podcast-title {
    font-size: 0.7rem;
    text-align: left;
    margin-top: 0.7rem;
    margin-bottom: 0.2rem;
}

.podcast-non-image-episode-title {
    text-align: left;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}