.header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    background-color: rgb(152, 30, 20);
    padding: 1em 1.5em;
    margin-bottom: 2em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    @media (max-width: 800px) {
        margin: 0;
        display: flex;
        justify-content: space-around;
    }
}

.cogitoLogo {
    grid-column: 1;
}

.title {
    grid-column: 2;
    color: white;
    text-shadow: 4px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.main {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hidden {
    display: none;
}

.overlayText {
    color: white;
    position: absolute;
    width: 650px;
    margin-top: 3em;
    
    @media (max-width: 800px) {
        width: 70vw;
    }
}

.footer {
    display: flex;
    justify-content: space-between;
    background-color: #1E1E1E;
    color: white;
    align-items: center;
    padding: 1em 1.5em;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.25);
    bottom: 0;
    margin-top: 2em;

    @media (max-width: 800px) {
        margin: 0;
    }
}

.sudokuLogo {
    display: flex;
    align-items: center;
    gap: 1em;

    @media (max-width: 800px) {
        flex-direction: column;
    }
}

.sudokuLogoHeader {
    font-weight: bold;
    font-size: 1.25em;
    margin: 0;
}

.sudokuLogoYear {
    margin-top: 0;
    font-size: 0.75em;
}

.source {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: white;
    gap: 0.3em;
    font-weight: bold;

    p {
        margin: 0.5em 0;
    }
}

.members {
    font-size: 0.8em;
    width: min(40vw, 30em);
    text-align: right;
    margin-top: 0;
}