html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.legend-wrapper {
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    gap:10px;
}

a.logout {   
    display:block;
    text-align: right;
    flex-grow:0;
    flex-shrink:0;
}



.legend {
    padding:0.5em;
    outline: 2px solid #333;
    background-color: beige;
    color: #333;
}

.legend.archived {
    background-color:rgb(241, 232, 232);
    opacity:0.7;
}

h2.state {
    font-size:3em;
    margin:0;
    background-color: aliceblue;
    border-radius:50%;
    text-align: center;
    line-height:3em;
    margin-top:2em;
}

h2.state:first-child {
    margin-top:0;
}

header {
    background-color: rgba(255, 0, 255, 0.169);
    margin: 0;
    padding: 1em 2em;
    border-bottom: 2px solid #333;
    margin-bottom: 1em;

    input {
        margin:0;
        padding:1em;
        border:1px solid #ccc;
        min-width:250px;
    }
}

/* The full courses list container */
#courses-list {
    display: flex;
    flex-direction: column;
    gap: 2em;
    padding: 0 1em;
    font-size:1.1em;
    font-weight: 500;

    /* Each lettergroup */
    .course-group {
        .teachers-course {
            font-weight: normal;
            font-size:0.7em;
            color:#333;
        }


        a {
            display:block;
            text-decoration: none;
        }

        a:active, a:link,a:hover {
            color:#333;
        }

        h2 {
            margin: 0 0 0.5em;
            font-size: 1.5em;
            border-bottom: 1px solid #333;
            padding-bottom: 0.2em;

        }

        /* Flexbox container inside each group */
        .group-flexbox {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5em;

            .flexitem {
                text-align: center;
                padding: 0.4em;
                min-width: 300px;
                flex: 25%;
                flex-grow: 1;
                margin: 0 0.5em 0.5em;
                flex-shrink: 0;
                outline: 2px solid #333;
                background-color: beige;
                color: #333;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-size: 0.9em;
                transition: background 0.5s;
            }
            
            .flexitem.archived {
                background-color:rgb(241, 232, 232);
                opacity:0.7;
            }

            .flexitem:hover {
                background: #95f4ac;
            }
        }
    }
}