:root {
  /* Layout */
  --container-min-width: 320;
  --container-max-width: 940;

  --container-padding-left-right-min: 1;
  --container-padding-left-right-max: 3;

  /* Type */
  --base-font-family: "Source Sans 3", sans;
  --second-font-family: var(--base-font-family);
  /* --second-font-family: "Source Serif 4", serif; */
  --root-font-size-min: 16;
  --root-font-size-max: 19;
  --base-line-height: 1.66;

  /* Fluid responsive */
  --root-min-viewport: 320;
  --root-max-viewport: 1000;

  --min-viewport: calc(var(--container-min-width) / var(--root-font-size-min));
  --max-viewport: calc(var(--container-max-width) / var(--root-font-size-max));

  /* Base Colors */
  --c1-h: 220deg;
  --c1-s: 50%;
  --c1-l: 28%;
  --color1: hsl(var(--c1-h) var(--c1-s) var(--c1-l));
  --c1-text-h: var(--c1-h);
  --c1-text-s: var(--c1-s);
  --c1-text-l: calc(var(--c1-l) - 5%);
  --color1-text: hsl(var(--c1-text-h) var(--c1-text-s) var(--c1-text-l));

  --c2-h: 177deg;
  --c2-s: 46%;
  --c2-l: 25%;
  --color2: hsl(var(--c2-h), var(--c2-s), var(--c2-l));
  --c2-text-h: var(--c2-h);
  --c2-text-s: var(--c2-s);
  --c2-text-l: calc(var(--c2-l) - 5%);
  --color2-text: hsl(var(--c2-text-h) var(--c2-text-s) var(--c2-text-l));

  --c3-h: 330;
  --c3-s: 75%;
  --c3-l: 32%;
  --color3: hsl(var(--c3-h), var(--c3-s), var(--c3-l));
  --c3-text-h: var(--c3-h);
  --c3-text-s: var(--c3-s);
  --c3-text-l: calc(var(--c3-l) - 5%);
  --color3-text: hsl(var(--c3-text-h) var(--c3-text-s) var(--c3-text-l));

  --y-h: 45;
  --y-s: 100%;
  --y-l: 80%;
  --yellow: hsl(var(--y-h), var(--y-s), var(--y-l));

  --white: #ffffff;

  --alert-color-h: 350;
  --alert-color: hsl(var(--alert-color-h), 80%, 50%);

  /* Text Colors */
  --text-color: hsl(var(--c1-h), 20%, 5%);

  /* Titles */
  --h1-font-family: var(--second-font-family);
  --h1-color: var(--color2-text);
  --h2-font-family: var(--second-font-family);
  --h2-color: var(--color1-text);
  --h3-font-family: var(--base-font-family);
  --h3-color: var(--color1-text);

  --top-title-color: var(--color3-text);
  --sub-title-color: var(--color2-text);

  /* Links */
  --link-color-h: var(--c1-text-h);
  --link-color-s: var(--c1-text-s);
  --link-color-l: var(--c1-text-l);
  --link-color: hsl(var(--link-color-h), var(--link-color-s), var(--link-color-l));
  --link-hover-color: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) - 5%));
  --link-active-color: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) - 10%));
  --link-text-decoration-color: hsl(var(--link-color-h), 20%, 85%);
  --link-focus-outline-color: hsl(var(--link-color-h), 60%, 75%);

  /* Buttons */
  --btn-padding: 0.33em 0.66em;
  --btn-color: inherit;
  --btn-border-color: var(--grayA5);
  --btn-background-color: hsl(var(--c1-h), 40%, 96%);
  --btn-hover-background-color: hsl(var(--c1-h), 40%, 95%);
  --btn-active-background-color: hsl(var(--c1-h), 40%, 94%);
  --btn-focus-outline-color: hsl(var(--c1-text-h), var(--c1-text-s), calc(var(--c1-text-l) - 0%));
  --btn-primary-color: var(--white);
  --btn-primary-background-color: var(--color1-text);
  --btn-primary-hover-background-color: hsl(var(--c1-text-h), var(--c1-text-s), calc(var(--c1-text-l) - 3%));
  --btn-primary-active-background-color: hsl(var(--c1-text-h), var(--c1-text-s), calc(var(--c1-text-l) - 6%));
  --btn-primary-border-color: var(--grayA10);
  --btn-primary-focus-outline-color: hsl(var(--c1-text-h), var(--c1-text-s), calc(var(--c1-text-l) - 0%));

  /* Scrollanv */
  --scrollnav-item-padding-left-right: 0.75em;
  --scrollnav-item-hover-background-color: var(--neutral-background-color);

  /* Design Elements */
  --neutral-background-color: hsl(var(--c1-h), 10%, 95%);
  --neutral-background-border-color: hsl(var(--c1-h), 10%, 90%);
  --line-color: var(--gray7);
  --line-color-light: var(--gray5);
  --line-color-header: var(--line-color);
  --icon-size: 1.125em;
  --border-radius: 0.25em;

  /* Design Elements */
  --animation-duration: 0.2s;

  /* Logo */

  --logo-min-width: 8rem;
  --logo-max-width: 15rem;
  --logo-max-height: 4rem;
  --logo-sticky-max-height: 2.5rem;


  /* Header and Footer Blocks */
  --social-link-background-color: hsl(var(--c2-text-h), var(--c2-text-s), calc(var(--c2-text-l) - 0%));
  --social-link-color: var(--white);
  --social-link-hover-background-color: hsl(var(--c2-text-h), var(--c2-text-s), calc(var(--c2-text-l) - 4%));
  --social-link-active-background-color: hsl(var(--c2-text-h), var(--c2-text-s), calc(var(--c2-text-l) - 8%));

  /* Gallery Block */
  --swiper-pagination-color: hsl(var(--c1-text-h) var(--c1-text-s) var(--c1-text-l));
  --swiper-navigation-color: var(--white);
  --swiper-navigation-size: 1.25rem !important;

  /* Form */
  --input-border-width: 0.125em;
  --input-border-radius: 0.125em;
  --input-padding: 0.33em 0.66em;

  --input-background-color: hsl(var(--c1-h), 20%, 97%);
  --input-border-color: hsla(var(--c1-h), 20%, var(--c1-l), 0.15);

  --input-hover-background-color: hsla(var(--c1-h), 20%, 97%, 0.5);
  --input-hover-border-color: hsla(var(--c1-h), var(--c1-s), var(--c1-l), 0.5);

  --input-focus-background-color: var(--input-hover-background-color);
  --input-focus-border-color: hsla(var(--c1-h), var(--c1-s), var(--c1-l), 0.8);
  --input-focus-outline-color: hsla(var(--c1-h), var(--c1-s), var(--c1-l), 0.8);
}

