html, body {
    height: 100%;
}
body {
    margin: 0;
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji";
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

.container {
    max-width: 72ch;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

h1 {
  text-align: center;
}

iframe {
    border: none;
    position: absolute;
    left: 0;
    top: -67px;
}

.iframe-container {
    margin-top: 20px;
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
}

.badge-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.badge {
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
}

.green {
    background-color: #CEDFBD;
    color: #71AA3A;
}

.orange {
    background-color: #F6CDAC;
    color: #F57201;
}

.red {
    background-color: #F9C2C2;
    color: #EB1F1F;
}