body {
    overflow-y: scroll;
}

:root {
    --green: #27db8a;
}

.modules {
    margin: auto;
    display: flex;
    flex-direction: column;
}

.module-row {
    display: flex;
}

/*
.module-row + .module-row {
    border-top: 1px solid black;
}
*/

.module {
    margin: 10px;
}

.module-header {
    display: flex;
    align-items: center;
}

.module-icon-frame {
    border: 2px solid var(--green);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
}

.module-icon-frame-locked {
    border: 2px solid lightgrey;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
}

.module-icon {
    color: black;
    font-size: 26px;
    transition: color 0.2s;
}

.module-icon-locked {
    color: lightgrey;
    font-size: 26px;
}

.module-icon-frame:hover {
    cursor: pointer;
    border-color: lightgray;
}

.module-icon-frame:hover .module-icon {
    color: grey;
}

.module-icon-link:visited .module-icon-frame {
    border-color: black;
}

.module-icon-link {
    width: 52px;
    height: 52px;
}

.module-row {
    display: flex;
    align-items: center;
}