/* General Colors */
:root {
  --gray1: hsl(0, 0%, 99%);
  --gray2: hsl(0, 0%, 97.3%);
  --gray3: hsl(0, 0%, 95.1%);
  --gray4: hsl(0, 0%, 93%);
  --gray5: hsl(0, 0%, 90.9%);
  --gray6: hsl(0, 0%, 88.7%);
  --gray7: hsl(0, 0%, 85.8%);
  --gray8: hsl(0, 0%, 78%);
  --gray9: hsl(0, 0%, 56.1%);
  --gray10: hsl(0, 0%, 52.3%);
  --gray11: hsl(0, 0%, 43.5%);
  --gray12: hsl(0, 0%, 9%);
}

:root {
  --grayA1: hsla(0, 0%, 0%, 0.012);
  --grayA2: hsla(0, 0%, 0%, 0.027);
  --grayA3: hsla(0, 0%, 0%, 0.047);
  --grayA4: hsla(0, 0%, 0%, 0.071);
  --grayA5: hsla(0, 0%, 0%, 0.09);
  --grayA6: hsla(0, 0%, 0%, 0.114);
  --grayA7: hsla(0, 0%, 0%, 0.141);
  --grayA8: hsla(0, 0%, 0%, 0.22);
  --grayA9: hsla(0, 0%, 0%, 0.439);
  --grayA10: hsla(0, 0%, 0%, 0.478);
  --grayA11: hsla(0, 0%, 0%, 0.565);
  --grayA12: hsla(0, 0%, 0%, 0.91);
}

