styles.scss

@keyframes emoji-clarification {
  0% {
    transform: scale(1);
    content: attr(data-start);
  }
  50% {
    transform: scale(2);
    content: attr(data-end);
  }
  100% {
    transform: scale(.5);
    content: attr(data-start);
  }
}

%emoji-clarification {
  position: relative;
  border-bottom: 2px dashed black;
  cursor: help;
  text-decoration: none;

  &:hover:after { animation: emoji-clarification 1s ease infinite }

  &:after {
    content: "";
    display: block;
    font-size: 3rem;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
  }
}

body {
  transition: position 1s ease, display 1s ease, width 1s ease, margin 1s ease, padding 1s ease;
  height: 100vh;
  background: url('cow.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 250px;
}

.body-container {
  background: #f2c9ce;
  font-family: 'Roboto Mono', 'Consolas', monospace;
  display: flex;
  flex-direction: column;
  width: 400px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: scroll;
}

.box {
  box-sizing: border-box;
  background: #7cc6aa;
  border-radius: 20px;
  padding: 20px;
  color: #FFFDEA;
  width: 360px;
  margin: 15px auto;
}

.milk-crates {
  box-sizing: border-box;
  width: 320px;
  margin: 15px auto;
}

.cowbox {
  display: none;
}

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

.emoji-clarification {
  @extend %emoji-clarification;
}

@media (max-width: 600px) {

  body {
    background: none;
  }

  .body-container {
    display: flex;
    position: unset;
    width: 100%;
  }

  .cowbox {
    display: block;
  }

  .cow {
    width: 100%;
    height: auto;
  }

  .box, .milk-crates { width: 90% }
}