:root {
  --browser-background: #F4F5F7;
  --page-background: #FFFFFF;
  --text-color: #3C4C62;
  --accent-color: #DA207A;
  --tag-text-color: #FFFFFF;
  --interactive-hover-opacity: 0.8;
  --font-size-text: 18px;
  --font-size-tags: 13.5px;
  --font-size-h1: 32px;
  --font-size-h2: 28px;
  --font-size-h3: 24px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--browser-background);
}

body {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  min-height: 100vh;
  margin: 0 auto;
  color: var(--text-color);
  background: var(--page-background);
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: var(--font-size-text);
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

a:hover img,
a:focus img,
button:hover,
button:focus,
a.story-tag:hover,
a.story-tag:focus {
  opacity: var(--interactive-hover-opacity);
}

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  padding: 0 20px;
  border-bottom: 2px solid var(--accent-color);
  gap: 20px;
}

.site-logo {
  display: block;
  width: 240px;
  max-width: 40%;
  height: auto;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--text-color);
  background: transparent;
  font-family: inherit;
  font-size: var(--font-size-text);
  text-decoration: none;
  cursor: pointer;
}

.header-button:hover,
.header-button:focus {
  color: var(--accent-color);
}

.header-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  min-width: 180px;
  background: Seashell;
}

.header-menu[hidden] {
  display: none;
}