:root {
  --red1: hsl(359, 100%, 99.4%);
  --red2: hsl(359, 100%, 98.6%);
  --red3: hsl(360, 100%, 96.8%);
  --red4: hsl(360, 97.9%, 94.8%);
  --red5: hsl(360, 90.2%, 91.9%);
  --red6: hsl(360, 81.7%, 87.8%);
  --red7: hsl(359, 74.2%, 81.7%);
  --red8: hsl(359, 69.5%, 74.3%);
  --red9: hsl(358, 75%, 59%);
  --red10: hsl(358, 69.4%, 55.2%);
  --red11: hsl(358, 65%, 48.7%);
  --red12: hsl(354, 50%, 14.6%);
}

:root {
  --redA1: hsla(0, 100%, 51%, 0.012);
  --redA2: hsla(0, 100%, 51%, 0.032);
  --redA3: hsla(0, 100%, 50.2%, 0.063);
  --redA4: hsla(0, 100%, 50%, 0.102);
  --redA5: hsla(0, 99.9%, 47.5%, 0.153);
  --redA6: hsla(0, 99.5%, 44.9%, 0.224);
  --redA7: hsla(359, 99.7%, 42.7%, 0.318);
  --redA8: hsla(359, 99.6%, 41.1%, 0.436);
  --redA9: hsla(358, 99.9%, 42.9%, 0.718);
  --redA10: hsla(358, 99.9%, 41%, 0.761);
  --redA11: hsla(358, 99.8%, 38.3%, 0.832);
  --redA12: hsla(355, 99.3%, 7.9%, 0.926);
}

:root {
  --yellow1: hsl(60, 54.0%, 98.5%);
  --yellow2: hsl(52, 100%, 95.5%);
  --yellow3: hsl(55, 100%, 90.9%);
  --yellow4: hsl(54, 100%, 86.6%);
  --yellow5: hsl(52, 97.9%, 82.0%);
  --yellow6: hsl(50, 89.4%, 76.1%);
  --yellow7: hsl(47, 80.4%, 68.0%);
  --yellow8: hsl(48, 100%, 46.1%);
  --yellow9: hsl(53, 92.0%, 50.0%);
  --yellow10: hsl(50, 100%, 48.5%);
  --yellow11: hsl(42, 100%, 29.0%);
  --yellow12: hsl(40, 55.0%, 13.5%);
}

:root {
  --yellowA1: hsla(60, 94.3%, 34.6%, 0.024);
  --yellowA2: hsla(52, 100%, 50.4%, 0.091);
  --yellowA3: hsla(55, 100%, 50.2%, 0.181);
  --yellowA4: hsla(54, 100%, 50.1%, 0.267);
  --yellowA5: hsla(52, 99.9%, 49.5%, 0.357);
  --yellowA6: hsla(50, 100%, 47.4%, 0.451);
  --yellowA7: hsla(47, 99.8%, 44.6%, 0.577);
  --yellowA8: hsla(48, 100%, 46.0%, 0.980);
  --yellowA9: hsla(53, 100%, 48.0%, 0.961);
  --yellowA10: hsla(50, 100%, 48.4%, 0.980);
  --yellowA11: hsla(42, 100%, 28.6%, 0.980);
  --yellowA12: hsla(41, 98.9%, 8.0%, 0.942);
}

:root {
  --green1: hsl(136, 50.0%, 98.9%);
  --green2: hsl(138, 62.5%, 96.9%);
  --green3: hsl(139, 55.2%, 94.5%);
  --green4: hsl(140, 48.7%, 91.0%);
  --green5: hsl(141, 43.7%, 86.0%);
  --green6: hsl(143, 40.3%, 79.0%);
  --green7: hsl(146, 38.5%, 69.0%);
  --green8: hsl(151, 40.2%, 54.1%);
  --green9: hsl(151, 55.0%, 41.5%);
  --green10: hsl(152, 57.5%, 37.6%);
  --green11: hsl(153, 67.0%, 28.5%);
  --green12: hsl(155, 40.0%, 14.0%);
}

