body {
  min-height: 250px;
  height: 100vh;
  position: relative;
  background-image:url(https://kurziokode.github.io/type.jpg);
 background-repeat: no-repeat;
  text-align: center;
}
div {
  position: absolute;
  left: 50%;
  top: 9%;
}
div::before,
div::after {
  display: block;
  content: '';
  position: absolute;
}
@media (max-width: 400px) {
  div:not(.no-scale) {
    transform: scale(0.8);
  }
}
#shadow {
  width: 400px;
  height: 300px;
  margin-left: -200px;
  margin-top: -150px;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, rgba(255,255,255,0.6) 25%, rgba(255,255,255,0) 60%);
  background-position: 50% 40%;
  background-size: 13em 13em;
  animation: shadow 3s ease-in-out infinite alternate-reverse;
}
#shadow::before,
#shadow::after {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  content: 'curzio';
  font-family: Helvetica, sans-serif;
  font-weight: ;
  font-size: 6em;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shadow 3s ease-in-out infinite alternate-reverse;
}
#shadow::before {
  margin-top: 10px;
  background-image: radial-gradient(circle, black 30%, rgba(0,0,0,0) 47%), linear-gradient(#282828, #282828);
  background-position: 50% 50%;
  background-size: 3em 3em, 100% 100%;
  filter: blur(0.07em);
}
#shadow::after {
  background-image: linear-gradient(to top, rgba(0,0,0,0.4) 37%, rgba(0,0,0,0) 46%), radial-gradient(circle, rgb(255, 0, 0) 45%, rgba(255,255,255,0) 60%), linear-gradient(#333, #333);
  background-position: 50% 50%;
  background-size: 100% 100%, 3em 3em, 100% 100%;
}
@-webkit-keyframes shadow {
  from {
    background-position: 10% 50%;
  }
  to {
    background-position: 90% 50%;
  }
}
@keyframes shadow {
  from {
    background-position: 10% 50%;
  }
  to {
    background-position: 90% 50%;
  }
}











/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

/* ----------- Galaxy Tab 2 ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {

}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 

}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape) { 

}

/* ----------- Galaxy Tab S ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) { 

}


/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S4, S5 and Note 3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S6 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {

}