html {
  font-family: "Involve", sans-serif, serif;
}

body {
  background-color: #F9FAFB;
}

.body-with-opened-sidebar {
  overflow: hidden;
}

/* SCROLLBAR */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #F3F4F6;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #9DA2AF;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
}


/* LAYOUT */
#layout {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 100vh;
}

/* BACKGROUNDS */
#background-web {
  position: fixed;
  top: -160px;
  right: auto;
  left: auto;
  bottom: auto;
  z-index: -1;
  width: 100%;
  height: 914px;
  background-image: url('../img/background-web.webp');
  background-repeat: repeat-x;
  background-position: center;
  pointer-events: none;
  animation-name: show;
  animation-duration: 1.5s;
}

#background-socials {
  position: fixed;
  top: 120px;
  right: auto;
  left: auto;
  bottom: auto;
  z-index: -1;
  width: 100%;
  height: 431px;
  max-height: 100vh;
  background-image: url('../img/background-socials.webp');
  background-repeat: no-repeat;
  background-position: center bottom;
  pointer-events: none;
  animation-name: show;
  animation-duration: 1.5s;
}

/* CONTENT */
#content {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-grow: 1;
  animation-name: show;
  animation-duration: .5s;
}

/* HEADER */
#header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 4px;
  background-color: #FCFCFD;
  box-shadow: 0px 49px 14px 0px rgba(157, 162, 175, 0.00), 0px 32px 13px 0px rgba(157, 162, 175, 0.01), 0px 18px 11px 0px rgba(157, 162, 175, 0.04), 0px 8px 8px 0px rgba(157, 162, 175, 0.07), 0px 2px 4px 0px rgba(157, 162, 175, 0.08);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 16px;
  border: 1px solid #E5E7EA;
  border-radius: inherit;
}

.header-logo {
  cursor: pointer;
}

.header-navigation {
  display: none;
}

.header-navigation-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: #374051;
  text-decoration: none;
  transition: color 0.15s linear;
}

.header-navigation-link:hover {
  color: #0794A1;
}

.header-navigation-link-active {
  color: #0FBEC9;
}

#header-burger-menu {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* SIDEBAR */
#sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: #FCFCFD;
  transform: translateX(100%);
  transition: transform 0.15s linear;
}

.sidebar-show {
  transform: translateX(0) !important;
}

.sidebar-content {
  position: relative;
  padding: 48px 24px;
}

.sidebar-navigation {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: flex-start;
  gap: 24px;
}

.sidebar-navigation-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
  color: #374051;
  text-decoration: none;
  transition: color 0.15s linear;
}

.sidebar-navigation-link:hover {
  color: #0794A1;
}

.sidebar-navigation-link-active {
  color: #0FBEC9;
}

#sidebar-close {
  position: absolute;
  top: 16px;
  right: 16px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* BUTTON UP */
#button-up {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 8px;
  right: 8px;
  z-index: 1;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #E5E7EA;
  background-color: #FCFCFD;
  box-shadow: 0px 49px 14px 0px rgba(157, 162, 175, 0.00), 0px 32px 13px 0px rgba(157, 162, 175, 0.01), 0px 18px 11px 0px rgba(157, 162, 175, 0.04), 0px 8px 8px 0px rgba(157, 162, 175, 0.07), 0px 2px 4px 0px rgba(157, 162, 175, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s linear, background-color 0.15s linear, border-color 0.15s linear;
}

#button-up:active {
  background-color: #EEFAFA;
  border-color: #AFECEF;
}

@media (hover: hover) {
  #button-up.button-up-show:hover {
    background-color: #EEFAFA;
    border-color: #AFECEF;
  }
}

#button-up div {
  border: solid #374051;
  border-width: 0 2px 2px 0;
  display: inline-block;
  margin: 6px 0 0;
  padding: 4px;
  transform: rotate(-135deg);
}

#button-up.button-up-show {
  opacity: 1;
  pointer-events: unset;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* FOOTER */
#footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

.footer-description {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 40px;
  background-color: #D5F5F7;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #374051;
}

.footer-copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 40px;
  background-color: #EEFAFA;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #4B5462;
}

/* PAGES */

/* HOME */
#home {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-grow: 1;
  padding: 88px 16px 120px;
}

.home-what-is-it {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 200px;
}

#home-what-is-it-background-wrapper {
  overflow: hidden;
  position: absolute;
  top: auto;
  right: auto;
  bottom: -120px;
  left: auto;
  z-index: -1;
  width: 100vw;
  height: 190px;
  pointer-events: none;
}

.home-what-is-it-background {
  width: 100%;
  height: 100%;
  background-image: url('../img/waves.webp');
  background-size: cover;
  background-position: center bottom;
}

