<div class="wrapper">
  <div class="box">
    <p>Washington D.C.</p>
  </div>
  <small class="mode-name-wrapper">
    <span class="mode-name">hard-light</span>
   </small>
</div>

* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  height: 100%;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/washington.jpg') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Nocturno Display Medium 4", Georgia;
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  height: 100%;
  width: 100%;
}

$blue: #002B65;
$red: #BF0A30;

.box {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 8vw;
  border-top: 10px solid $red;
  border-bottom: 10px solid $red;
  line-height: 1;
  background-color: $blue;
  color: white;
  background-size: cover;
  mix-blend-mode: hard-light;
  height: 400px;
  height: 50vh;
  width: 100%;
  text-align: center;
  text-transform: uppercase; 
  
  p {
    text-rendering: optimizeLegibility;
    word-spacing: 5px;
    margin: 0;
  }
}

.mode-name-wrapper {
  position: absolute;
  bottom: 12vh;
  left: 0;
  right: 0;
  color: $blue;
  text-align: center;
  text-transform: uppercase;
  font-size: 17px;
  margin: 0 auto;
  padding: 0;
  width: 135px;
  height: 135px;
  border: 5px solid white;
  background-color: #ddd;
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  &:before {
    content: "★";
    display: block;
    line-height: 1;
    font-size: 20px;
    margin-top: -20px;
    margin-bottom: 10px;
    color: lighten($red, 10);
    animation: spin 2.5s ease;
    animation-iteration-count: infinite;
    transform-origin: center center;
  }
}

.mode-name {
    position: relative;
    left: 0;
    right: 0;
    animation: nudge 2.5s ease;
    animation-iteration-count: infinite;
}

@keyframes spin {
   0% {
     transform: rotate(0deg);
   }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes nudge {
  0% {
    transform: translate(0,0);
  }
  80% {
    transform: translate(0,0);
  }
  90% {
    transform: translate(-10px, 0);
  }
  93% {
    transform: translate(12px, 0);
  }
  95% {
    transform: translate(-8px, 0);
  }
  100% {
    transform: translate(0,0);
  }
}

var modeList = [
  'normal',
  'multiply',
  'screen',
  'overlay',
  'darken',
  'lighten',
  'color-dodge',
  'color-burn',
  'hard-light',
  'soft-light',
  'difference',
  'exclusion',
  'hue',
  'saturation',
  'color',
  'luminosity'
],
	elem = document.querySelector('.box'),
  propertyName = 'mix-blend-mode',
  modeElem = document.querySelector('.mode-name'),
  duration = 2500;

var i = 0;
var activate = setInterval(function() {
  if (i == modeList.length) i = 0;
  var mode = modeList[i]
  elem.style.mixBlendMode = mode;
  modeElem.innerText = mode;
  i++;
},duration);

activate();