* { box-sizing: border-box; }



.scalculator{
    width:95%;
    max-width:450px;
    background:#444;
    padding:15px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.3);
	margin: 40px auto;
	margin-top:0
}

#display{
    width:100%;
    height:60px;
    font-size:1.6rem;
    text-align:right;
    padding:10px;
    border:none;
    border-radius:10px;
    margin-bottom:10px;
    background:#cfd8dc;
}

.mode{
    color:white;
    font-size:0.8rem;
    margin-bottom:5px;
}

.sceincebuttons{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
}

.sceincebuttons button{
    padding:14px;
    border:none;
    border-radius:8px;
    font-size:0.9rem;
    cursor:pointer;
    transition:0.2s;
}

.sceincebuttons button:hover{ opacity:0.85; }

.scientific{ background:#6ee7a2; }
.number{ background:#b0c4de; }
.operator{ background:#90ee90; }
.equal{ background:#4caf50; grid-row:span 2; }
.clear{ background:#ff6b6b; color:white; }
.toggle{ background:#ffd166; }

@media(max-width:400px){
    .sceincebuttons button{ padding:10px; font-size:0.8rem; }
	.scalculator{
	margin: 15px auto;
}
}