<div class="container">
  <div class="scene">
    <h1>loading</h1>
  </div>
  <div class="scene">
    <h1>CSS Artist</h1>
  </div>
  <div class="scene">
    <h1>loading</h1>
  </div>
  <div class="scene">
    <h1>CSS Artist</h1>
  </div>
</div>

$pink: #ff0054;
@import url('https://fonts.googleapis.com/css?family=Monoton');
@mixin small {
  @media (max-width: 599px) {
    @content;
  }
}

@mixin med {
  @media (max-width: 768px) {
    @content;
  }
}
@mixin above-med {
  @media (min-width: 768px) {
    @content;
  }
}

@mixin large {
  @media (max-width: 992px) {
    @content;
  }
}

body {
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
}

.container {
  border: 1px solid;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  @include med {
    grid-template-columns: 1fr;
  }
  div {
    display: flex;
    justify-content: center;
    align-items: center;
    @include med {
      border-bottom: 2px solid black;
    }
    &:nth-of-type(odd) {
      h1 {
        font-family: "Pacifico", cursive;
      }
    }
    &:nth-of-type(even) {
      h1 {
        font-family: "Oswald", sans-serif;
      }
    }
    &:nth-of-type(1) {
      background: black;
      color: #232323;
      -webkit-text-fill-color: rgba(#fff, 0.2);
      text-shadow: -0.1em -0.1em 0.5em rgba(#fff, 1.3), 7.5px 7.5px 5px blue;
      text-shadow: -5.5px -5.5px 55px rgba(#fff, 0.3), 5.5px 5.5px 15px $pink;
      border-bottom: 2px solid black;
      border-right: 2px solid black;
      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: #fff;
    }
    &:nth-of-type(2) {
      border-bottom: 2px solid black;
      text-shadow: -5.5px -5.5px 5px rgba(#fff, 0.3), 5.5px 5px 1px $pink;
      color: transparent;
      -webkit-text-stroke-width: 4px;
      -webkit-text-stroke-color: #000;
    }
    &:nth-of-type(3) {
      order:4;
      background: #000;
      color: #fff;
      border-right: 2px solid black;
      overflow: hidden;
      h1 {
        
        padding: 38px;
        position: relative;

        background: white;
        background-image: radial-gradient(black 5px, transparent 0);
        
        background-size: 71px 20px;
        background: repeating-conic-gradient(
          from 3deg at 25% 25%,
          hsl(200, 100%, 50%) 0deg 15deg,
          hsl(200, 100%, 60%) 10deg 30deg
        );        
        background-position: -19px -19px;
          background-image: repeating-conic-gradient($pink 0 9deg, #000 9deg 18deg);

        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: stripes 2s linear infinite;
              -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #fff;
        animation-direction: alternate-reverse;
      }
      
    }
    &:nth-of-type(4){
      letter-spacing: 5px;
      font-size:.8em;
      color:transparent;
      background-size: 40px 40px;
        background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
      h1{
        font-family: "Monoton", Helvetica, sans-serif;
        background: linear-gradient(7deg, #000 50%, $pink 0);
        -webkit-background-clip: text;
      }
    }
  }
  h1 {
    font-size: 7em;
    @include med {
      font-size: 5em;
    }
    @include small {
      font-size: 4em;
    }
    font-weight: bold;
  }
}
@keyframes stripes {
  100% {
    background-position: 100px 0, 100px 0, 200px 0;
  }
}