.hidden {
    display: none !important;
}

.page-grid-container {
    display: grid;
    gap: 0.5rem;
    padding: 0.5rem;
    #background-color: #2196F3;
    grid-template-areas:
            'codeArea'
            'colorGrid'
        'actionArea'
        'feedbackArea';

}

.page-grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
}

.colorGrid > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
}

.code { grid-area: codeArea; }
.colorGrid {
    grid-area: colorGrid;
    display: grid;
    gap: 0.5rem;
    padding: 0.5rem;
    grid-template-areas:
    'numbersLeft numbersLeft colorSquare numbersRight numbersRight' ;
}
.action { grid-area: actionArea; }
.feedback { grid-area: feedbackArea; }
.numbersLeft {
    grid-area: numbersLeft;
}
.numbersRight { grid-area: numbersRight; }
.colorSquareArea {
    grid-area: colorSquare;
    display: flex;
    justify-content: center;
}

.numbersLeft button, .numbersRight button {
    margin: .5rem;
    padding: .5rem;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
}

select, option {
    padding: .5rem;
}

.selectCode {
    font-size: 6rem;
}

.selectColor {
    margin-right: 1rem;
}

label {
    margin-right: .5rem
}

.codeArea, .numberArea, .colorArea, .actionArea, .feedbackArea, .copyrightArea {
    display: flex;
    justify-content: center;
}

section:not(:first-child) {
    margin-bottom: 1rem;
}

.actionArea {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 2rem;
}

#colorSquare {
    background-color: darkgoldenrod;
    transform: rotate(-45deg);
    display: grid;
    grid-template-columns: auto auto;
}

.color-square-item {
    background-color: green;
    border: thin solid black;
    margin: 0.25rem;
    width: 1rem;
    height: 1rem;
}