.home-what-is-it-title {
  font-weight: 600;
  font-size: 36px;
  line-height: normal;
  color: #111928;
  text-align: center;
  margin: 0 0 16px;
}

.home-what-is-it-subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #4B5462;
  text-align: center;
  margin: 0 0 24px;
}

.home-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 24px;
}

.home-card {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  padding: 4px;
  border-radius: 24px;
  background-color: #FCFCFD;
  box-shadow: 0px 49px 14px 0px rgba(157, 162, 175, 0.00), 0px 32px 13px 0px rgba(157, 162, 175, 0.01), 0px 18px 11px 0px rgba(157, 162, 175, 0.04), 0px 8px 8px 0px rgba(157, 162, 175, 0.07), 0px 2px 4px 0px rgba(157, 162, 175, 0.08);
}

.home-card-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid #E5E7EA;
}

.home-card-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}

.home-card-title {
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  color: #374051;
}

.home-card-description {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #4B5462;
}

.home-auth {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.home-auth-title {
  font-weight: 600;
  font-size: 32px;
  line-height: 120%;
  color: #111928;
  text-align: center;
  margin: 0 0 24px;
}

.home-auth-subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #4B5462;
  text-align: center;
  margin: 0 0 24px;
}

.home-socials {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 24px;
}

.home-social {
  box-sizing: border-box;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  padding: 4px;
  border-radius: 40px;
  background-color: #FCFCFD;
  text-decoration: none;
  box-shadow: 0px 49px 14px 0px rgba(157, 162, 175, 0.00), 0px 32px 13px 0px rgba(157, 162, 175, 0.01), 0px 18px 11px 0px rgba(157, 162, 175, 0.04), 0px 8px 8px 0px rgba(157, 162, 175, 0.07), 0px 2px 4px 0px rgba(157, 162, 175, 0.08);
  transition: background-color 0.15s linear;
}

.home-social:active {
  background-color: #EEFAFA;
}

.home-social:active > .home-social-content {
  border-color: #AFECEF;
}

@media (hover: hover) {
  .home-social:hover {
    background-color: #EEFAFA;
  }
  
  .home-social:hover > .home-social-content {
    border-color: #AFECEF;
  }
}

.home-social-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 16px;
  border-radius: 40px;
  border: 1px solid #E5E7EA;
  transition: border-color 0.15s linear;
}

.home-social-title {
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  color: #374051;
}

/* TEMRS */
#terms {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-grow: 1;
  padding: 72px 16px 80px;
}

/* Privacy */
#privacy {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-grow: 1;
  padding: 72px 16px 80px;
}

#privacy .head-privacy {
  gap: 24px;
  margin: 0 0 51px;
}

.privacy-table-about-us {
  margin: 32px 0;
}

.privacy-table-about-us tr > td:last-child {
  width: 100%;
}

.privacy-table-about-us td {
  vertical-align: middle;
}

.privacy-table-personal-data {
  width: 688px;
}

.privacy-table-personal-data td {
  vertical-align: middle;
}

.privacy-table-technical-data {
  width: 688px;
  margin: 8px 0 0;
}

.privacy-table-technical-data td {
  vertical-align: middle;
}

.privacy-table-your-rights {
  margin: 32px 0 0;
  border-radius: 8px 8px 0 0;
}

.privacy-table-your-rights td {
  width: 50%;
  vertical-align: middle;
}

.privacy-table-your-rights tr:last-of-type td {
  text-align: center;
}

.privacy-table-bottom-your-rights {
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  border: 1px solid #E5E7EA;
  border-top: none;
  vertical-align: middle;
}

/* Common for terms and privacy */
ul,
ol {
  margin: -16px 0 0;
}

ul li,
ol li {
  padding: 0 0 0 28px;
}

ol {
  counter-reset: ol-counter;
}

ol li {
  counter-increment: ol-counter;
}

ul li::before {
  content: "\A";
  position: relative;
  bottom: 2px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4B5462;
  display: inline-block;
}

ol li::before {
  content: counter(ol-counter) ".";
  position: relative;
  right: 8px;
}

.link {
  cursor: pointer;
  text-decoration: underline;
  color: #0794A1;
  transition: color .15s linear;
}

.link:hover {
  color: #0FBEC9;
}

.link:visited {
  color: #047481;
}

.link:visited:hover {
  color: #0FBEC9;
}

.head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin: 0 0 48px;
}

.head-subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: #0794A1;
  padding: 4px 8px;
  border-radius: 16px;
  background-color: #EEFAFA;
}

.head-title {
  font-weight: 600;
  font-size: 36px;
  line-height: 120%;
  color: #111928;
}

.topics {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 56px;
}

.topic {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 32px;
}

