:root {
  --main-color-100: hsl(0, 0%, 23%);
  --main-color-200: hsl(0, 0%, 12%);
  --main-color-400: hsl(0, 0%, 0%);

  --secondary-color-100: hsl(158, 57%, 48%);
  --secondary-color-200: hsl(158, 91%, 40%);
  --secondary-color-400: hsl(157.95, 95.4%, 34.12%);
  --secondary-color-600: hsl(158, 89%, 25%);
  --secondary-color-800: hsl(139, 72%, 37%);

  --margin-main: 40px;

  --ff-main: "Sansita", sans-serif;
  --fw-400: 400;
  --fs-n: normal;
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
    2. Remove default margin
  */
* {
  margin: 0;
}
/*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
    5. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/*
    6. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
  font: inherit;
}
/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/*
    8. Create a root stacking context
  */

#root,
#__next {
  isolation: isolate;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100vh;

  font-family: var(--ff-main);
  font-weight: var(--fw-400);
  font-style: var(--fs-n);
  font-size: x-large;

  background-color: var(--secondary-color-600);
}

img {
  height: 30px;
  width: 25px;
}

button {
  background: transparent;
  border: none;

  cursor: pointer;
}

.calc_body {
  height: 90%;
  width: 26%;

  border-radius: 20px;

  background-color: var(--main-color-400);

  display: grid;
  grid-template-rows: 2fr 0.5fr 3fr;
}

.secondaryButtons {
  border-bottom: 2px solid var(--main-color-100);

  width: 90%;
  margin-left: 5%;

  background: transparent;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 15px;
}

.typingArea {
  display: flex;
  justify-content: right;

  margin-top: 20%;
  margin-right: 30px;

  caret-color: var(--secondary-color-200);
}

input {
  text-align: right;
  color: white;

  width: 300px;
  height: 50px;

  font-size: 30px;
  background: transparent;
  border: none;
  outline: none;
}

.answerArea {
  display: flex;
  justify-content: right;

  margin-top: 15%;
  margin-right: 30px;

  font-size: 20px;
  color: var(--main-color-100);
  background: transparent;
}

.secondary-leftBtns {
  margin-left: 20px;

  width: 150px;

  display: flex;
  justify-content: space-between;
}

.mainButtons {
  display: grid;
  grid: repeat(5, 1fr) / repeat(4, 1fr);
  gap: 5px;

  margin-top: var(--margin-main);
  margin-left: 10px;
  margin-bottom: 15px;
}

.calc-button {
  border-radius: 50%;

  width: 80px;
  height: 80px;

  align-items: center;
}

.calc-button {
  background: var(--main-color-200);
  border: transparent;
  color: white;
  transition: background-color 0.3s ease;
}

.operation {
  background: var(--main-color-100);
  color: var(--secondary-color-100);

  border: transparent;
}

.clearBtn {
  color: rgb(205, 115, 115);
}

.equalBtn {
  background: var(--secondary-color-800);
}

.animate {
  background: hsl(0, 1%, 48%);
}

.calc-button span {
  display: inline-block;
  transition: transform 0.8s ease;
}

.animate span {
  transform: scale(0.2);
}

@media (max-width: 349px) {
  .calc_body {
    height: 95%;
    width: 100%;

    margin-left: 5px;
  }

  .secondaryButtons {
    width: 90%;
    margin-left: 5%;
    margin-bottom: 5px;

    padding-bottom: 15px;
  }
  .typingArea {
    margin-top: 20px;
    margin-right: 30px;
    margin-left: 20px;
  }

  .mainButtons {
    gap: 10px;

    width: 90%;

    margin-left: 15px;
    margin-bottom: 40px;
  }
  .calc-button {
    border-radius: 50%;

    width: 70px;
    height: 70px;
  }
}

@media (min-width: 350px) and (max-width: 399px) {
  .calc_body {
    height: 98%;
    width: 95%;
  }
  .secondaryButtons {
    width: 90%;
    margin-left: 5%;
    margin-bottom: 5px;

    padding-bottom: 15px;
  }
  .typingArea {
    margin-top: 20px;
    margin-right: 30px;
    margin-left: 20px;
  }

  .mainButtons {
    gap: 10px;

    width: 90%;

    margin-left: 15px;
    margin-bottom: 40px;
  }
  .calc-button {
    border-radius: 50%;

    width: 70px;
    height: 70px;
  }
}

@media (min-width: 400px) and (max-width: 500px) {
  .calc_body {
    height: 95%;
    width: 95%;
  }

  .mainButtons {
    display: grid;

    gap: 10px;

    width: 90%;

    margin-left: 15px;
    margin-bottom: 40px;
  }
}

@media (min-width: 500px) and (max-width: 699px) {
  .calc_body {
    height: 98%;
    width: 70%;
  }
  .typingArea {
    margin-top: 20px;
    margin-right: 30px;
    margin-left: 20px;
  }
  .mainButtons {
    display: grid;

    gap: 10px;

    width: 90%;

    margin-left: 15px;
    margin-bottom: 40px;
  }
}

@media (min-width: 700px) and (max-width: 900px) {
  .calc_body {
    height: 80%;
    width: 50%;
  }
}

@media (min-width: 900px) and (max-width: 1050px) {
  .calc_body {
    height: 70%;
    width: 45%;
  }
}

@media (min-width: 1200px) and (max-width: 1400px) {
  .calc_body {
    height: 98%;
    width: 30%;
  }
  .typingArea {
    margin-top: 20px;
    margin-right: 30px;
    margin-left: 20px;
  }
  .mainButtons {
    display: grid;

    gap: 10px;

    width: 90%;

    margin-left: 15px;
    margin-bottom: 40px;
  }
}