CalculadoraBasica.css

/*****************
    Pablo Argallero - UO283216
    
    Descipción de los estilos que contiene
******************/

input[type="button"]{
    border-radius: 0.3em;
    background-color: rgb(106, 106, 106);
    color: white;
    font-size: 1.5em;
}
 
/*pintamos los botones de los numeros de un color mas claro*/
input[type="button"][value="0"],
input[type="button"][value="1"],
input[type="button"][value="2"],
input[type="button"][value="3"],
input[type="button"][value="4"],
input[type="button"][value="5"],
input[type="button"][value="6"],
input[type="button"][value="7"],
input[type="button"][value="8"],
input[type="button"][value="9"],
input[type="button"][value="."]
{
    background-color: rgb(26, 26, 26);
    color: white;
}

input[type="button"][value="="]
{
    background-color: rgb(143, 0, 0);
    color: white;
}

section{
    padding: 1em;
    background-color: rgb(159, 159, 159);
    border-style: solid;
    border-width: 0.5em;
    border-color: black;
}

footer{
    padding: 1em;
}


input[type="text"]{
    background-color: rgb(190, 244, 190);
   color: black;
   font-size: 1.2em;
   font-family: "Lucida Console", "Courier New", monospace;
}


/********************************
LAYOUT
*********************************/
body{
    display: flex;
    flex-direction: column;
    align-items: center;
}



section 
{
   display: grid;
   grid-template-columns: [primera] 1fr
                        [segunda] 1fr
                        [tercera] 1fr
                        [cuarta] 1fr
                        [quinta]1fr [ultima];
   grid-template-rows: [primera] 1fr
                        [segunda] 1fr
                        [tercera] 1fr
                        [cuarta] 1fr
                        [quinta] 1fr
                        [sexta]1fr [ultima];
   grid-gap: 0.5em;
   
}

/*configuramos tamaño del input*/
label {
    grid-column: primera / ultima;
}
input[type="text"]{
    display: block;
    width: 100%;
}

/*Configuramos el tamaño del boton +*/
input[value="+"]{
    grid-row: quinta /  ultima;
    grid-column: cuarta/quinta;
}