body {
    margin: 0;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

:root {
    --key-size: 80px;
    --key-gap: 10px;
}

main {
    display: flex;
    flex-direction: column;
    gap: var(--key-gap);
    position: relative;
}

main .row {
    display: flex;
    flex-direction: row;
    gap: var(--key-gap);
}

.key {
    height: var(--key-size); aspect-ratio: 1;
    border: 1px solid var(--primary-color);
    border-radius: 5px;

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: var(--primary-color);
}

.key:hover {
    background-color: var(--primary-color);
    color: var(--background-color);
    cursor: pointer;
}

.space {
    width: 100%;
}

.double {
    aspect-ratio: 2 / 1;
}

.thirty {
    aspect-ratio: 13 / 10;
}

.oneHalf {
    aspect-ratio: 15 / 10;
}

.oneSeventy {
    aspect-ratio: 17 / 10;
}

.fillSpace {
    width: 100%;
}

.key.invis {
    opacity: 0;
}

.enterContainer {
    position: absolute;
}

.enterContainer:hover .enter {
    background-color: var(--primary-color);
    cursor: pointer;
    color: var(--background-color);
}

.enterBase {
    position: absolute;
    width: 105px;
    height: 82px;
    top: 92px;
    left: 1251px;

    border: 1px solid;
    border-radius: 0 5px 0 0;
    border-color: var(--primary-color) var(--primary-color) transparent transparent;
}

.enterLeft {
    position: absolute;
    width: 14px;
    height: 82px;
    top: 92px;
    left: 1236px;

    border: 1px solid;
    border-radius: 5px 0 0 5px;
    border-color: var(--primary-color) transparent var(--primary-color) var(--primary-color);
}

.enterDown {
    position: absolute;
    width: 105px;
    height: 90px;
    top: 175px;
    left: 1251px;

    border: 1px solid;
    border-radius: 0 0 5px 5px;
    border-color: transparent var(--primary-color) var(--primary-color) var(--primary-color);
}