@import url("https://fonts.googleapis.com/css?family=Work+Sans:400,700");

/* THEME VARIABLES */
:root {
  --body-background-color: #ffffff;
  --body-text-color: #363636;

  --header-background-color: #ffffff;
  --header-icon-color: #00b189;
  --header-text-color: #363636;
  --header-link-color: #363636;
  --header-link-color-hover: #000000;

  --menu-background-color: #363636;
  --menu-text-color: #f2f2f2;
  --menu-link-color: #f2f2f2;
  --menu-link-color-hover: #ffffff;
  --menu-secondary-text-color: #d6d6d6;
  --menu-secondary-text-color-small-view: #b8b8b8;

  --main-background-color: #f2f2f2;
  --main-title-color: #363636;
  --main-text-color: #363636;
  --main-link-color: #009e79;
  --main-link-color-hover: #009e79;
  --main-secondary-title-color: #454545;
  --main-secondary-text-color: #696969;
  --main-header-line-color: #00b189;
  --main-horizontal-rule-color: #dedede;

  --share-background-color: #f2f2f2;
  --share-text-color: #363636;
  --share-link-color: #363636;
  --share-link-color-hover: #00b189;

  --gallery-item-frame-color: #e6e6e6;
  --zoom-border-color: #ffffff;

  --navigation-background-color: #f2f2f2;
  --navigation-text-color: #363636;
  --navigation-link-color: #363636;
  --navigation-link-color-hover: #000000;
  --navigation-secondary-text-color: #454545;

  --chart-background-color: #cccccc;
  --chart-default-color: #00b189;
  --chart-title-color: #454545;

  --form-text-color: #363636;
  --form-text-color-invalid: #d4383b;
  --form-link-color: #009e79;
  --form-link-color-hover: #009e79;
  --form-input-border-color: #d1d1d1; /* 82% */
  --form-input-border-color-focus: #363636; /* 21% */
  --form-input-border-color-invalid: #eb5a5d;
  --form-button-background-color: #363636;
  --form-button-background-color-hover: #000000;
  --form-button-text-color: #f2f2f2;

  --bottom-background-color: #ffffff;
  --bottom-title-color: #363636;
  --bottom-text-color: #363636;
  --bottom-secondary-title-color: #454545;
  --bottom-secondary-text-color: #696969;
  --botton-form-input-border-color: #dedede; /* 87% */
  --botton-form-input-border-color-focus: #363636; /* 21% */

  --footer-background-color: #00b189;
  --footer-text-color: #f2f2f2;
  --footer-link-color: #f2f2f2;
  --footer-link-color-hover: #ffffff;
  --footer-secondary-text-color: #d6d6d6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-background-color: #181a1b;
    --body-text-color: #e2e2e2;

    --header-background-color: #181a1b;
    --header-icon-color: #00b189;
    --header-text-color: #e2e2e2;
    --header-link-color: #e2e2e2;
    --header-link-color-hover: #ffffff;

    --menu-background-color: #f2f2f2;
    --menu-text-color: #363636;
    --menu-link-color: #363636;
    --menu-link-color-hover: #000000;
    --menu-secondary-text-color: #505050;
    --menu-secondary-text-color-small-view: #696969;

    --main-background-color: #242628;
    --main-title-color: #e2e2e2;
    --main-text-color: #e2e2e2;
    --main-link-color: #20c9a4;
    --main-link-color-hover: #50e3c2;
    --main-secondary-title-color: #cccccc;
    --main-secondary-text-color: #a0a0a0;
    --main-header-line-color: #00b189;
    --main-horizontal-rule-color: #3a3a3a;

    --share-background-color: #242628;
    --share-text-color: #e2e2e2;
    --share-link-color: #e2e2e2;
    --share-link-color-hover: #20c9a4;

    --gallery-item-frame-color: #313131;

    --navigation-background-color: #242628;
    --navigation-text-color: #e2e2e2;
    --navigation-link-color: #e2e2e2;
    --navigation-link-color-hover: #ffffff;
    --navigation-secondary-text-color: #cccccc;

    --chart-background-color: #4c4e50;
    --chart-default-color: #00b189;
    --chart-title-color: #cccccc;

    --form-text-color: #e2e2e2;
    --form-link-color: #20c9a4;
    --form-link-color-hover: #50e3c2;
    --form-input-border-color: #4a4a4a;
    --form-input-border-color-focus: #20c9a4;
    --form-button-background-color: #f2f2f2;
    --form-button-background-color-hover: #ffffff;
    --form-button-text-color: #181a1b;

    --bottom-background-color: #181a1b;
    --bottom-title-color: #e2e2e2;
    --bottom-text-color: #e2e2e2;
    --bottom-secondary-title-color: #cccccc;
    --bottom-secondary-text-color: #a0a0a0;
    --botton-form-input-border-color: #3a3a3a;
    --botton-form-input-border-color-focus: #e2e2e2;

    --footer-background-color: #00b189;
    --footer-text-color: #f2f2f2;
    --footer-link-color: #f2f2f2;
    --footer-link-color-hover: #ffffff;
    --footer-secondary-text-color: #d6d6d6;
  }
}

