<div class="main">
  <div class="head">
    <h1 class="headline">Arcade Life</h1>
    <h2 class="subhead">
      The next generation of arcade gamers top the leaderboard
    </h2>
    <div class="article-meta">
      <div class="author">
        <svg id="author-avatar" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" width="80" height="80">
          <title id="avatarTitle">Author Avatar</title>
          <desc id="avatarDesc">
            A cartoon avatar of a smiling purple square on a blue
            background.
          </desc>
          <mask id="mask__beam" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36">
            <rect width="36" height="36" rx="72" fill="white"></rect>
          </mask>
          <g mask="url(#mask__beam)">
            <rect width="36" height="36" fill="#0ebeff"></rect>
            <rect x="0" y="0" width="36" height="36" transform="translate(6 6) rotate(192 18 18) scale(1)" fill="#754cac" rx="6"></rect>
            <g transform="translate(0 2) rotate(-2 18 18)">
              <path d="M13,19 a1,0.75 0 0,0 10,0" fill="white"></path>
              <rect x="12" y="14" width="1.5" height="2" rx="1" stroke="none" fill="white"></rect>
              <rect x="22" y="14" width="1.5" height="2" rx="1" stroke="none" fill="white"></rect>
            </g>
          </g>
        </svg>
        <div class="author__info">
          <p class="byline">By: Penny Pen</p>
          <p class="dateline">June 21, 2021</p>
        </div>
      </div>
      <p class="article-tags">
        <span class="tag">culture</span> <span class="tag">games</span>
        <span class="tag featured">featured</span>
      </p>
    </div>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
      quidem est minima quam! Laborum odit quidem earum perferendis eius
      laudantium perspiciatis similique deleniti delectus suscipit, cum
      corrupti facere reprehenderit esse.
    </p>
    <p>
      Animi aut, atque quibusdam similique distinctio enim iure, blanditiis
      rerum autem illum eum in. Dolorem quasi aspernatur nemo deserunt quo,
      libero dolore atque magni, ullam nihil corrupti et illo earum?
    </p>
    <p>
      Quos, ad? Et, iure. Officia fuga unde quibusdam nemo modi perspiciatis
      quisquam consectetur voluptates, dolore ab eaque voluptatem corporis
      placeat consequatur itaque qui asperiores. Consequuntur quas vitae
      animi est ea!
    </p>
    <p>
      Accusantium nemo labore corrupti laudantium! Quo reprehenderit ea
      perspiciatis temporibus! Illo sapiente harum fuga molestias temporibus
      iste animi. Velit, tenetur mollitia sit magni nulla quos veniam
      molestias consectetur aliquam eaque.
    </p>
    <p>
      Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit
      laboriosam voluptatum similique, fugit culpa enim! Suscipit labore
      odit porro assumenda, molestiae aperiam laboriosam explicabo nemo
      soluta facere sed libero magnam. Odio.
    </p>

    <aside>
      <p>Quos, ad? Et, iure. Libero dolore atque magni.</p>
    </aside>

    <figure>
      <img src="https://assets.codepen.io/t-1/freddy-g-lhy1lY3CyLI-unsplash.jpg" alt="a smiling person in a pink hoodie, standing in front of a bright pink lighted arcade basketball game. " />
      <figcaption>Photo by Freddy G</figcaption>
    </figure>
    <!-- full size image: https://images.unsplash.com/flagged/photo-1556339911-7ef846e7db43-->

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
      quidem est minima quam! Laborum odit quidem earum perferendis eius
      laudantium perspiciatis similique deleniti delectus suscipit, cum
      corrupti facere reprehenderit esse. Sed officia ipsum, soluta
      quibusdam enim quisquam ea atque nulla sunt temporibus, dolorum veniam
      dolor aspernatur quod. Praesentium vitae exercitationem quod,
      inventore eius quidem ea sit, nemo reprehenderit voluptatum officia.
    </p>
    <p>
      Animi aut, atque quibusdam similique distinctio enim iure, blanditiis
      rerum autem illum eum in. Dolorem quasi aspernatur nemo deserunt quo,
      libero dolore atque magni, ullam nihil corrupti et illo earum?
    </p>
    <p>
      Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit
      laboriosam voluptatum similique, fugit culpa enim! Suscipit labore
      odit porro assumenda, molestiae aperiam laboriosam explicabo nemo
      soluta facere sed libero magnam. Odio.
    </p>
    <p>
      Quae, cumque blanditiis? Nisi rem ullam, ducimus qui praesentium,
      temporibus mollitia ex voluptatibus aut accusamus reprehenderit soluta
      eius expedita dicta adipisci debitis repudiandae quibusdam laborum
      possimus cupiditate quidem doloribus quas.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum vitae
      debitis reiciendis nam molestias, iure, recusandae magnam cupiditate
      ut dolore aliquam nesciunt ipsum sit illum nihil quibusdam mollitia
      veritatis maiores.
    </p>

    <h2>High Scores &amp; High Drama</h2>

    <p>
      Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit
      laboriosam voluptatum similique, fugit culpa enim! Suscipit labore
      odit porro assumenda, molestiae aperiam laboriosam explicabo nemo
      soluta facere sed libero magnam. Odio.
    </p>
    <p>
      Animi aut, atque quibusdam similique distinctio enim iure, blanditiis
      rerum autem illum eum in. Dolorem quasi aspernatur nemo deserunt quo,
      libero dolore atque magni, ullam nihil corrupti et illo earum?
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
      quidem est minima quam! Laborum odit quidem earum perferendis eius
      laudantium perspiciatis similique deleniti delectus suscipit, cum
      corrupti facere reprehenderit esse.
    </p>

    <figure>
      <img src="https://assets.codepen.io/t-1/cassidy-james-blaede-1lzJt360gkE-unsplash.jpg" alt="two people playing Guitar Hero Arcade. " />
      <figcaption>Photo by Cassidy James Blaede</figcaption>
    </figure>
    <!-- full size image: https://images.unsplash.com/photo-1536818968680-deeec2e9fd11-->

    <p>
      Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit
      laboriosam voluptatum similique, fugit culpa enim! Suscipit labore
      odit porro assumenda, molestiae aperiam laboriosam explicabo nemo
      soluta facere sed libero magnam. Odio.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id amet ad
      blanditiis vero delectus incidunt tempore reiciendis eius qui vel
      placeat reprehenderit, ut, dolore asperiores possimus impedit. Ipsum,
      culpa eaque!
    </p>
    <p>
      Velit vero esse quisquam accusantium? Dolore alias, quaerat quod
      excepturi officiis ipsa placeat officia necessitatibus illo, vero
      quasi esse aut. Doloremque nesciunt placeat animi saepe tempore
      aspernatur, officia vitae laudantium!
    </p>

    <h2>Leveling Up</h2>
    <p>
      Animi aut, atque quibusdam similique distinctio enim iure, blanditiis
      rerum autem illum eum in. Dolorem quasi aspernatur nemo deserunt quo,
      libero dolore atque magni, ullam nihil corrupti et illo earum?
    </p>
    <figure>
      <img src="https://assets.codepen.io/t-1/nick-jones-QTk3Llc-oKU-unsplash.jpg" alt="a person wearing a bucket hat, sitting on a skee ball machine lane. " />
      <figcaption>Photo by Nick Jones</figcaption>
    </figure>

    <!-- full size image: https://images.unsplash.com/photo-1601637155580-ac6c49428450-->

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
      quidem est minima quam! Laborum odit quidem earum perferendis eius
      laudantium perspiciatis similique deleniti delectus suscipit, cum
      corrupti facere reprehenderit esse.
    </p>
    <p>
      Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit
      laboriosam voluptatum similique, fugit culpa enim! Suscipit labore
      odit porro assumenda, molestiae aperiam laboriosam explicabo nemo
      soluta facere sed libero magnam. Odio.
    </p>
    <p>
      Animi aut, atque quibusdam similique distinctio enim iure, blanditiis
      rerum autem illum eum in. Dolorem quasi aspernatur nemo deserunt quo,
      libero dolore atque magni, ullam nihil corrupti et illo earum?
    </p>
    <p>
      Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit
      laboriosam voluptatum similique, fugit culpa enim! Suscipit labore
      odit porro assumenda, molestiae aperiam laboriosam explicabo nemo
      soluta facere sed libero magnam. Odio.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id amet ad
      blanditiis vero delectus incidunt tempore reiciendis eius qui vel
      placeat reprehenderit, ut, dolore asperiores possimus impedit. Ipsum,
      culpa eaque!
    </p>

    <figure>
      <img src="https://assets.codepen.io/t-1/ersin-mandaliev-C5DC5bJhpRE-unsplash.jpg" alt="a person in black high-heeled boots sitting on an arcade basketball game. " />
      <figcaption>Photo by Ersin Mandaliev</figcaption>
    </figure>

    <!-- full size image: https://images.unsplash.com/flagged/photo-1556491168-3e6ffa3e26b2-->

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
      quidem est minima quam! Laborum odit quidem earum perferendis eius
      laudantium perspiciatis similique deleniti delectus suscipit, cum
      corrupti facere reprehenderit esse.
    </p>
    <p>
      Velit vero esse quisquam accusantium? Dolore alias, quaerat quod
      excepturi officiis ipsa placeat officia necessitatibus illo, vero
      quasi esse aut. Doloremque nesciunt placeat animi saepe tempore
      aspernatur, officia vitae laudantium!
    </p>

    <figure>
      <img src="https://assets.codepen.io/t-1/nick-jones-g7jhzbd9WFQ-unsplash.jpg" alt="a person in a white t-shirt sitting on a wheel of fortune arcade game. " />
      <figcaption>Photo by Nick Jones</figcaption>
    </figure>

    <!-- full size image: https://images.unsplash.com/photo-1604112900927-e4d6d3ce3a2e -->

    <p>
      Asperiores cum quisquam voluptate adipisci nihil ipsa eum libero
      recusandae inventore facilis modi nulla, provident ut, ad explicabo
      magnam unde voluptates commodi.
    </p>
    <p>
      Consectetur sed, itaque modi fugit asperiores similique maxime
      voluptatum incidunt labore vero cumque provident, deleniti nam?
      Molestiae impedit nostrum soluta quo iure, iste, nobis expedita minus
      ad officia dolor saepe.
    </p>
    <aside>
      <p>Labore vero cumque provident, deleniti nam, cumque vero.</p>
    </aside>
    <p>
      Consectetur sed, itaque modi fugit asperiores similique maxime
      voluptatum incidunt labore vero cumque provident, deleniti nam?
      Molestiae impedit nostrum soluta quo iure, iste, nobis expedita minus
      ad officia dolor saepe.
    </p>
    <p>
      Aperiam est ab harum alias quae rem, cumque vero. Dolore possimus quas
      eius dolor voluptatibus cumque velit, ratione aspernatur voluptatem?
      Nulla voluptatem quaerat placeat error, ipsam alias dignissimos odit
      excepturi?
    </p>

    <h2>Game Over?</h2>

    <p>
      Animi aut, atque quibusdam similique distinctio enim iure, blanditiis
      rerum autem illum eum in. Dolorem quasi aspernatur nemo deserunt quo,
      libero dolore atque magni, ullam nihil corrupti et illo earum?
    </p>

    <figure>
      <img src="https://assets.codepen.io/t-1/element5-digital-dwcC-OJ-bRs-unsplash.jpg" alt="three neon-lit skee ball lanes. " />
      <figcaption>Photo by Element5 Digital</figcaption>
    </figure>

    <!-- full size image: https://images.unsplash.com/photo-1533236897111-3e94666b2edf -->

    <p>
      Velit vero esse quisquam accusantium? Dolore alias, quaerat quod
      excepturi officiis ipsa placeat officia necessitatibus illo, vero
      quasi esse aut. Doloremque nesciunt placeat animi saepe tempore
      aspernatur, officia vitae laudantium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
      quidem est minima quam! Laborum odit quidem earum perferendis eius
      laudantium perspiciatis similique deleniti delectus suscipit, cum
      corrupti facere reprehenderit esse.
    </p>
    <p>
      Aperiam est ab harum alias quae rem, cumque vero. Dolore possimus quas
      eius dolor voluptatibus cumque velit, ratione aspernatur voluptatem?
      Nulla voluptatem quaerat placeat error, ipsam alias dignissimos odit
      excepturi?
    </p>
    <p>
      Consectetur sed, itaque modi fugit asperiores similique maxime
      voluptatum incidunt labore vero cumque provident, deleniti nam?
      Molestiae impedit nostrum soluta quo iure, iste, nobis expedita minus
      ad officia dolor saepe.
    </p>
    <aside>
      <p>Labore vero cumque provident, deleniti nam, cumque vero.</p>
    </aside>
    <p>
      Consectetur sed, itaque modi fugit asperiores similique maxime
      voluptatum incidunt labore vero cumque provident, deleniti nam?
      Molestiae impedit nostrum soluta quo iure, iste, nobis expedita minus
      ad officia dolor saepe.
    </p>
    <p>
      Aperiam est ab harum alias quae rem, cumque vero. Dolore possimus quas
      eius dolor voluptatibus cumque velit, ratione aspernatur voluptatem?
      Nulla voluptatem quaerat placeat error, ipsam alias dignissimos odit
      excepturi?
    </p>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Open+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

