*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
body{
    background: #f3f5f9;
}
.contianer{
    display: flex;
    position: relative;
}
button{
    padding: .2rem;
    margin: .2rem 0;
}

/* browser specifics */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number]{
    -moz-appearance: textfield;
}

/* navbar */
nav{
    position: fixed;
    width: 20vw;
    height: 100%;
    background: #4b4276;
    padding: 30px 0;
    text-align: center;
}
nav ul li{
    padding: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    border-top: 1px solid rgba(225,225,225,0.05);
    list-style: none;
}
nav ul li a{
    color: #bdb8d7;
    display: block;
}
nav ul li.active{
    background: #594f8d;
}
nav ul li:hover, nav ul li:hover a{
    background: #594f8d;
    color: #fff;
}

/* main  */
main{
    width: 80vw;
    margin-left: 20%;
    padding: 20px;
}
.info{
    color: #717171;
    line-height: 25px;
    padding: 5px 0;
}
.content_container h1{
    color:#464545;
    padding: 8px 0;
}
.matrixDetails, .inputVals, .result{
    line-height: 25px;
    padding: 5px 0px;
}
.matrix{
    padding: 0 10px 0 0;
}
.inputGrid{
    display: flex;
    gap: 2rem;
    margin: .2rem 0;
}
input[type="number"]{
    text-align: center;
    width: 50px;
    height: 30px;
}
.row{
    display: block;
    width: 100%;
}

/* media queries */
@media (max-width:420px) {
    nav{
        font-size: .7rem;
    }
}