/* 
- FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
- FONT WEGHTS:
default:400
Medium:500
Semi-bold:600
Bold:700

- LINE HEIGHTD:
default:1
small:1.05
medium: 1.2
paragraph default:1.6
letter-spacing: -0.5px and 0.75px;

-- 02 COLORS

Елемент сайту
Назва кольору
HEX
Призначення
Фон сайту (body)
Pistage
#D9E4D7
Ніжний світлий фон
Ліва частина (калькулятор)
Matcha
#8EA48B
Приглушений, не дратує
Права частина (витрати)
Ever green
#BECFBB
Світліший, для контрасту
Нижній блок (результат)
Calm green
#324D3E
Темний блок, виглядає “фінально”
Кнопки
Early green
#728A6E
Основний акцент
Hover кнопок
Resting green
#2B4336
Глибший тон при наведенні
Текст на темному фоні
Білий
#FFFFFF
Для контрасту


 */

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

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  background-color: #d9e4d7;
}
main {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.leftSection {
  background-color: #8ea48b;
  border-radius: 30px;
  padding: 20px;
  padding-top: 25px;
  padding-bottom: 25px;
  max-width: 400px;
}
.rightSection {
  /* background-color: #becfbb; */
  max-width: 400px;
  width: 100%;
}
.bottomSection {
  margin-top: 50px;
  margin-bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
  75% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.shaking {
  animation: shake 1s ease-in-out infinite;
  cursor: pointer;
  transform-origin: center center;
  will-change: transform;
}

.editLabel {
  border: 1px solid #324d3e;
  background-color: rgba(50, 77, 62, 0.3);
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
}