* {
  box-sizing: border-box;
  &::before,
  &::after {
    box-sizing: border-box;
  }
}

::selection {
  background: $main; /* WebKit/Blink Browsers */
  color: $white;
}

::-moz-selection {
  background: $main; /* Gecko Browsers */
  color: $white;
}

body {
  margin: 0;
  font-family: 'Comfortaa', cursive;
  background: $background-color;
}

.ok-show {
  display: flex;

  &.mobile {
    @media (min-width: 851px) {
      display: none;
    }
  }
  &.tablet {
    @media (max-width: 850px) {
      display: none;
    }
  }
  &.desktop {
    @media (max-width: 1199px) {
      display: none;
    }
  }
  &.wide-screen {
    @media (max-width: 1599px) {
      display: none;
    }
  }
}

.ok-hide {
  display: none;

  &.mobile {
    @media (min-width: 851px) {
      display: flex;
    }
  }
  &.tablet {
    @media (min-width: 1200px) {
      display: flex;
    }
  }
  &.desktop {
    @media (min-width: 1600px) {
      display: flex;
    }
  }
}

// back-to-home component.
.back-to-home {
  margin: 20px 0;
}

.text-center {
  text-align: center;
}

// home page
.page--home {
  .ok-container {
    @media (max-width: 850px) {
      margin: 25px 0 0;
    }
    @media (min-width: 851px) {
      padding: 30px 0;
      margin-bottom: 0;
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

// about page
.page--about {
  .ok-container {
    &.col-2 {
      grid-template-areas:
        'first'
        'second';

      @media (min-width: 1200px) {
        grid-template-areas: 'first second';
      }

      .ok-column {
        &:first-child {
          display: flex;
          justify-content: center;

          figure,
          .picture {
            margin: 0;
          }

          picture {
            > * {
              filter: opacity(0.8);
              width: 256px;
              height: 256px;
              border-radius: 26px;
              object-fit: contain;

              @media (min-width: 851px) {
                width: 384px;
                height: 384px;
              }
              @media (min-width: 1200px) {
                width: 256px;
                height: 256px;
              }
              @media (min-width: 1600px) {
                width: 384px;
                height: 384px;
              }
            }

            img {
              filter: opacity(0.8);
            }
          }
        }
      }
    }
  }
}

// contact-page
.page--contacts {
  .email {
    font-size: 25px;

    @media (min-width: 851px) {
      font-size: 40px;
      cursor: pointer;
    }
  }
}

// career
.career--items {
  background: linear-gradient(rgba(254, 250, 246, 0.5) 2.42%, rgba(241, 241, 241, 0.5) 100%);
  border-radius: 0 0 26px 26px;
  padding: 25px 0;
  width: 100%;

  .career--item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    padding: 20px 15px;
    grid-template-areas:
      'first third'
      'second second';
    grid-gap: 12px;
    font-size: 12px;

    @media (min-width: 851px) {
      padding: 30px;
      font-size: 16px;
    }
    @media (min-width: 1200px) {
      padding: 20px 5vw;
      grid-template-columns: 200px 1fr auto;
      grid-template-rows: 1fr;
      grid-template-areas: 'first second third';
      grid-gap: 12px;
    }
    @media (min-width: 1600px) {
      grid-template-columns: 250px 1fr auto;
    }

    .second {
      text-align: left;

      @media (max-width: 850px) {
        font-weight: 700;
        font-size: 13px;
        color: #555;
      }
    }
    .third {
      text-align: right;
    }
  }
}

// tooltips
.tooltip {
  position: relative;
  display: inline-block;

  &:hover {
    .tooltip--text {
      visibility: visible;
      opacity: 1;
    }
  }

  .tooltip--text {
    visibility: hidden;
    width: auto;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s ease-in;
    font-size: 14px;
    white-space: nowrap;

    &:after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }
  }
}