:root {
  --color-dark: #292929;

  --button-height: 52px;
  --button-background-color: #f1cdb3;
  --button-hover-color: #fddcc4;
  --button-secondary-color: #ffffff;
  --button-disabled-border-color: #cdcdcd;
  --text-color: var(--color-dark);
  --header-color: #545454;
  --paragraph-l-color: #4c4c4c;
  --paragraph-s-color: #b2b2b2;
  --active-link-color: #fafafa;
  --background-section: #f6f6f6;
  --background-color-dark: var(--color-dark);
}

.shelter-button--primary {
  padding: 15px 45px;
  height: var(--button-height);
  background: var(--button-background-color);
  border-radius: 100px;
  border: var(--button-background-color);
  cursor: pointer;

  font-family: 'Gelasio';
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: var(--text-color);
  letter-spacing: 0.06em;
  text-decoration: none;
}

.shelter-button--primary:hover {
  background: var(--button-hover-color);
}

.shelter-button--secondary {
  padding: 15px 45px;
  border: 2px solid var(--button-background-color);
  height: var(--button-height);
  background: var(--button-secondary-color);
  border-radius: 100px;
  cursor: pointer;

  font-family: 'Gelasio';
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: var(--text-color);
  letter-spacing: 0.06em;
}

.shelter-button--secondary:hover {
  background: var(--button-hover-color);
  border: 2px solid var(--button-hover-color);
}

.shelter-button--arrow {
  padding: 0;
  width: 52px;
  height: 52px;
  border: 2px solid var(--button-background-color);
  border-radius: 100px;
  cursor: pointer;
  background: url("images/arrow.svg") no-repeat center var(--button-secondary-color);
}

.shelter-button--arrow:hover {
  background-color: var(--button-hover-color);
  border: 2px solid var(--button-hover-color);
}

.shelter-button--arrow-inactive {
  padding: 0;
  width: 52px;
  height: 52px;
  border: 2px solid var(--button-disabled-border-color);
  border-radius: 100px;
  background: url("images/arrow_disabled.svg") no-repeat center var(--button-secondary-color);
}

.shelter-button--arrow-reversed {
  padding: 0;
  width: 52px;
  height: 52px;
  border: 2px solid var(--button-background-color);
  border-radius: 100px;
  cursor: pointer;
  background: url("images/arrow_reversed.svg") no-repeat center var(--button-secondary-color);
}

.shelter-button--arrow-reversed:hover {
  background-color: var(--button-hover-color);
  border: 2px solid var(--button-hover-color);
}

.shelter-button--arrow-inactive-reversed {
  padding: 0;
  width: 52px;
  height: 52px;
  border: 2px solid var(--button-disabled-border-color);
  border-radius: 100px;
  background: url("images/arrow_reversed_disabled.svg") no-repeat center var(--button-secondary-color);
}

.shelter-button--paginator {
  padding: 0;
  width: 52px;
  height: 52px;
  border: 2px solid var(--button-background-color);
  border-radius: 100px;
  cursor: pointer;
  background: transparent;

  font-family: 'Gelasio';
  font-size: 20px;
  line-height: 115%;
  letter-spacing: 0.06em;
  color: var(--text-color);
  letter-spacing: 0.06em;
}

.shelter-button--paginator:not([disabled]):hover {
  border-color: var(--button-hover-color);
  background-color: var(--button-hover-color);
}

.shelter-button--paginator[disabled] {
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-border-color);
}

.shelter-button--paginator-active {
  padding: 0;
  width: 52px;
  height: 52px;
  background: var(--button-background-color);
  border-radius: 100px;
  border: var(--button-background-color);

  font-family: 'Gelasio';
  font-size: 20px;
  line-height: 115%;
  letter-spacing: 0.06em;
  color: var(--text-color);
}

.shelter-close-button {
  padding: 0;
  width: 52px;
  height: 52px;
  border: 2px solid var(--button-background-color);
  border-radius: 100px;
  cursor: pointer;
  background: var(--button-secondary-color);

  font-family: 'Gelasio';
  font-size: 20px;
  line-height: 115%;
  letter-spacing: 0.06em;
  color: var(--text-color);
}

.shelter-close-button:hover {
  background: var(--button-hover-color);
  border: 2px solid var(--button-hover-color);
}

.shelter-header-two,
.shelter-header-three,
.shelter-header-four,
.shelter-header-five {
  font-family: 'Gelasio';
  font-weight: 400;
  color: var(--header-color);
}

.shelter-header-two {
  font-size: 44px;
  line-height: 130%;
}

.shelter-header-three {
  font-size: 35px;
  line-height: 130%;
  letter-spacing: 0.06em;
}

.shelter-header-four {
  font-size: 20px;
  line-height: 115%;
  letter-spacing: 0.06em;
}

.shelter-header-five {
  font-size: 15px;
  line-height: 110%;
  letter-spacing: 0.06em;
}

.shelter-paragraph-l {
  font-family: 'Arimo';
  font-size: 15px;
  line-height: 160%;
  color: var(--paragraph-l-color);
}

.shelter-paragraph-s {
  font-family: 'Arimo';
  font-style: italic;
  font-size: 12px;
  line-height: 150%;
  color: var(--paragraph-s-color);
}

.shelter-link-dark-bg,
.shelter-link-light-bg {
  font-family: 'Arimo';
  font-style: normal;
  font-size: 15px;
  line-height: 160%;
}

.shelter-link-dark-bg {
  color: var(--button-disabled-border-color);
  text-decoration: none;
}

.shelter-link-dark-bg:active {
  color: var(--active-link-color);
  border-bottom: 3px solid var(--button-background-color);
}

.shelter-link-dark-bg:hover {
  color: var(--active-link-color);
}

.shelter-link-light-bg {
  text-decoration: none;
  color: var(--header-color);
}

.shelter-link-light-bg:active {
  color: var(--header-color);
  border-bottom: 3px solid var(--button-background-color);
}

.shelter-link-light-bg:hover {
  color: var(--text-color);
}

.shelter-link--active {
  border-bottom: 3px solid var(--button-background-color);
}