/* General Styles */
body {
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: black;
}

.game-section {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    min-width: 42%;
    height: auto;
    overflow-y: auto;
    z-index: 1;
    margin: 10px;
    align-items: center;
}

.instructions {
    width: 40%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 5px;
    align-self: flex-end;
    margin-right: 250px;
    color: white;
}

/* Section Styles */
.section-left,
.section-right,
#startBtn,
#resetBtn {
    position: sticky;
    top: 0;
}

.section-left,
.section-right {
    display: flex;
    height: 700px;
}

.section-left {
    width: 350px;
    flex-direction: column;
}

.section-right {
    min-width: 400px;
    flex-direction: column;
}

#startBtn,
#resetBtn {
    height: 700px;
    background-color: black;
}

/* Timer Section */
.time-container {
    display: flex;
    gap: 100px;
    margin-top: 20px;
}

.time-remaining {
    width: 205px;
}

.timer {
    width: 45px;
}

/* Matrix Section */
.matrix-main {
    display: flex;
    justify-content: center;
}

.matrix-container {
    width: 350px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.matrix-container div {
    width: 350px;
    height: 35px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.matrix-container button {
    width: 35px;
    height: 35px;
    background-color: black;
}

.matrix {
    width: 250px;
    height: auto;
}

/* Buffer Section */
.buffer-container {
    display: flex;
    gap: 10px;
    padding: 5px 5px 5px 10px;
    height: 35px;
    align-items: center;
}

/* Sequence Section */
.sequence-main {
    display: flex;
    flex-direction: column;
}

.sequence-container {
    display: flex;
    flex-direction: column;
    padding: 5px;
    gap: 10px;
}

.sequence-1,
.sequence-2,
.sequence-3 {
    height: 35px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 5px;
}

.failed {
    background-color: red;
}

/* Text and Button Styles */
.game-section :not(.instructions) p {
    display: flex;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
}

.correctly-chosen-hex {
    color: yellow;
    font-weight: bold;
}

button:disabled:not(.chosen-hexadecimals) {
    color: red;
}

.chosen-hexadecimals {
    color: black
}

.game-section .section-left .results-container p {
    width: 350px;
}

/* Outline Styles */
*:not(.instructions p, .instructions strong, .instructions, body) {
    outline: 1px solid yellow;
}

* {
    color: white;
}