$neonblue: #001eff;
$neonlightblue: #4deeea;
$neonyellow: #ffe700;
$neongreen: #74ee15;

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  background-color: #101b37;
  display: grid;
  place-items: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Audiowide", sans-serif;
  letter-spacing: 0.1em;
}

h2 {
  color: white;
  text-shadow: 0 0 0.5em $neonlightblue, 0 0 1em white;
  padding: 1em 0 0.5em 0;
}

figure {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 1em 0;

  img {
    object-fit: contain;
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 0 0.5em 0.5em 0;
    box-shadow: -0.5em 0.5em 0 $neongreen;
  }

  figcaption {
    position: absolute;
    font-family: "Open Sans", sans-serif;
    padding: 0.4em;
    font-size: 0.8rem;
    color: black;
    font-weight: bold;
    background-color: $neonyellow;
    border-radius: 0.5em;
    bottom: -1em;
  }
}

p {
  font-family: "Open Sans", sans-serif;
  line-height: 2em;
  padding: 0.5em 0;
}

.main {
  color: #fff;
  position: relative;
  max-width: 800px;

  @media screen and (min-width: 800px) {
    border-left: 0.1em solid white;
  }
}

.head {
  position: relative;
  padding: 1.5em;
  margin-bottom: 1em;
  /*background: linear-gradient(
    0deg,
    rgba(16, 27, 55, 1) 32%,
    rgba(0, 0, 0, 1) 100%
  );*/
}

