roll20-character-sheets/Crossed-Fates/source/app/components/header/header.scss

.rivals-header {
  display: inline-grid;
  grid-template-columns: calc((100% - 100px)/2) 100px calc((100% - 100px)/2);
  background-color: $light-gray;
  @include fill-available();
  height: 100px;
  padding: 0.5em;
  margin-bottom: 1em;

  .rival {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .logo {
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Crossed-Fates/assets/square.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100px 100px;
  }

  .header-left, .header-right {
    .rival-stat {
      display: inline-grid;
      grid-template-columns: 20% 80%;
      border-bottom: 4px solid $dark-gray;
      align-items: center;
      @include fill-available();

      .header-value {
        margin-bottom: 0;
        border: none;
      }

      .header-label {
        font-weight: bold;
        font-size: 1.2em;
        @include std-font($narrow-font);
      }
    }
  }

  .header-right {
    .rival-stat {
      grid-template-columns: 80% 20%;
    }

    .header-label {
      text-align: right;
     }

    .header-value { text-align: right; }
  }

  .header-left .header-label:after,
  .header-right .header-label:before {
    content: ' : ';
    @include std-font($narrow-font);
  }
}

.footer {
  display: inline-flex;
  float: right;

  .catscratcher {
    align-self: center;

    a {
      font-size: 0.8em;
      @include std-font($mono-font);
      text-transform: uppercase;

      // unvisited link
      &:link {
        color: $red;
        text-decoration: none;
      }

      // visited link
      &:visited {
        color: $red;
        text-decoration: none;
      }

      // mouse over link
      &:hover {
        color: $red;
        text-decoration: none;
      }

      // selected link
      &:active {
        color: $red;
        text-decoration: none;
      }
    }
  }
}