/* BREACKPOINTS */
/*  xl: 1200px  */
/*  lg:  992px  */
/*  md:  768px  */
/*  sm:  576px  */
/*  xs:  418px  */

/* RESET */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}
svg {
  display: block;
}

/* HELPERS */
.clickable {
  cursor: pointer;
}

/* BODY */
#body {
  background: var(--body-background-color);
  color: var(--body-text-color);
  font-family: "Work Sans", sans-serif;
  font-size: 15px;
  min-height: 100vh;
}

/* Gallery */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;

  margin-left: -27px;
  margin-top: -27px;
  padding-bottom: 61px;
}
.gallery-item {
  flex-basis: 33.333333%;
  flex-grow: 0;
  flex-shrink: 0;

  padding-left: 27px;
  padding-top: 27px;
}
.gallery-small .gallery-item {
  flex-basis: 25%;
}
.gallery-item-frame {
  background: var(--gallery-item-frame-color);
  height: 0;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}
.gallery-item-content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: flex-start;
}
.gallery-item-picture {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}
@media (max-width: 767px) {
  .gallery {
    margin-left: -20px;
    margin-top: -20px;
  }
  .gallery-item {
    flex-basis: 50%;
    padding-left: 20px;
    padding-top: 20px;
  }
  .gallery-small .gallery-item {
    flex-basis: 33.333333%;
  }
}
@media (max-width: 575px) {
  .gallery {
    margin-left: 0;
    margin-top: -15px;
  }
  .gallery-item {
    flex-basis: 100%;
    padding-left: 0;
    padding-top: 15px;
  }
  .gallery-small {
    margin-left: -15px;
  }
  .gallery-small .gallery-item {
    flex-basis: 50%;
    padding-left: 15px;
  }
  .gallery:not(.gallery-small) .gallery-item-frame {
    height: auto;
    padding-bottom: 0;
    position: static;
  }
  .gallery:not(.gallery-small) .gallery-item-content {
    display: block;
    position: static;
  }
  .gallery:not(.gallery-small) .gallery-item-picture {
    max-height: none;
    width: 100%;
  }
}

/* ZOOM */
#zoom {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  background-color: rgba(53, 53, 53, 0.5);
  border-bottom: 64px solid var(--zoom-border-color);
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
#zoom-frame {
  display: flex;
  flex-direction: column;
  justify-content: center;

  height: 100%;
  padding: 27px;
  position: relative;
}
#zoom-picture {
  flex-grow: 0;
  flex-shrink: 0;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}
#zoom-controls {
  position: absolute;
  top: auto;
  bottom: -64px;
  right: 27px;
  left: 27px;

  display: flex;
  height: 64px;
  justify-content: center;
}
#zoom-controls button {
  background: none;
  border: 0 none;
  cursor: pointer;
}
#zoom-controls-close {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
}
@media (max-width: 767px) {
  #zoom-frame {
    padding: 20px;
  }
  #zoom-controls {
    right: 20px;
    left: 20px;
  }
}
@media (max-width: 575px) {
  #zoom-frame {
    padding: 15px 0;
  }
  #zoom-controls {
    right: 0;
    left: 0;
  }
}