@import url('./fonts.css');

:root {
     --color-background: #132020;
     --color-background-light: #263f3f;
     /* --color-link: #F4E8A1; */
     /* --color-text: #C9D1CC; */
     /* --color-badge: #FF5A5A; */
     --color-link: #FFFF5C;
     --color-text: #F5F5DC;
     --color-badge: #FF0000;

     --heading-font: 'Worstveld Bold Condense';
}

html {
     background-color: var(--color-background);
     font-family: 'Literata', serif;
     font-size: 1.2rem;
}

.is-active {
     text-decoration: underline;
}

a {
     color: var(--color-link);
     text-decoration: none;
}

.overhead {
     display: flex;
     margin: 1rem;
     background-color: var(--color-background-light);
     justify-content: space-evenly;
}

.albatross {
     display: flex;
     gap:2rem;
     margin-bottom: 1rem;
     align-items: center;
     justify-content: center;
}

.banner {
     margin: 0;

     font-family: var(--heading-font);

     font-weight: normal;
     font-size: 6rem;
     letter-spacing: 3px;
     text-align: center;

     color: var(--color-text);
}

.hero {
     /* width: 64px; */
     filter: invert();
}

.stories {
     margin: 0;
     padding: 0;
     list-style-type: circle;
     text-align: center;
}

.stories sup {
     color: var(--color-badge);
     padding: 0.2rem;
}

.title {
     color: var(--color-text);
     margin: 0;
     text-align: center;

     font-weight: normal;
}

.subtitle {
     color: var(--color-text);
     font-style: italic;
     margin: 0;
     text-align: center;

     font-weight: normal;
}

.off {
     color: var(--color-text);
}

.navbar {
     color: var(--color-link);
     display: flex;
     gap:2rem;
     justify-content: center;
     font-size: 2rem;
}

.prev {
     transform: scaleX(-1);
}
/* the content of the story */

.foo {
     margin: 5rem;
}

.story {
     color: var(--color-text);
     font-size: 1rem;
     line-height: 1.7;
     letter-spacing: 0.3px;
     word-spacing: 1px;
}

/* about page */

.about-wrapper {
     margin:1rem;
}

.about-wrapper section {
     margin:auto;
}

.website-about-content {
     display: flex;
     margin: auto 10rem auto;
     gap:2rem;
     flex-direction: row;
     align-items: center;
     justify-content: center;
}

.author-about-content {
     display: flex;
     gap:2rem;
     margin: auto 8rem auto;
     align-items: center;
     flex-direction: row-reverse;
     justify-content: center;
}

.about-header {
     display: block;
     margin-bottom: 1rem;
     color:var(--color-link);
     background-color: var(--color-background-light);
     width: 100%;
     text-align: center;
}

.author-portrait img {
     /* width: 150px */
}

.hero-portrait-about {
     color:var(--color-text);
     text-align: center;
}

.author-portrait-about {
     color:var(--color-text);
     text-align: center;
}

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

.hero-portrait img {
     /* width: 150px; */
     filter: invert();
}

.description {
     display: flex;
     flex-direction: column;
     align-items: center;
     color: var(--color-text);
}

.website-name {
     font-family: var(--heading-font);
     font-size: 6rem;
     /* letter-spacing: 3px; */
     margin:0;
     color:var(--color-text);
     font-weight: normal;
     text-align: center;
}

.author-name {
     font-family: var(--heading-font);
     /* letter-spacing: 3px; */
     font-size: 6rem;
     color: var(--color-text);
     margin:0;
     text-align: center;
     font-weight: normal;
}

.description img {
     width: 340px;
     height: auto;
     filter: saturate(60%);
}
.copyright-notice {
     color:var(--color-text);
     text-align: center;
}

/* comments */

.another-hero {
     filter: invert();
     width: 120px;
}

.comments {
     color: var(--color-text);
     width: 80%;
     margin: 0 auto;
     text-align: center;
     padding: 0;
}

.comments li {
     list-style-type: none;
}

/* responsive */

@media (max-width: 767px) {
     .albatross {
          gap:0;
     }

     .hero {
          margin-right:0.5rem;
     }

     .website-about-content, .author-about-content {
          flex-direction: column;
          align-items: center;
          margin: auto;
     }

     .website-name {
          font-size: 5rem;
          margin-top: -2rem;
     }
     
     .author-name {
          font-size: 5rem;
          margin-top: -2rem;
     }

     .contact {
          text-align: center;
     }
     
     .header-comments {
          flex-direction: column;
     }
     
     .banner {
          font-size: 4rem;
     }

     .foo {
          margin:1rem;
     }
}