.topic-title {
  font-weight: 600;
  font-size: 26px;
  line-height: 120%;
  color: #111928;
}

.topic-description {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #4B5462;
}

.topic-description-article:not(:last-of-type) {
  margin: 0 0 24px;
}

.topic-description-article-scrolled {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  padding: 0 0 8px;
}

.topic-description-article-scrolled::-webkit-scrollbar {
  height: 6px;
}

.topic-description-article-scrolled::-webkit-scrollbar-track {
  background: #F3F4F6;
  border-radius: 4px;
}

.topic-description-article-scrolled::-webkit-scrollbar-thumb {
  background: #9DA2AF;
  border-radius: 4px;
}

.topic-description-article-scrolled::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
}

.topic-description-bolt {
  font-weight: 600;
  color: #111928;
}

.table-head {
  background-color: #F3F4F6;
  border-right: none !important;
}

table {
  border-spacing: 0;
  border-collapse: separate;
  border-radius: 8px;
  border: 1px solid #E5E7EA;
}

/* Apply a border to the right of all but the last column */
table th:not(:last-child),
table td:not(:last-child) {
 border-right: 1px solid #E5E7EA;
}

/* Apply a border to the bottom of all but the last row */
table > thead > tr:not(:last-child) > th,
table > thead > tr:not(:last-child) > td,
table > tbody > tr:not(:last-child) > th,
table > tbody > tr:not(:last-child) > td,
table > tfoot > tr:not(:last-child) > th,
table > tfoot > tr:not(:last-child) > td,
table > tr:not(:last-child) > td,
table > tr:not(:last-child) > th,
table > thead:not(:last-child),
table > tbody:not(:last-child),
table > tfoot:not(:last-child) {
 border-bottom: 1px solid #E5E7EA;
}

th,
td {
  padding: 8px 16px;
}

@media screen and (min-width: 720px) {
  #home {
    padding: 88px 40px 120px;
  }

  .home-what-is-it {
    margin: 0 0 208px;
  }

  #home-what-is-it-background-wrapper {
    height: 424px;
    bottom: -200px;
  }

  .home-what-is-it-title {
    font-size: 48px;
  }

  .home-auth-title {
    font-size: 40px;
    margin: 0 0 16px;
  }

  .home-socials {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
  }

  .home-social {
    flex-basis: 308px;
  }
}

@media screen and (min-width: 768px) {
  #terms {
    padding: 104px 40px 120px;
  }

  #privacy {
    padding: 124px 40px 120px;
  }

  .head {
    gap: 24px;
  }

  .head-title {
    font-size: 48px;
    line-height: normal;
  }

  .topic-title {
    font-size: 32px;
  }

  .privacy-table-personal-data {
    width: unset;
  }

  .privacy-table-technical-data {
    width: unset;
  }

  .privacy-table-your-rights td {
    width: unset;
  }
}

@media screen and (min-width: 1096px) {
  #layout {
    box-sizing: border-box;
    padding: 24px 0 0;
  }

  #button-up {
    transform: scale(1.35);
    right: 24px;
    bottom: 24px;
  }

  #header {
    margin: 0 40px;
    border-radius: 40px;
  }

  .header-content {
    padding: 0 24px;
  }

  .header-navigation {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
    height: 100%;
  }

  #header-burger-menu {
    display: none;
  }

  #home {
    padding: 176px 40px 240px;
  }

  .home-what-is-it {
    margin: 0 0 384px;
  }

  #home-what-is-it-background-wrapper {
    height: 550px;
    bottom: -368px;
  }

  .home-cards {
    flex-direction: row;
    align-items: flex-start;
  }

  .home-card {
    flex-basis: 33.3%;
  }

  .home-social {
    flex-basis: 322px;
  }

  #terms {
    max-width: 872px;
    padding: 108px 112px 120px;
  }

  #privacy {
    max-width: 872px;
    padding: 108px 112px 120px;
  }

  .privacy-table-about-us tr > td:first-child {
    width: 256px;
  }

  .privacy-table-about-us tr > td:last-child {
    width: 67%;
  }
}

@media screen and (min-width: 1288px) {
  .home-what-is-it {
    margin: 0 0 408px;
  }

  #home-what-is-it-background-wrapper {
    height: 640px;
    bottom: -392px;
  }

  .home-social {
    flex-basis: 284px;
  }
}

@media screen and (min-width: 1440px) {
  #header {
    width: 100%;
    max-width: 1320px;
    align-self: center;
  }

  #home {
    max-width: 1320px;
    padding: 176px 60px 240px;
  }

  .home-what-is-it {
    margin: 0 0 558px;
  }

  #home-what-is-it-background-wrapper {
    bottom: -478px;
  }

  .home-social {
    flex-basis: 312px;
  }
}

@keyframes show {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}