/* Text Elements */

h1.heading-1 {
  padding: 60px 20px 20px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 36px;
  font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
}

/* Layout Elements */

.container.background-fullscreen {
  min-height: 100vh;
  background-image: -webkit-radial-gradient(rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .52) 100%), url('../images/2048-masungolo.jpg');
  background-image:    -moz-radial-gradient(rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .52) 100%), url('../images/2048-masungolo.jpg');
  background-image:      -o-radial-gradient(rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .52) 100%), url('../images/2048-masungolo.jpg');
  background-image:         radial-gradient(rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .52) 100%), url('../images/2048-masungolo.jpg');
  background-attachment: scroll, scroll;
  background-position: left top, left top;
  background-clip: border-box, border-box;
  background-origin: padding-box, padding-box;
  background-size: auto auto, cover;
  background-repeat: repeat, repeat;

  background-blend-mode: normal, normal;
}

div.responsive-picture.picture-1 {
  margin-right: auto;
  margin-left: auto;
  padding: 50px 20px 20px;
  max-width: 768px;
}

@media screen and (min-width: 40rem) {
  /* Text Elements */

  h1.heading-1 {
    font-size: 45px;
  }

  /* Layout Elements */

  .container.background-fullscreen {
    background-image: -webkit-radial-gradient(rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .52) 100%), url('../images/2048-masungolo.jpg');
    background-image:    -moz-radial-gradient(rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .52) 100%), url('../images/2048-masungolo.jpg');
    background-image:      -o-radial-gradient(rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .52) 100%), url('../images/2048-masungolo.jpg');
    background-image:         radial-gradient(rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .52) 100%), url('../images/2048-masungolo.jpg');
    background-attachment: scroll, scroll;
    background-position: left top, left top;
    background-clip: border-box, border-box;
    background-origin: padding-box, padding-box;
    background-size: auto auto, cover;
    background-repeat: repeat, repeat;

    background-blend-mode: normal, normal;
  }
}

@media screen and (min-width: 64rem) {
  /* Layout Elements */

  .container.background-fullscreen {
    background-image: -webkit-radial-gradient(rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .52) 100%), url('../images/2048-masungolo.jpg');
    background-image:    -moz-radial-gradient(rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .52) 100%), url('../images/2048-masungolo.jpg');
    background-image:      -o-radial-gradient(rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .52) 100%), url('../images/2048-masungolo.jpg');
    background-image:         radial-gradient(rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .52) 100%), url('../images/2048-masungolo.jpg');
    background-attachment: scroll, scroll;
    background-position: left top, left top;
    background-clip: border-box, border-box;
    background-origin: padding-box, padding-box;
    background-size: auto auto, cover;
    background-repeat: repeat, repeat;

    background-blend-mode: normal, normal;
  }
}