:root {
  --color-button-hover: #01262e;
  --color-primary: #033540;
  --color-button-active: #63898c;
  --color-additional: #a7d1d2;
  --color-second: #e0f4f5;
  --color-shadow: #63898c33;
  --color-background: #fff;

  --font-size-title: 22px;
  --font-size-title-phone: 16px;
  --font-size-title-phone-xl: 12px;
  --font-size-paragraph: 20px;
  --font-size-paragraph-phone: 14px;
  --font-size-paragraph-phone-xl: 11px;
  --font-size-display: 30px;

  --font-weight-title: 700;
  --font-weight-paragraph: 400;

  --font-family-default: "Open Sans", serif;

  --transition-duration-min: 0.2s;
  --transition-duration-max: 0.3s;

  --gap-size-xxl: 55px;
  --gap-size-xl: 45px;
  --gap-size-default: 35px;
  --gap-size-m: 30px;
  --gap-size-s: 25px;
  --gap-size-xs: 20px;
  --gap-size-xxs: 15px;
  --gap-size-xxxs: 10px;
  --gap-size-xxxxs: 5px;
  --gap-size-xxxxxs: 3px;
  --gap-size-negative-s: -10px;

  --size-xxxxxxl: 500px;
  --size-xxxxxl: 450px;
  --size-xxxxl: 400px;
  --size-xxxl: 350px;
  --size-xxl: 300px;
  --size-ll: 250px;
  --size-xl: 225px;
  --size-l: 210px;
  --size-m: 200px;
  --size-s: 160px;
  --size-xs: 140px;
  --size-xxs: 100px;
  --size-xxxs: 95px;
  --size-xxxxs: 80px;
  --size-xxxxxs: 60px;
  --size-xxxxxxs: 55px;
  --size-7xs: 50px;
  --size-8xs: 40px;

  --underline-thickness: 1px;
  --underline-thickness-l: 2px;

  --container-size: 970px;
  --container-padding: 16px;

  --border-radius-size-m: 10px;

  --underline-width-default: 97%;
  --underline-width-l: 90%;
}

.button:hovir {
  transition: all var(--transition-duration-min) ease;
}
*/ .button:active {
  box-shadow: 4px 4px 12px 5px var(--color-shadow);
  transition: ease all var(--transition-duration-min);
  background: var(--color-button-active);
}

.container {
  max-width: var(--container-size);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.app {
  margin-top: var(--gap-size-m);
  border: var(--underline-thickness-l) solid var(--color-primary);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--size-xxxxs);
  background-color: var(--color-primary);
  border-bottom: none;
  position: relative;
}

.header__title {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-title);
  font-size: var(--font-size-title);
  margin-left: var(--gap-size-default);
  color: var(--color-second);
}

.menu__list {
  display: flex;
  margin-right: var(--gap-size-default);
}

.menu__list-item-link {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-paragraph);
  margin-left: var(--gap-size-default);
  color: var(--color-second);
  position: relative;
}

.menu__list-item-link--active::after {
  position: absolute;
  content: "";
  height: var(--underline-thickness);
  width: var(--underline-width-default);
  border-radius: var(--border-radius-size-m);
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-additional);
}

.content {
  display: flex;
  justify-content: center;
  border-top: none;
  height: var(--size-xxxxxxl);
}

.content__setting {
  display: flex;
  justify-content: center;
  border-top: none;
  height: var(--size-xxxxxxl);
  margin-right: var(--gap-size-default);
  margin-left: var(--gap-size-default);
}

.calculator {
  width: 75%;
}

.calculator__display {
  height: var(--size-xxs);
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: end;
}

.calculator__display::after {
  position: absolute;
  content: "";
  height: var(--underline-thickness);
  width: var(--underline-width-default);
  border-radius: var(--border-radius-size-m);
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-additional);
}

.calculator__display-text {
  width: 100%;
  text-align: end;
  display: flex;
  margin: 0 var(--gap-size-m) 0 var(--gap-size-m);
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-display);
  padding-top: var(--gap-size-m);
  padding-bottom: var(--gap-size-m);
  white-space: nowrap;
}

.calculator__keyboard {
  height: var(--size-xxxxl);
  display: grid;
  width: calc(100% - (var(--gap-size-default) * 2));
  margin-right: var(--gap-size-default);
  margin-left: var(--gap-size-default);
}

.calculator__keyboard-button {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding-top: var(--gap-size-xxs);
  justify-items: center;
}

.calculator__keyboard-btn {
  width: var(--size-xxxxxs);
  height: var(--size-xxxxxs);
  border-radius: var(--border-radius-size-m);
  border: var(--underline-thickness) solid var(--color-additional);
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-title);
  background: var(--color-second);
  transition: all var(--transition-duration-max) ease;
}

.history {
  width: 25%;
  position: relative;
}

.history::after {
  position: absolute;
  content: "";
  display: block;
  height: var(--underline-width-default);
  width: var(--underline-thickness);
  border-radius: var(--border-radius-size-m);
  top: 50%;
  background: var(--color-additional);
  transform: translateY(-50%);
}

.history__title {
  height: 5%;
  text-align: center;
  padding-top: var(--gap-size-xxxs);
  padding-bottom: var(--gap-size-m);
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-title);
  position: relative;
}

.history__title::after {
  position: absolute;
  content: "";
  height: var(--underline-thickness);
  width: var(--underline-width-l);
  border-radius: var(--border-radius-size-m);
  bottom: var(--gap-size-negative-s);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-additional);
}

