@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    font-family: "Montserrat", sans-serif;
    background-color: rgb(255, 222, 178);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

#logo {
    width: 380px;
}

.issues {
    width: 100%;
    max-width: 520px;
    padding: 0 12px;
}

.issue-item {
    margin-top: 10px;
}

.issue-toggle {
    display: none;
}

.issue-label {
    display: block;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.55);
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 700;
    color: #222;
    user-select: none;
}

.issue-toggle:focus-visible + .issue-label {
    outline: 3px solid rgba(0, 120, 255, 0.35);
    outline-offset: 2px;
}

.issue-content {
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.7);
    padding: 10px 12px;
    border-radius: 10px;
    line-height: 1.35;
    color: #222;

    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);

    transition:
        max-height 0.35s ease,
        opacity 0.2s ease,
        transform 0.35s ease;
}

.issue-toggle:checked + .issue-label + .issue-content {
    /* Big enough for our content; keeps animation simple without JS. */
    max-height: 400px;
    opacity: 1;
    transform: translateY(0);
}

.issue-content p {
    margin: 0;
}


h4, p {
    padding: 0;
    margin: 0;
}