.header-menu-list {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.header-menu a,
.header-menu span {
  display: block;
  padding: 10px 20px;
  color: var(--text-color);
  font-family: inherit;
  font-size: var(--font-size-text);
  text-decoration: none;
}

.header-menu a:hover,
.header-menu a:focus,
.header-menu a[aria-current="page"] {
  color: var(--accent-color);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding: 20px;
  gap: 20px;
  background: var(--browser-background);
  font-size: var(--font-size-text);
  font-weight: 400;
}

.main-page {
  width: 100%;
  padding: 20px;
}

.main-cover {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 0 20px;
}

.main-title {
  margin: 0 0 20px;
}

.main-description {
  margin: 0 0 32px;
  line-height: 1.6;
}

.about-page {
  width: 100%;
  padding: 20px;
}

.about-title {
  margin: 0 0 20px;
}

.about-cover {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 0 20px;
}

.about-text {
  line-height: 1.7;
}

.about-text p {
  margin: 0 0 1em;
}

.about-text p:last-child {
  margin-bottom: 0;
}

.about-text a {
  color: var(--accent-color);
}

.site-footer-text {
  min-width: 0;
  margin: 0;
}

.footer-links {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 20px;
}

.footer-link {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  color: var(--text-color);
  background: transparent;
  font-family: inherit;
  font-size: var(--font-size-text);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.footer-link:hover,
.footer-link:focus {
  color: var(--accent-color);
}

.story-page {
  width: 100%;
  padding: 20px;
}

.story-title {
  margin: 0 0 20px;
}

.story-cover {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 20px;
}

.story-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 0 20px;
  gap: 10px;
  font-size: var(--font-size-text);
}

.story-tags-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.story-tag {
  display: inline-block;
  padding: 10px;
  border-radius: 4px;
  color: var(--tag-text-color);
  background: var(--accent-color);
  font-size: var(--font-size-tags);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.story-tags a:hover,
.story-tags a:focus {
  color: var(--tag-text-color);
}

.story-description {
  margin: 0;
  line-height: 1.6;
}

.story-audio {
  margin: 0 0 20px;
}

.story-audio-title {
  margin: 0 0 20px;
}

.story-audio-player {
  display: block;
  width: 100%;
}

.mobile-apps {
  margin: 0 0 32px;
}

.mobile-apps-title {
  margin: 0 0 20px;
}

.mobile-app-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.mobile-app-link {
  display: block;
  line-height: 0;
}

.mobile-app-badge {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
}

.story-section-title {
  margin: 0 0 12px;
}

.story-reading-time {
  margin: 0 0 24px;
}

.story-text {
  line-height: 1.7;
}

.story-text p {
  margin: 0 0 1em;
}

.story-text p:last-child {
  margin-bottom: 0;
}

.story-list {
  margin: 0 0 1em;
  padding-left: 28px;
}

.tag-page {
  width: 100%;
  padding: 20px;
}

.tag-title {
  margin: 0 0 20px;
}

.tag-cover {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 20px;
}

.tag-description {
  margin: 0;
  line-height: 1.6;
}

.banner-ad {
  margin: 20px 0;
}

.tag-content-title {
  margin: 0 0 20px;
}

.tag-sort {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 20px;
  gap: 10px;
}

.tag-sort-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 4px;
  color: var(--text-color);
  background: var(--browser-background);
  font-size: var(--font-size-text);
  text-decoration: none;
}

.tag-sort-link:hover,
.tag-sort-link:focus {
  color: var(--accent-color);
}

.tag-sort-link.is-active {
  color: var(--tag-text-color);
  background: var(--accent-color);
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.story-card {
  min-width: 0;
}

.story-card-link {
  display: block;
  color: var(--text-color);
  text-decoration: none;
}

.story-card-link:hover,
.story-card-link:focus {
  color: var(--accent-color);
}

.story-card-cover {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
}

.story-card-title {
  margin: 0;
  color: inherit;
  font-size: var(--font-size-text);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.latest-stories-title {
  margin: 0 0 20px;
}

.latest-stories + .latest-stories {
  margin-top: 20px;
}

.reading-benefits {
  margin-top: 20px;
  line-height: 1.7;
}

.reading-benefits-title {
  margin: 0 0 20px;
}

.reading-benefits p {
  margin: 0 0 20px;
}

.reading-benefits p:last-child {
  margin-bottom: 0;
}

.reading-benefits-list {
  margin: 0 0 20px;
  padding-left: 24px;
}

.reading-benefits-list li + li {
  margin-top: 8px;
}

.reading-benefits a {
  color: var(--accent-color);
}

.all-tags {
  margin-top: 20px;
}

.all-tags-title {
  margin: 0 0 20px;
}

.all-tags .story-tags {
  margin-bottom: 0;
}

.related-stories {
  margin: 32px 0 0;
}

.related-stories-title {
  margin: 0 0 20px;
}

.story-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 20px;
  margin: 32px 0 0;
}

.story-navigation + .mobile-apps {
  margin-top: 32px;
}

.story-navigation-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 4px;
  color: var(--tag-text-color);
  background: var(--accent-color);
  font-size: var(--font-size-text);
  text-decoration: none;
}

.story-navigation-link:hover,
.story-navigation-link:focus {
  color: var(--tag-text-color);
  opacity: var(--interactive-hover-opacity);
}

.story-navigation-next {
  grid-column: 2;
  justify-self: end;
}

.story-navigation-previous {
  grid-column: 1;
  justify-self: start;
}

.search-page {
  width: 100%;
  padding: 20px;
}

.search-title {
  margin: 0 0 20px;
}

.search-form {
  margin: 0 0 32px;
}

.search-label {
  display: block;
  margin: 0 0 10px;
}

.search-form-row {
  display: flex;
  gap: 10px;
}

.search-input {
  min-width: 0;
  min-height: 44px;
  flex: 1 1 auto;
  padding: 0 12px;
  border: 1px solid var(--text-color);
  border-radius: 4px;
  color: var(--text-color);
  background: var(--page-background);
  font-family: inherit;
  font-size: var(--font-size-text);
}

.search-input:focus {
  border-color: var(--accent-color);
  outline-color: var(--accent-color);
}

.search-submit {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 4px;
  color: var(--tag-text-color);
  background: var(--accent-color);
  font-family: inherit;
  font-size: var(--font-size-text);
  cursor: pointer;
}

.search-message {
  margin: 0;
}

.pagination {
  margin: 32px 0 0;
}

.pagination-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.pagination-link,
.pagination-current {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: var(--font-size-text);
  text-decoration: none;
}

.pagination-link {
  color: var(--text-color);
  background: var(--browser-background);
}

.pagination-link:hover,
.pagination-link:focus {
  color: var(--accent-color);
}

.pagination-current {
  color: var(--tag-text-color);
  background: var(--accent-color);
}

.feed-ad {
  margin-top: 20px;
}

.breadcrumbs {
  margin: 0 0 20px;
  font-size: var(--font-size-tags);
  line-height: 1.5;
}

.breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs-item {
  display: flex;
  align-items: center;
  min-width: 0;
}

.breadcrumbs-item + .breadcrumbs-item::before {
  margin: 0 8px;
  color: var(--text-color);
  content: "›";
}

.breadcrumbs a,
.breadcrumbs span {
  color: var(--text-color);
  text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus {
  color: var(--accent-color);
}

@media (max-width: 500px) {
  :root {
    --font-size-h1: 28px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
  }

  .site-header {
    gap: 20px;
  }

  .site-logo {
    max-width: 42%;
  }

  .header-actions {
    gap: 20px;
  }
}