:root {
  --main-width: 1200px;
  
  --title-color: #fff;
  --text-color: rgb(113, 118, 123);
  --body-color: #191919;
  
  --h1-font-size: 34px;
  --h2-font-size: 24px;
  --h3-font-size: 20px;
  --p-font-size: 16px;
  --small-font-size: 14px;

  --margin-big: 32px;
  --margin-small: 20px;

  --container-color: #252525;
  --container-hover-color: #303030;
  --container-border-color: #303030;
  --container-padding: 32px;
  --container-border-radius: 15px;
}

@font-face {
  font-family: 'n';
  src: url('/static/fonts/Nunito-Regular.ttf');
}

@font-face {
  font-family: 'nb';
  src: url('/static/fonts/Nunito-SemiBold.ttf');
}

body {
  padding: 0;
  margin: 0;
  background-color: var(--body-color);
  min-height: 100vh;
  font-family: sans-serif;
  position: relative;
  line-height: 1.5;
}

* {
  line-height: 1.5;
  box-sizing: border-box;
}

body .main {
  width: var(--main-width);
  padding: 40px 0;
  margin: 0 auto;
  min-height: 100px;
}

.app-header {
  height: 90px;
  background-color: rgba(40, 40, 40, 0.95);
  backdrop-filter: blur(5px);
  border-bottom: 1px solid var(--container-border-color);
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.app-header .inner {
  width: var(--main-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: inherit;
}

.app-header .inner .logo {
  display: block;
  width: 137px;
  height: 37px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAABKCAMAAABAQys/AAAARVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////9SnXPCAAAAFnRSTlMAzGAg3/CAv0ARcI+wn6DPUDBmQZkPUHlW6QAABTZJREFUeNrtmtm2oyAQRQnFqDilu/n/T+3BEMRTGJOsfpL9dm8I4qYoSqJofAyJRklvRGOLt7EpKSAVm5ICqWNTUmBibEq2+CE2Jfs00pQUOB2bkoIuxqakoI9NSQFNsSkpWFRsSqA+29KJq2PiDimujQ9xjxOX4X5n6zNgEZfhfuuY+gwR1+F+u40E9RlgxXX4o+QWNk78Wp9dObveb3+RRX2GqCsdva5KbvdnfXb5IElKbj8p12fAIK7EqmRNKCbyTF68xA22DCVvwkBQ8Mg+WGuDcQc9dcPfNsO+DfS+1D8LUgDUh34/oEUWzFQouVn7hRH613A7LhVj1OU33eYKevWF49bQhmM6eMgY02dYbCkPNXqJK5TcdGQJ/vQDQL8bV5TYBp8kj7a7vnq5ZBzBz/KA5nIegeGMkl6coduV/RIfA3qckhdVcz0SVJaKsOMmZp+YIxBASXVIfhHIfp3kwCQFadlEwICRl5k9C6+HSVwhJkiihG4yKYrkoRLtUrliXqXXYm5GqGYoTYN0znWjYrb2ZETb3hgTJrgHaMmHCVdw/4hVJYPM/FM8oxKs0BYFFwf6rFl0eH25kySt6vjzCOOTxXF3Xzi7mleC61JVlaB0B0owsXYwH/Wlo0kI0riaA1yeTyR62fZJ9UwSdNkhKrEg8ZwSqisxef5RCbI8B5LzSsbi+sapr0vDRUB97XGUSd/qHSW/akr0o6m3yc/JXaczXHqz5SCR6fCJGwJueJhxB0rUTvdJJeInr0QtOZ6PlOBta/gCJlzEnw4SSipsxSFsl6TeU3JnlVjKp9KnlZDeKOVDKNrO+YMdC5QhY+q+Fibr9dMmnRK3rikx7gk9Vo5llPRQTJjTBVvKsiV+0/s0SOJTic56Vxjv+db+dRl4JZ1eR/38xnymLpl3YaKhPhve/R1nLHs4uP4kOZsq/aWL9QuX0D5PGLFKpFnbpW8MdEaJ3WWT5zCe9Vl8V4lX9ZpTqqNjKVMo0cUgca8eNpFneCXrUPoUJHRKyZSuEgol02OoTn3wa5/LywagMfcIJYisKFFssBFEDChJe7UIq5pTSozITrKSMddnHyih4j4AZyykYC6XmKINlGm2qFAMqyTtSPMakXUlwTxxQpROdFmflcgPlSDLPCosuZdyxyHn3Mx0JR/5+YFOYYJKkrBU5PJK6nf2q1+V6PkxIhv/k5Jib+9hR+r2fSkIEqTjlYgxh9opJVie6O1j3h73vRLcYALUeQqUQC2PKF5JrpPkR0qEvGnrn3MILN8rwTQcsKYxqAS8AY5TklOSFZ8pEdTl3AZo8aUS6nuCo4SeqeXMgRKKPJZTkvukt5XgW51IeF8JJgErfRkSM1vyu8dAML2Oa8DShvVfDpXkmx7EF0rqP/fJL5W4VAvZYRiCZnNAyLP+B4VtKIUEZBeLSp7RqOhYyWQzsn6QgwnsSyX0OgUIz83GJPDU/8WpQ9FqWYSoKwFMxQjivlUixhOR58fj42jF9T1DVuI7p9Mn9Oy2j+5OoyGOa4847kUjfBDijxbVXolmJ9Hjv71+/RNN/7UR0aVHHGQenytD21nwyKBzo95B3xP76qUmaAYYfBxd9kvVEsTW20YQmmcvang3yz8s/rDid+n3WezbsVeU/mUz/Pd7px3tjde8CBF9qVdLsHZA1IXeZGQzIzBd6YUsBsNsSRdnjLG9N18SYoG+0DviNex13+s8pSR40RC21WegpNVnoKTVZ6Ck1WegpNVnoKTVZ6Ck1WegpNVnqGRs9VmJbfXZnlaNNHh+A5M7DKGwiamEAAAAAElFTkSuQmCC');
  background-size: 100% 100%;
}

.app-header .inner nav {
  margin-left: 120px;
}

.app-header .inner nav ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.app-header .inner nav li {
  display: block;
  height: 40px;
  margin-right: 10px;
}

.app-header .inner nav li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  color: var(--text-color);
  font-size: var(--small-font-size);
  text-decoration: none;
  border-radius: 25px;
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.app-header .inner nav li a:hover {
  color: var(--title-color);
}

.app-header .inner nav li a.active {
  background-color: var(--container-hover-color);
  color: var(--title-color);
}

.app-header .inner .home {
  display: none;
  color: var(--title-color);
  font-size: var(--small-font-size);
  text-decoration: none;
  margin: 0 10px 0 auto;
  align-items: center;
  justify-content: center;
}

.app-header .inner .home svg {
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  margin-top: -2px;
}

.app-footer {
  display: block;
  padding-bottom: 50px;
}

.app-footer nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.app-footer nav li {
  padding: 0 20px;
}

.app-footer nav li a {
  color: var(--text-color);
  font-size: var(--small-font-size);
  text-decoration: none;
  transition: all 0.2s ease-out;
}

.app-footer nav li a:hover {
  color: var(--title-color);
}

.app-footer small {
  text-align: center;
  display: block;
  color: var(--text-color);
  font-size: var(--small-font-size);
  opacity: 0.5;
}

.app-footer .icp {
  text-align: center;
  display: block;
  color: var(--text-color);
  font-size: var(--small-font-size);
  opacity: 0.5;
}

/* 404 page */
.page-404 {
  display: block;
}

.page-404 p {
  padding: 200px 0;
  color: var(--text-color);
  text-align: center;
}

.page-404 a {
  color: var(--text-color);
  transition: all 0.2s ease-out;
}

.page-404 a:hover {
  color: var(--title-color);
}

.download-ios {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 60px;
  background-color: #212121;
  border-radius: 10px;
  border: 1px solid #0E0E0E;
  box-shadow: 0 0 0 1px #343434 inset;
  text-decoration: none;
  padding: 0 20px 0 55px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABcCAMAAADUMSJqAAAAPFBMVEUAAAD////////////////////////////////////////////////////////////////////////////YSWgTAAAAE3RSTlMAIBDv34C/QGAwoHBf3pBQr8+PFmWBIAAAAahJREFUaN7t2N1qIzEMBeAj/8n2zM600fu/67JkU1HSUle2oIX57sKQg5GVyB5cLr8bVYKPkIuIMDxsUf7JWI+KiFc4R/nvxGq7vCEs1jQ7YTFKGt6xWBe/qrCogsWK48JJ1IHFNsdWQdFswmrRMTv4Zet+5oD1QhSReNCqtZ61nk0/HgeHtw9c7w8tQu2PDSw7ffoslj18Ozo/vv2cz4/kR34nyyB7n78xEZ1HlGfZMMiGjXdnSyJe6S2KRQpjw8ZmG2gTa7bs+NJNjPJAURyzURyz2TEbXUxex8aBDWFAFZMbRrw4LhxJLF7gWPId8GvEBsf9xJAsFukKnwo3CRhRf2ArboOXTJMy/fOfL3o0zyG/CRoJAw5xrPopRpvDjipeX3QV29QfwHxlSOw6TdRlfvFZJsSBi6xZmjgXzZ8xWMz+TLX6/OGIHRauyvqFK3ZYuDqmztEevd4x6DQUhTCq23fT4Y6e8Q0U118VFTsUXFWPbE23ZdveRr0etRFR41zs2Yq0I2Pnjx/ILcCI76MjPb29pS3d31gyJgSuJ31cNa4t4HL5Ff4CFrTqEmMbsyoAAAAASUVORK5CYII=');
  background-position: 15px center;
  background-repeat: no-repeat;
  background-size: 30px auto;
  transition: all 0.25s ease-out;
}

.download-ios:hover {
  background-color: #252525;
}

.download-ios span {
  display: block;
  color: #fff;
  line-height: 1.2;
  font-size: 12px;
  white-space: nowrap;
}

.download-ios strong {
  display: block;
  color: #fff;
  line-height: 1;
  font-size: 18.5px;
  white-space: nowrap;
}

@media (max-width: 800px) {
  :root {
    --h1-font-size: 24px;
    --h2-font-size: 18px;
    --p-font-size: 14px;
    --small-font-size: 12px;
    
    --container-padding: 16px;
    --margin-big: 15px;
    --margin-small: 15px;
  }

  body .main {
    padding: 16px;
    width: auto;
    margin: 0 0 12px 0;
  }

  .app-header {
    height: 60px;
  }

  .app-header .inner {
    width: auto;
    padding: 0 10px;
  }

  .app-header .inner .logo {
    scale: 0.8;
  }

  .app-header .inner nav {
    margin-left: auto;
  }

  .app-header .inner nav li a {
    padding: 0 5px;
    background-color: rgba(0, 0, 0, 0) !important;
  }
}

@media (max-width: 440px) {
  .app-header .inner nav {
    display: none;
  }

  .app-header .inner .home {
    display: flex;
  }

  .app-footer nav li {
    padding: 0 10px;
  }

  .download-ios {
    height: 50px;
    padding: 0 10px 0 45px;
    border-radius: 8px;
    background-position: 10px center;
  }

  .download-ios span {
    line-height: 1;
  }
}