body{
    background-image: url("img/background.jpg");
    background-size: 100vw;
}

.backgroundCanvas{
    width: auto;
    height: auto;
}

.title{
    width: auto;
    height: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.title h1{
    color:white;
    text-align: center;
    font-family: 'Nunito Sans',-apple-system,blinkmacsystemfont,'Segoe UI',roboto,helvetica,arial,sans-serif;
    font-size: 8vh;
}

.matrixLabel{
    width: auto;
    height: 10vh;
}

.matrixLabelA{
    width: 10vh;
    height: 10vh;
    float: left;
    margin-left: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.matrixLabelA h2{
    color:white;
    text-align: center;
    font-family: 'Nunito Sans',-apple-system,blinkmacsystemfont,'Segoe UI',roboto,helvetica,arial,sans-serif;
    font-size: 6vh;
}

.matrixLabelB{
    width: 10vh;
    height: 10vh;
    float: left;
    margin-left: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; 
}

.matrixLabelB h2{
    color:white;
    text-align: center;
    font-family: 'Nunito Sans',-apple-system,blinkmacsystemfont,'Segoe UI',roboto,helvetica,arial,sans-serif;
    font-size: 6vh;
}

.matrixValue{
    width: auto;
    height: 35vh;
}

.matrixValueA{
    width: 30vh;
    height: 30vh;
    float: left;

    margin-left: 10vh;
}

.matrixBoxA{
    border-style: solid;
    border-color: red;
    width: 9vh;
    height: 9vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    float: left;
}

.matrixValueB{
    width: 30vh;
    height: 30vh;
    float: left;
    margin-left: 10vh;
}

.matrixBoxB{
    border-style: solid;
    border-color: blue;
    width: 9vh;
    height: 9vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    float: left;
}

.matrixValueCalculation{
    width: 20vh;
    height: 30vh;
    float: left;
    margin-left: 10vh;
}

.matrixValueCalculationAB{
    width: 20vh;
    height: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; 
}

.matrixValueEqual{
    width: 10vh;
    height: 30vh;
    float: left;
    margin-left: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; 
}

.matrixValueEqual h2{
    color:white;
    text-align: center;
    font-family: 'Nunito Sans',-apple-system,blinkmacsystemfont,'Segoe UI',roboto,helvetica,arial,sans-serif;
    font-size: 10vh;
}

.matrixValueR{
    width: 30vh;
    height: 30vh;
    float: left;
    margin-left: 10vh;
}

.matrixBoxR{
    border-style: solid;
    border-color: green;
    width: 9vh;
    height: 9vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    float: left;
}

.matrixClear{
    width: auto;
    height: 10vh;
}

.matrixClearA{
    width: 10vh;
    height: 10vh;
    float: left;
    margin-left: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; 
}

.matrixClearB{

    width: 10vh;
    height: 10vh;
    float: left;
    margin-left: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; 
}

.matrixClearR{

    width: 10vh;
    height: 10vh;
    float: left;
    margin-left: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; 
}

.buttonClearA{
    width: 10vh;
    height: 6vh;
    border-radius: 2vh;
    background: gray;
    color:white;
    font-size: 3vh;
}

.buttonClearB{
    width: 10vh;
    height: 6vh;
    border-radius: 2vh;
    background: gray;
    color:white;
    font-size: 3vh;
}

.buttonClearC{
    width: 10vh;
    height: 6vh;
    border-radius: 2vh;
    background: gray;
    color:white;
    font-size: 3vh;
}

.matrixButton{
    width: auto;
    height: 30vh;
}

.matrixButtonA{
    width: 20vh;
    height: 30vh;
    float: left;
    margin-left: 15vh;
}

.matrixButtonBox{
    width: 20vh;
    height: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; 
}

.matrixButtonB{
    width: 20vh;
    height: 30vh;
    float: left;
    margin-left: 20vh;
}

.buttonLong{
    width: 20vh;
    height: 6vh;
    border-radius: 2vh;
    background: gray;
    color:white;
    font-size: 3vh;
}

.matrixButtonEqual{
    width: 10vh;
    height: 30vh;
    float: left;
    margin-left: 45vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; 
}

.matrixButtonEqual h2{
    color:white;
    text-align: center;
    font-family: 'Nunito Sans',-apple-system,blinkmacsystemfont,'Segoe UI',roboto,helvetica,arial,sans-serif;
    font-size: 10vh;
}

.matrixButtonResult{
    width: 30vh;
    height: 30vh;
    float: left;
    margin-left: 10vh;
}

.matrixButtonResultLabel{
    background: gray;
    border-color: lime;
    border-style: solid;
    width: 28vh;
    height: 10vh;
    float: top;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; 
}

.matrixButtonResultLabel h2{
    color:white;
    text-align: center;
    font-family: 'Nunito Sans',-apple-system,blinkmacsystemfont,'Segoe UI',roboto,helvetica,arial,sans-serif;
    font-size: 3vh;
}

.matrixButtonResultValue{
    background: gray;
    border-color: lime;
    border-style: solid;
    width: 28vh;
    height: 20vh;
    float: top;
}

.matrixButtonResultValue h2{
    color:white;
    text-align: center;
    font-family: 'Nunito Sans',-apple-system,blinkmacsystemfont,'Segoe UI',roboto,helvetica,arial,sans-serif;
    font-size: 4vh;
}

.matrixInput{
    width: 7.6vh;
    height: 9vh;
    background-color: gray;
    font-family: 'Nunito Sans',-apple-system,blinkmacsystemfont,'Segoe UI',roboto,helvetica,arial,sans-serif;
    font-size: 3vh;
    text-align: center;
    color: white;
}

.matrixOutput{
    width: 9vh;
    height: 9vh;
    background-color: gray;
    font-family: 'Nunito Sans',-apple-system,blinkmacsystemfont,'Segoe UI',roboto,helvetica,arial,sans-serif;
    font-size: 3vh;
    text-align: center;
    color: white;
}