* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 background-color: #E6E6E6;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100dvh;
}

/* variables */
:root {
 /* colors */
 --c-primary: hsla(180, 14%, 93%, 1);
 --c-secondary: hsla(207, 16%, 78%, 1);
 --c-accent: hsla(24, 100%, 60%, 1);
 --c-neutral: hsla(360, 100%, 50%, 1);
 /* fonts */
 --ff-title: "Roboto", sans-serif;
}

/* calculator */
.calculator {
 width: 100%;
 max-width: 400px;
 height: auto;
 margin: 0 auto;
 padding: 40px 32px;
 background-color: #fff;
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
 border-radius: 1rem;
 display: flex;
 flex-direction: column;
 gap: 1rem;
}

.calculator-heading {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.calculator-heading .calculator-title {
 font-family: var(--ff-title);
 font-size: 24px;
 font-weight: bold;
}

.calculator-icons {
 position: relative;
}

.calculator-icons i {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 48px;
 height: 48px;
 background-color: var(--c-secondary);
 border-radius: 50%;
 font-size: 20px;
 cursor: pointer;
}

.tooltip {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 position: absolute;
 z-index: 99;
 bottom: 130%;
 left: 50%;
 transform: translateX(-50%);
 background-color: var(--c-secondary);
 border-radius: 8px;
 font-family: var(--ff-title);
 font-size: 0.875rem;
 font-weight: 500;
 color: #333;
 width: 100px;
 height: 40px;
 pointer-events: none;
 transition: .5s ease;
 visibility: hidden;
 opacity: 0;
}

.calculator-icons:hover .tooltip {
 visibility: visible;
 opacity: 1;
}

.calculator-display {
 text-align: right;
 font-size: 32px;
 font-weight: 500;
 min-height: 80px;
 border: 1px solid #ddd;
 outline: none;
 border-radius: 4px;
 padding: 0 8px;
}

.calculator-buttons {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 16px;
}

.calculator-buttons button {
 padding: 16px;
 outline: none;
 border: none;
 border-radius: 4px;
 background-color: var(--c-primary);
 cursor: pointer;
}

.calculator-buttons .equal {
 grid-column: span 2;
}

.calculator-buttons .btn-key {
 background-color: var(--c-neutral);
 color: #fff;
}

.calculator-buttons .btn-operator {
 background-color: var(--c-accent);
 color: #fff;
}

/* tablet */
@media screen and (max-width: 780px) {
 .calculator {
  width: 90%;
 }
}

/* mobile */
@media screen and (max-width: 420px) {
 .calculator {
  width: 90%;
  padding: 32px 16px;
 }
 
 .calculator-heading .calculator-title,
 .calculator-icons i {
  font-size: 16px;
 }
 
 .calculator-icons i {
  width: 40px;
  height: 40px;
 }
 
 .calculator-buttons {
  gap: 8px;
 }
 
 .tooltip {
  left: 100%;
  transform: translateX(-100%);
 }
}