.hero {
    background: url('../images/Lessons.jpg') center/cover no-repeat;
}

.main-content {
    flex-direction: column;
}

.panel {
    cursor: pointer;
    gap: 12px;
    transition: background-color .3s ease-in-out, outline .2s ease-in-out;
    user-select: none;
    border: 1px solid rgba(204, 204, 204, 0.2);
    border-left: transparent;
    border-right: transparent;
    outline: none transparent;
}

.panel:hover,
.panel:focus {
    background-color: rgba(255, 255, 255, 0.18);
    outline: 1px solid rgba(204, 204, 204, 0.5);
}

.panel:active {
    outline: 10px solid rgb(20, 102, 199);
}

.panel-meta {
    margin-top: 0;
    font-size: 14px;
}

.panel-meta:last-child {
    margin-top: 3px;
}

.panel-metadata {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #d9d9d9;
    font-size: 14px;
    align-items: center;
    flex-direction: row;
}

.panel-metadata div {
    display: flex;
    flex-direction: row;
    gap: 7px;
    align-items: center;
}

.panel-metadata img {
    height: 13px;
}

.panel-metadata .meta-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

/*
.language-selection-lessons {
    margin-top: 50px;
    margin-bottom: 30px;
}

#languageSelect {
    width: 200px;
    padding: 8px;
    border-radius: 10px;
    outline: 2px solid rgba(255, 255, 255, 0.2);
    color: rgb(255, 255, 255);
    background-color: rgb(23, 9, 37);
    cursor: pointer;
    font-size: 15px;
    transition: outline 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

#languageSelect:hover {
    outline: 2px solid rgba(204, 204, 204, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
}
*/
.quicklinks {
    width: 100;
    z-index: 500;
    flex-direction: row;
    align-items: center;
    gap: 2%;
    justify-content: space-between;
}

.quicklinks-item {
    width: 100;
}

.quicklinks-item:first-child {
    width: 40%;
}

.quicklinks input {
    height: 36px;
    width: 100%;
    font-weight: 500;
    font-size: 16px;
    padding: 8px;
    border-radius: 10px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* for Safari */
    outline: 1px solid rgba(204, 204, 204, 0.5);
    transition: outline .3s ease-in-out, background-color .3s ease-in-out;
}

.quicklinks input:focus {
    background-color: rgba(20, 102, 199, 0.1);
    outline: 3px solid rgb(20, 102, 199);
}

.quicklinks input:active {
    outline: 5px solid rgb(20, 102, 199);
}

.quicklinks select {
    height: 36px;
    width: 100%;
    font-weight: 500;
    font-size: 15px;
    border-radius: 10px;
    height: 36px;
    padding: 10px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* for Safari */
    outline: 1px solid rgba(204, 204, 204, 0.5);
    transition: outline .3s ease-in-out, background-color .3s ease-in-out;
}

.quicklinks-item:nth-child(2) {
    width: 20%;
}

.quicklinks select:focus {
    background-color: rgba(20, 102, 199, 0.1);
    outline: 2px solid rgb(20, 102, 199);
}

.lesson-types {
    display: flex;
    flex-direction: row;
}

.lesson-type-button {
    height: 36px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* for Safari */
    outline: 1px solid rgba(204, 204, 204, 0.5);
    padding: 6px 15px;
    font-weight: 500;
    font-size: 15px;
}

.lesson-type-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.lesson-type-button:focus {
    background-color: rgba(20, 102, 199, 0.1);
    outline: 2px solid rgb(20, 102, 199);
}

.lesson-tags {
    display: flex;
    gap: 5px;
}

.lesson-tags p {
    font-size: 12px;
    padding: 3px 7px;
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* for Safari */
    outline: 1px solid rgba(204, 204, 204, 0.5);
    border-radius: 8px;
}

.lesson-tags .dif-new {
    background-color: rgba(72, 176, 224, 0.2);
    outline: 1px solid #48b0e0;
}

.lesson-tags .dif-beg {
    background-color: rgba(72, 224, 115, 0.2);
    outline: 1px solid #48e072;
}

.lesson-tags .dif-int {
    background-color: rgba(224, 206, 72, 0.2);
    outline: 1px solid #e0cf48;
}

.lesson-tags .dif-adv {
    background-color: rgba(224, 120, 72, 0.2);
    outline: 1px solid #e07848;
}

.lesson-tags .dif-flu {
    background-color: rgba(224, 72, 102, 0.2);
    outline: 1px solid #e04867;
}

.lesson-tags span {
    margin: 0 5px;
    font-weight: 800;
}

@media (max-width: 480px) {
    .language-selection-lessons {
        margin-top: 0;
    }

    .panel-metadata {
        flex-direction: row;
    }

    .quicklinks {
        flex-direction: column;
        gap: 15px;
    }

    .quicklinks-item:first-child {
        width: 100%;
    }

    .quicklinks-item:nth-child(2) {
        width: 100%;
    }

    .quicklinks-item:last-child {
        width: 100%;
        justify-content: space-between;
        gap: 5%;
    }

    .quicklinks input
    .quicklinks select {
        width: 100%;
    }

    .lesson-type-button {
        font-size: 12px;
        width: 100%;
        padding: 5px 0;
    }
}