style.css

body{
    font-family: 'Roboto', sans-serif;
}

h1{
    text-align: center;
    font-weight: bold;
    margin: .2rem;
}

#color-mode{
    position: absolute;
    margin: 1rem;
    top: 0;
    right: 0;
    border: none;
    border-radius: 1rem;
    padding: .5rem 1rem;
    background-color: #484848;
    color:rgb(248, 248, 248);
    transition: .2s;
}

#color-mode.dark-mode{
    background-color: #e5e5e5;
    color: black;
    font-weight: bold;
}

#color-mode:hover{
    transform: translate(0, -.1rem);
    cursor: pointer;
}

#title{
    font-size: 2.5rem;
}

main{
    display: flex;
    gap: 5rem;
    margin: 0rem 4rem;
}

#system-container{
    display: grid;
    grid-template: 1.5fr 1.7fr 1.5fr 1.7fr 1.5fr 1.7fr / 1fr 1fr 1fr .5fr 1fr;
    grid-template-areas:
    "x1 y1 z1 . ."
    "x1-input y1-input z1-input e1 a1"
    "x2 y2 z2 . ."
    "x2-input y2-input z2-input e2 a2"
    "x3 y3 z3 . ."
    "x3-input y3-input z3-input e3 a3";
}

#system-container *{
    text-align: center;
}

#system-container label, #system-container p{
    margin: auto;
    font-size: 3rem;
}

#system-container input{
    border-radius: .5rem;
    margin: 0 .2rem;
    font-size: 2rem;
    max-width: 125px;
}

#result-container{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#result-container h1{
    margin-bottom: 1rem;
}

#row-echelon-container{
    height: 50%;
    display: grid;
    grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;
    margin-bottom: 3rem;
}

#row-echelon-container p{
    font-size: 2rem;
    text-align: center;
    margin: 0;
    padding: 1.5rem 0;
}

#solution-container{
    text-align: center;
    display: none; /*to be toggled to flex by js */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 2.5rem;
}

.third-value{
    border-right: solid;
}

#unsolvable-message{
    text-align: center;
    font-size: 2rem;
    height: 176px;
}

body.dark-mode{
    background-color: #111827;
    color: #E2E2E2;
}
#system-container input.dark-mode{
    border: none;
    color: #2d2d2d;
    background-color: #cdedff;
}
::placeholder{
    color: rgb(104, 104, 104);
}

@media (max-width: 1142px){
    main{
        flex-direction: column;
        align-items: center;
    }
    #system-container input{
        max-width: 200px;
    }
}
@media (max-width: 982px){
    #system-container input{
        max-width: 170px;
    }
}
@media (max-width: 700px){
    #system-container input{
        max-width: 80px;
    }
}
@media (max-width: 360px){
    #system-container input{
        max-width: 50px;
    }
}