rpg-static-site/content/css/style.scss

$primary-color: #333;
$secondary-color: #f0f0f0;

@import url('https://fonts.googleapis.com/css2?family=Noticia+Text:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');

body {
  font-family: Helvetica, sans-serif, sans-serif;
  background-color: $secondary-color;
  color: $primary-color;

  header {
    text-align: center;
    background-color: #333;
    color: white;
    padding: 20px 0;
  }

  ul.campaigns {
    list-style-type: none;

    li {
      margin: 10px;
      padding: 10px;
      border: solid grey 1px;
      border-radius: 10px;
      h1 {
        text-align: inherit;
        
      }
    }
  }

  nav {
    background-color: #333;
    overflow: hidden;
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    /* Style the links inside the navigation bar */
    a {
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 10px 12px;
      text-decoration: none;
      font-size: 17px;
    }

    /* Change the color of links on hover */
    a:hover {
      background-color: #ddd;
      color: black;
    }

    /* Add a color to the active/current link */
    a.active {
    }
  }

  h1 {
    text-align: center;
  }

  &.season-5 {
    --newspaper-background-texture-image: url(../images/parchment.jpg);
    --newspaper-headline-font: 'Noticia Text';
    --newspaper-base-font: 'EB Garamond';
    --newspaper-name-font: 'UnifrakturCook';
    font-family: var(--newspaper-base-font);

    section.prologue {
      padding: 20px;
      margin: 20px;
      border: black solid 1 px;
      border-radius: 10px;
      background: var(--newspaper-background-texture-image);
      background-color: green;
    }

    hgroup{
      h1 {
        text-transform: uppercase;
        margin: inherit;
      }
      h2 {
        margin: inherit;
      }
      &.masthead {
      text-align: center;
      h1, h2 {
        text-transform: inherit;
        border-bottom: 0px;
        font-family: var(--newspaper-headline-font);
        line-height: 85%;
      }
      h1 {
        column-count: 1;
        font-family: var(--newspaper-name-font);
        font-size: 5em;
        margin: 8px;
        text-align: center;
      }
      p {
        font-style: italic;
      }
    }
  }
    h2 {
      text-align: center;
    }

    article p {
      text-align: justify;
    }
  }

  &.season-4 {
    --newspaper-background-texture-image: url(../images/starwars.jpg);
    --newspaper-headline-font: 'Noticia Text';
    --newspaper-base-font: 'EB Garamond';
    --newspaper-name-font: 'UnifrakturCook';
    font-family: "Libre Franklin";

    section.prologue {
      padding: 20px;
      margin: 20px;
      border: black solid 1 px;
      border-radius: 10px;
      background: var(--newspaper-background-texture-image);
      background-color: black;
      color: yellow;
    }

    hgroup{
      text-align: center;
      text-transform: uppercase;
      h1 {
        margin: inherit;
      }
      h2 {
        margin: inherit;
      }
      
  }
    strong {
      text-transform: uppercase;
    }
    h2 {
      text-align: center;
    }

    article p {
      text-align: justify;
    }
  }
}

header {
  background-color: $primary-color;
  padding: 10px;
  text-align: center;
}

header nav a {
  color: $secondary-color;
  text-decoration: none;
  margin: 0 15px;
}