html,
body {
  background-color: var(--solid_color_primary) !important;
}

.landing-page {
  width: 100%;
  background-color: var(--solid_color_primary);
}

.landing-nav {
  height: 53px;
  width: 100%;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
}

.landing-nav-inner {
  width: 100%;
  margin: 0 auto;
  max-width: 1080px;
}

.landing-nav-actions {
  height: 100%;
  margin-left: auto;
  padding: 5px 20px;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.landing-nav-action {
  height: 36px;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 5px 15px;
  font-size: var(--fs_s);
  color: var(--text_color_tertiary);
  text-decoration: none;
  border-radius: var(--radius-small);
  outline: none;
}

.landing-nav-action:hover {
  background-color: var(--solid_color_tertiary);
  color: var(--text_color_primary);
}

.landing-page-container {
  width: 100%;
  padding-top: 53px;
  height: auto;
  min-height: 100vh;
}

.landing-page-container-inner {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.landing-header {
  width: 100%;
  margin-top: 80px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.landing-header-title {
  align-items: center;
  text-align: center;
  font-size: 60px;
  font-weight: 700;
  color: var(--text_color_primary);
}

.landing-header-subtitle {
  align-items: center;
  text-align: center;
  font-size: 26px;
  font-weight: 400;
  flex-direction: row;
  color: var(--text_color_primary);
}

.landing-header-subtitle svg {
  margin: 0 5px;
}

.landing-header-description {
  align-items: center;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  color: var(--text_color_secondary);
}

.landing-search-container {
  width: 100%;
  min-height: 46px;
  margin-top: 20px;
}

.landing-search-container-inner {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--border_color_input);
  border-radius: 23px;
  overflow: hidden;
  background-color: var(--solid_color_primary);
}

.landing-search-container-search-icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 46px;
  padding-top: 13px;
  align-items: center;
  justify-content: start;
}

.landing-search-container-search-icon-img {
  border-radius: var(--radius-circle);
  object-fit: cover;
  margin-top: -10px;
}

.landing-search-container-search-input {
  position: absolute;
  left: 46px;
  right: 46px;
  top: 0;
  bottom: 0;
  padding-top: 11px;
  padding-bottom: 10px;
  background-color: var(--solid_color_primary);
  font-size: var(--fs_n);
  resize: none;
  color: var(--text_color_primary);
  outline: none;
}

.landing-search-container-search-input:focus {
  /* box-shadow: 0 0 0 2px var(--solid_color_tertiary), 0 0 0 3px var(--border_color_input); */
}

.landing-search-container-search-btn {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 42px;
  height: 42px;
  line-height: 1.5;
  padding-top: 11px;
  border-radius: var(--radius-circle);
  align-items: center;
  justify-content: start;
  outline: none;
  background-color: transparent;
}

.landing-search-container-search-btn:hover {
  background-color: var(--solid_color_tertiary);
}

@media (min-width:0px) and (max-width:720px) {
  .landing-header {
    margin-top: 0px !important;
  }

  .landing-header-title {
    font-size: 40px !important;
  }

  .landing-header-subtitle {
    font-size: 20px !important;
  }

  .landing-page-container-inner {
    padding: 0 15px !important;
  }

  .landing-search-container {
    margin-top: 15px !important;
  }

  .landing-nav-actions {
    padding-right: 5px !important;
  }

  .landing-nav-action {
    padding: 5px 10px !important;
  }

  .landing-see-more-container-inner {
    padding-top: 20px !important;
  }
}

.landing-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -863px;
  height: auto;
}

.landing-footer-upper {
  height: 53px;
  width: 100%;
  background-color: var(--solid_color_block);
}

.landing-footer-lower-inner,
.landing-footer-inner {
  width: 100%;
  padding: 5px 15px;
  flex-direction: row;
  height: 100%;
  margin: 0 auto;
  max-width: 1080px;
}

.landing-footer-lower-title {
  width: 100%;
  padding: 30px 10px 0 30px;
  flex-direction: row;
  margin: 0 auto;
  max-width: 1080px;
  font-weight: 600;
  color: var(--text_color_primary);
  font-size: var(--fs_s);
}

.landing-footer-lower-title.no-padding {
  padding: 0 0 10px 0 !important;
}

.landing-footer-inner {
  flex-wrap: wrap;
}

.landing-footer-left {
  height: 100%;
  align-items: center;
  margin-right: auto;
  justify-content: center;
}