.history__list {
  overflow-y: hidden;
  height: calc(95% - var(--gap-size-default));
  margin-top: var(--gap-size-xs);
  margin-left: var(--gap-size-s);
  scrollbar-color: var(--color-primary) white;
  scrollbar-width: thin;
  overflow-x: hidden;
}

.history__list-item {
  list-style-type: none;
  margin-bottom: var(--gap-size-xxs);
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-paragraph);
  margin-right: var(--gap-size-s);
  word-break: break-all;
  position: relative;
  cursor: pointer;
}

.settings__list-item {
  margin-top: var(--gap-size-m);
  display: flex;
  justify-content: space-between;
}

.settings__reset-btn {
  width: var(--size-xxxxxl);
  height: var(--size-7xs);
  border-radius: var(--border-radius-size-m);
  border: var(--underline-thickness) solid var(--color-additional);
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-paragraph);
  background: var(--color-second);
  transition: all var(--transition-duration-max) ease;
}

.settings__change-theme-btn {
  width: var(--size-l);
  height: var(--size-7xs);
  border-radius: var(--border-radius-size-m);
  border: var(--underline-thickness) solid var(--color-additional);
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-paragraph);
  background: var(--color-second);
  transition: all var(--transition-duration-min) ease;
}

.settings__change-theme-btn--active {
  font-weight: var(--font-weight-title);
  border: var(--underline-thickness-l) solid;
  pointer-events: none;
  background-color: var(--color-additional);
}

@media (hover: hover) {
  button:hovir {
    background: var(--color-additional);
  }
}

@media (max-width: 980px) {
  .content {
    display: inline;
  }
  .calculator {
    width: 100%;
  }
  .history {
    width: 100%;
  }
  .history__title::after {
    width: var(--underline-width-default);
  }
}

@media (max-width: 700px) {
  .calculator__keyboard {
    width: calc(100% - (var(--gap-size-xs) * 2));
    margin-left: var(--gap-size-xs);
    margin-right: var(--gap-size-xs);
  }

  .settings__reset-btn {
    width: var(--size-xxxl);
  }

  .settings__change-theme-btn {
    width: var(--size-s);
  }
}

@media (max-width: 500px) {
  .header {
    height: var(--size-xxxxxs);
  }

  .header__title {
    font-size: var(--font-size-title-phone);
    margin-left: var(--gap-size-xxs);
  }

  .menu__list-item-link {
    font-size: var(--font-size-paragraph-phone);
  }

  .calculator__display {
    height: var(--size-xxxxxs);
  }

  .calculator__display-text {
    padding-bottom: var(--gap-size-xxxs);
    padding-top: var(--gap-size-xxxs);
    font-size: var(--font-size-title-phone);
    height: 100%;
    align-items: center;
  }

  .calculator__keyboard {
    width: calc(100% - (var(--gap-size-xxxs) * 2));
    margin-left: var(--gap-size-xxxs);
    margin-right: var(--gap-size-xxxs);
    grid-auto-rows: var(--gap-size-xxl);
    max-height: var(--size-ll);
    position: relative;
  }

  .calculator__keyboard-button {
    padding-top: var(--gap-size-xxs);
    height: var(--size-xxxxxxs);
  }

  .history::before {
    position: absolute;
    content: "";
    height: var(--underline-thickness);
    width: var(--underline-width-default);
    border-radius: var(--border-radius-size-m);
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-additional);
  }

  .history__title {
    padding-bottom: var(--gap-size-xxxxs);
    font-size: var(--font-size-title-phone);
  }

  .history__list-item {
    font-size: var(--font-size-paragraph-phone);
  }

  .calculator__keyboard-btn {
    height: var(--size-8xs);
    width: var(--size-8xs);
    font-size: var(--font-size-title-phone);
  }
  .settings__reset-btn {
    width: var(--size-xxl);
    font-size: var(--font-size-title-phone-l);
  }

  .settings__change-theme-btn {
    width: var(--size-xs);
    font-size: var(--font-size-title-phone-l);
  }
}

@media (max-width: 380px) {
  .header {
    height: var(--size-7xs);
  }

  .header__title {
    font-size: var(--font-size-title-phone-xl);
    margin-left: var(--gap-size-xxxs);
  }

  .menu__list-item-link {
    font-size: var(--font-size-paragraph-phone-xl);
    margin-left: var(--gap-size-xxs);
  }

  .history__title {
    padding-bottom: var(--gap-size-xxxxxs);
    font-size: var(--font-size-title-phone-xl);
  }

  .history__list-item {
    font-size: var(--font-size-paragraph-phone-xl);
  }

  .calculator__keyboard {
    width: calc(100% - (var(--gap-size-xxxs) * 2));
    margin-left: var(--gap-size-xxxs);
    margin-right: var(--gap-size-xxxs);
    grid-auto-rows: var(--gap-size-xxl);
    max-height: --size-xl;
    position: relative;
  }

  .calculator__keyboard-btn {
    height: var(--size-8xs);
    width: var(--size-8xs);
    font-size: var(--font-size-title-phone-xl);
  }

  .settings__reset-btn {
    width: var(--size-m);
    font-size: var(--font-size-title-phone-xl);
  }

  .settings__change-theme-btn {
    width: var(--size-xxxs);
    font-size: var(--font-size-title-phone-xl);
  }

  .settings__list-item {
    margin-top: var(--gap-size-xxs);
  }
}