:root {
  --greenA1: hsla(140, 94.9%, 38.7%, 0.016);
  --greenA2: hsla(138, 99.9%, 38.5%, 0.051);
  --greenA3: hsla(139, 97.7%, 36.9%, 0.087);
  --greenA4: hsla(139, 98.5%, 32.7%, 0.134);
  --greenA5: hsla(141, 100%, 30.4%, 0.200);
  --greenA6: hsla(142, 99.0%, 28.9%, 0.295);
  --greenA7: hsla(146, 99.5%, 27.6%, 0.428);
  --greenA8: hsla(151, 99.5%, 28.8%, 0.644);
  --greenA9: hsla(151, 99.9%, 28.0%, 0.812);
  --greenA10: hsla(152, 99.6%, 25.8%, 0.840);
  --greenA11: hsla(153, 99.9%, 21.0%, 0.906);
  --greenA12: hsla(155, 99.4%, 6.2%, 0.918);
}

:root {
  --crimson1: hsl(332, 100%, 99.4%);
  --crimson2: hsl(330, 100%, 98.4%);
  --crimson3: hsl(331, 85.6%, 96.6%);
  --crimson4: hsl(331, 78.1%, 94.2%);
  --crimson5: hsl(332, 72.1%, 91.1%);
  --crimson6: hsl(333, 67.0%, 86.7%);
  --crimson7: hsl(335, 63.5%, 80.4%);
  --crimson8: hsl(336, 62.3%, 72.9%);
  --crimson9: hsl(336, 80.0%, 57.8%);
  --crimson10: hsl(336, 73.7%, 53.5%);
  --crimson11: hsl(336, 75.0%, 47.2%);
  --crimson12: hsl(340, 65.0%, 14.5%);
}

:root {
  --crimsonA1: hsla(340, 100%, 51.0%, 0.012);
  --crimsonA2: hsla(330, 100%, 51.0%, 0.032);
  --crimsonA3: hsla(332, 99.1%, 47.1%, 0.063);
  --crimsonA4: hsla(331, 99.9%, 44.3%, 0.102);
  --crimsonA5: hsla(333, 99.9%, 42.3%, 0.153);
  --crimsonA6: hsla(333, 99.5%, 40.5%, 0.224);
  --crimsonA7: hsla(335, 99.7%, 39.1%, 0.322);
  --crimsonA8: hsla(336, 99.5%, 38.5%, 0.440);
  --crimsonA9: hsla(336, 99.9%, 44.3%, 0.761);
  --crimsonA10: hsla(336, 100%, 42.5%, 0.808);
  --crimsonA11: hsla(336, 99.8%, 40.3%, 0.883);
  --crimsonA12: hsla(340, 99.0%, 10.0%, 0.950);
}

:root {
  --slate1: hsl(206, 30.0%, 98.8%);
  --slate2: hsl(210, 16.7%, 97.6%);
  --slate3: hsl(209, 13.3%, 95.3%);
  --slate4: hsl(209, 12.2%, 93.2%);
  --slate5: hsl(208, 11.7%, 91.1%);
  --slate6: hsl(208, 11.3%, 88.9%);
  --slate7: hsl(207, 11.1%, 85.9%);
  --slate8: hsl(205, 10.7%, 78.0%);
  --slate9: hsl(206, 6.0%, 56.1%);
  --slate10: hsl(206, 5.8%, 52.3%);
  --slate11: hsl(206, 6.0%, 43.5%);
  --slate12: hsl(206, 24.0%, 9.0%);
}

:root {
  --slateA1: hsla(210, 92.6%, 26.5%, 0.016);
  --slateA2: hsla(210, 87.7%, 16.0%, 0.028);
  --slateA3: hsla(210, 98.8%, 14.4%, 0.055);
  --slateA4: hsla(210, 94.1%, 11.1%, 0.075);
  --slateA5: hsla(216, 91.1%, 10.9%, 0.099);
  --slateA6: hsla(206, 96.4%, 11.3%, 0.126);
  --slateA7: hsla(210, 99.1%, 10.1%, 0.157);
  --slateA8: hsla(205, 96.5%, 10.0%, 0.244);
  --slateA9: hsla(206, 98.8%, 5.9%, 0.467);
  --slateA10: hsla(206, 99.6%, 5.4%, 0.506);
  --slateA11: hsla(206, 97.0%, 4.8%, 0.593);
  --slateA12: hsla(202, 97.0%, 2.4%, 0.934);
}