.landing-footer-upper-link {
  height: 36px;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  padding: 5px 15px;
  font-size: var(--fs_xs);
  color: var(--text_color_tertiary);
  text-decoration: none;
  border-radius: var(--radius-small);
  outline: none;
}

.landing-footer-upper-link:hover {
  background-color: var(--solid_color_tertiary);
  color: var(--text_color_primary);
}

.landing-footer-right {
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.landing-footer-lower {
  background-color: var(--solid_color_tertiary);
  height: 800px;
  width: 100%;
}

.landing-footer-col {
  width: 20%;
  align-items: start;
  padding: 15px;
}

@media (min-width:0px) and (max-width:960px) {
  .landing-footer-lower {
    height: 3400px !important;
  }
  .landing-footer {
    bottom: -3483px !important;
  }
  .landing-footer-col {
    width: 100% !important;
    padding-bottom: 0 !important;
  }
  .landing-footer-lower-inner {
    flex-direction: column !important;
  }
  .landing-footer-upper-link {
    font-size: var(--fs_xs) !important;
    padding: 5px 10px !important;
  }
}

@media (min-width: 0px) and (max-width: 480px) {
  .landing-footer-upper {
    height: auto !important;
    min-height: 53px !important;
  }
}

@media (min-height: 0px) and (max-height: 780px) {
  .landing-footer {
    /* bottom: auto !important;
    position: relative  !important;
    height: auto !important;
    margin-top: 10px !important; */
  }
}

.landing-footer-col-link {
  color: var(--text_color_primary);
  font-weight: 500;
  font-size: var(--fs_xs);
  text-decoration: none;
  margin-bottom: 5px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.landing-footer-col-link:focus,
.landing-footer-col-link:hover {
  text-decoration: underline;
  outline: none;
}

.landing-footer-col-link svg {
  margin-right: 5px;
}

/* SEE MORE */

.landing-see-more-container {
  width: 100%;
  max-width: 480px;
  align-items: center;
  margin: auto auto 25px auto;
}

.landing-see-more-container-inner {
  width: 100%;
  padding-top: 30px;
  align-items: center;
}

.landing-see-more-title {
  font-size: var(--fs_xs);
  font-weight: 600;
  color: var(--text_color_primary);
}

.landing-see-more-btn {
  transform: rotate(180deg);
  width: 46px;
  height: 46px;
  margin-top: 15px;
  border-radius: var(--radius-circle);
  align-items: center;
  justify-content: center;
  outline: none;
  border: 1px solid var(--border_color_input);
  background-color: transparent;
}

.landing-see-more-btn:focus {
  box-shadow: 0 0 0 2px var(--solid_color_tertiary), 0 0 0 3px var(--border_color_input);
}

/* CHARACTER SUGGESTIONS */

.character-suggestions-container {
  width: 100%;
  max-width: 590px;
  margin: 10px auto;
  padding: 15px 10px 10px 10px;
}

.character-suggestions-container-inner {
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px;
}

.character-suggestion {
  flex-direction: row;
  background-color: var(--solid_color_tertiary);
  border-radius: var(--radius-rounded);
  margin: 0 5px 5px 0;
  width: auto;
  height: 32px;
  outline: none;
}

.character-suggestion-img-block {
  height: 26px;
  width: 26px;
  overflow: hidden;
  background-color: var(--solid_color_secondary);
  border-radius: var(--radius-circle);
  margin: 3px;
}

.character-suggestion-img {
  height: 26px;
  width: 26px;
  overflow: hidden;
  border-radius: var(--radius-circle);
}

.character-suggestion-name {
  align-items: center;
  justify-content: center;
  font-size: var(--fs_xs);
  padding-right: 10px;
  margin-left: 5px;
  color: var(--text_color_primary);
}

.landing-quick-actions-block {
  width: 100%;
  margin-top: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  padding: 0 5px;
}

.landing-quick-action {
  flex-direction: row;
  margin: 0 5px 5px 0;
}

.landing-quick-action-btn {
  text-decoration: none;
  background-color: var(--solid_color_block);
  padding: 5px 15px;
  font-weight: 500;
  color: var(--text_color_primary);
  outline: none;
  border-radius: var(--radius-circle);
  font-size: var(--fs_xs);
  flex-direction: row;
}

.landing-quick-action-btn:hover {
  background-color: var(--solid_color_tertiary);
}

.landing-quick-action-btn:focus {
  background-color: var(--solid_color_tertiary);
  box-shadow: 0 0 0 2px var(--solid_color_tertiary), 0 0 0 3px var(--border_color_input);
}