.headline {
  position: relative;
  font-size: 2.5rem;
  color: white;
  text-shadow: 0 0 0.5em $neonlightblue, 0 0 1em white;
  border-top: 0.6rem solid $neonlightblue;
  border-right: 0.6rem solid $neongreen;
  border-bottom: 0.6rem solid magenta;
  border-radius: 0 1rem 1rem 0;
  padding: 0.8em 0em;
  text-transform: uppercase;

  &::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    position: absolute;
    background-color: $neonlightblue;
    top: -1.05rem;
    left: -0.25rem;
  }
}

.subhead {
  position: relative;
  margin-bottom: 1em;
  text-shadow: none;
  color: white;
  padding: 1em;
  border-left: 0.6rem solid $neonyellow;
  font-family: "Open Sans", sans-serif;

  &::after {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    position: absolute;
    background-color: $neonyellow;
    bottom: -0.35rem;
    left: -1.05rem;
  }
}

.article-meta {
  display: grid;
  flex-direction: column;
}

.author {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1em;
  border-left: 0.6rem solid $neonblue;

  &::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    position: absolute;
    background-color: $neonblue;
    top: -0.7rem;
    left: -1.05rem;
  }

  &::after {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    position: absolute;
    background-color: $neonblue;
    bottom: -0.7em;
    left: -1.05em;
  }

  &__info {
    display: flex;
    flex-direction: column;
    margin-left: 1em;

    p {
      padding: 0;
    }
  }
}

.byline {
  font-weight: bold;
}

.article-tags {
  margin-top: 2em;
  padding: 0;

  span {
    padding: 0.5em 1em;
    background-color: black;
    border-radius: 1em;
  }
}

.content {
  padding: 1em 1.5em;
  //max-width: 70%;
  justify-self: center;
}

aside {
  position: relative;
  font-style: italic;
  color: white;
  margin: 1.5em 0;
  padding-left: 1em;
  border-left: 0.6rem solid $neonlightblue;
  text-align: left;

  &::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    position: absolute;
    background-color: $neonlightblue;
    top: -0.7rem;
    left: -1.05rem;
  }

  &::after {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    position: absolute;
    background-color: $neonlightblue;
    bottom: -0.7em;
    left: -1.05em;
  }
}