*{
    margin: 0;
    padding: 0;
    
}

/* Body (Background) */
body{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

/* Botão troca de Cor */
#buttonTrocaDeCor{
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    background: none;
    color: #fdd005;
    text-decoration:none;
    text-shadow: none;
    border-style: none;
    box-shadow: none;
}



/* padrão de cores um, do corpo da calculador  */
.padraoDeCorUm{
    padding: 20px;
    background-color: rgb(53, 53, 53);
    margin-top: 50px;
    box-shadow:inset 0px 1px 3px 0px #cfcfcf;
	background:linear-gradient(to bottom, #525756 5%, #1a1a1a 100%);
	background-color:#525756;
	border-radius:20px;
	border:1px solid #0c0d0d;
	display:inline-block;
	color:#ffffff;
    
}

/* padrão de cores dois, do corpo da calculador  */
.padraoDeCorDois{
    padding: 20px;
    background-color: rgb(248, 248, 248);
    margin-top: 50px;
    border-radius: 20px;
    border: 2px solid gray;
    display: inline-block;
}

/* Painel de Historico de calculos */
#historico{
    display: block;
    width: 94%;
    height: 100px;
    resize: none; 
    box-shadow:inset 0px 1px 3px 0px #101a13;
	background:linear-gradient(to bottom, #9dc4a7 5%, #366145 100%);
	background-color:#9dc4a7;
	border-radius:5px 5px 0px 0px;
	border:1px solid #19965e;
	color:#0c0c0c;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
    padding: 10px;
	text-decoration:none;   
}

/* Painel de Calculos */
#visor{ 
    text-align: right;
    display: block;
    width: 94%;
    resize: none; 
    box-shadow:inset 0px 1px 3px 0px #101a13;
	background:linear-gradient(to bottom, #414141 5%, #1f1f1f 100%);
	background-color:#9dc4a7;
	border-radius:0px 0px 5px 5px;
	border:1px solid #181818;
	color:#06ee54;
	font-family:Arial;
	font-size:19px;
	font-weight:bold;
    padding: 10px;
	text-decoration:none;
}

/* Botao - padrão de cores um */
.buttonPadraoUm{
    margin: 5px;
    min-width: 50px;
    min-height: 50px;
    box-shadow:inset 0px 6px 16px -12px #365c23;
	background:linear-gradient(to bottom, #33c42b 5%, #418749 100%);
	background-color:#33c42b;
	border-radius:6px;
	border:1px solid #24a33f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:32px;
	padding:9px 23px;
	text-decoration:none;
	text-shadow:0px 2px 4px #2c6627;
    
}

/* Botao - padrão de cores um */
.buttonPadraoUm:hover{
    background:linear-gradient(to bottom, #418749 5%, #33c42b 100%);
	background-color:#418749;
}

/* Botao - padrão de cores um */
.buttonPadraoUm:active{
    position:relative;
	top:1px;
}

/*botões de numeros com padrão de cores diferente (padrão um)*/
.number{
    box-shadow:inset 0px 6px 16px -12px #91b8b3;
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	background-color:#768d87;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	text-decoration:none;
	text-shadow:0px 2px 4px #2b665e;
}
.number:hover{
    background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	background-color:#6c7c7c;
}
.number:active{
    position:relative;
	top:1px;
}

/* botão de igual com padrão de cores diferente (padrão um) */
.igual{
    box-shadow:inset 0px 6px 16px -12px #d9fbbe;
	background:linear-gradient(to bottom, #b8e356 5%, #a5cc52 100%);
	background-color:#b8e356;
	border:1px solid #83c41a;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	text-decoration:none;
	text-shadow:0px 2px 4px #86ae47;
}

.igual:hover{
    background:linear-gradient(to bottom, #a5cc52 100%, #89a83f 5%);
	background-color:#779238;;
}

.igual:active{
    position:relative;
	top:1px;
}


/* Botao - padrão de cores dois */
.buttonPadraoDois{
    margin: 5px;
    min-width: 50px;
    min-height: 50px;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	background-color:#ffffff;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:32px;
	font-weight:bold;
	padding:9px 23px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;

}

/* Botao - padrão de cores dois */
.buttonPadraoDois:hover{
    background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;
}

/* Botao - padrão de cores dois */
.buttonPadraoDois:active{
    position:relative;
	top:1px;
}




/* organizador dos botões */
#buttonEOperadores{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
}
#zero{

    grid-column: span 2; 

}
#apagar{
    grid-column: span 2; 
}