:root {

  --primary-color: #6366f1; /* Indigo */
  --secondary-color: #f43f5e; /* Rose */
  --bg-light: #f9fafb;
  --Lighttext-color: #000000;
  --darktext-color:white;
  --card-bg: #f3eded;
  --shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  --radius: 12px;
  --font-main: 'Poppins', sans-serif;
  --hoverbg :#555;
  --pSize:0.9rem;
  --border:2px dotted white;
}

.calculator{margin:5% auto;background:linear-gradient(to right,var(--primary-color),var(--secondary-color));padding:20px;border-radius:20px;width:400px;box-shadow:0 0 40px #000 inset}
#display{width:95%;height:50px;margin-bottom:10px;font-size:25px;text-align:right;padding:10px;font-weight:700;border:none;border-radius:10px;background-color:#eee}
.buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
button{font-size:1.8rem;padding:20px;border:none;border-radius:10px;background-color:var(--primary-color);box-shadow:0 0 10px #000 inset;color:#fff;cursor:pointer}
button:hover{background-color:#777}button:nth-child(16){grid-column:span 2;background-color:#f90}
button:nth-child(16):hover{background-color:#0f0}

@media screen and (max-width:700px){
.calculator{padding:20px;border-radius:10px;min-height:100vh;width:270px;display:block;position:relative}
.buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
button{font-size:1.6rem;padding:10px;border:none;border-radius:5px}
}