* {
  box-sizing: border-box;
}
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,300i,400,400i,500,500i,700,700i&display=swap");

body {
  background-color: rgba(20, 20, 20);
  font-family: Ubuntu, sans-serif;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.name {
  position: relative;
  font-family: Ubuntu, sans-serif;
  font-weight: 700;
  font-size: 180px;
  color: rgb(207, 207, 207);
  text-shadow:
  /* 3d effect */ 0px 0px 1px rgb(167, 167, 167),
    0px 1px 1px rgb(167, 167, 167), 0px 2px 1px rgb(167, 167, 167),
    1px 1px 1px rgb(167, 167, 167), 1px 2px 1px rgb(167, 167, 167),
    1px 3px 1px rgb(167, 167, 167), 2px 2px 1px rgb(167, 167, 167),
    2px 3px 1px rgb(167, 167, 167), 2px 4px 1px rgb(167, 167, 167),
    /* long soft shadow*/ 1px 10px 30px rgba(0, 0, 0, 0.8),
    1px 10px 70px rgba(0, 0, 0, 0.8),
    /* short soft shadow*/ 0px 5px 5px rgba(0, 0, 0, 0.8),
    /* left shadow*/ -5px 5px 20px rgba(0, 0, 0, 0.8),
    /* right shadow*/ 5px 5px 20px rgba(0, 0, 0, 0.8),
    /* white light*/ 1px 1px 120px rgba(255, 255, 255, 0.5);
}

.name::selection {
  background-color: rgba(0, 0, 0, 0.7);
}
.name::-moz-selection {
  background-color: rgba(0, 0, 0, 0.7);
}

.name::after {
  content: "MOERKENS.eu";
  font-weight: 700;
  font-size: 180px;
  color: rgb(207, 207, 207);
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: 0px 0px 100px rgba(11, 124, 199, 0.5);
  animation: cycle 10s linear infinite;
}

@keyframes cycle {
  0% {
    text-shadow: 0px 0px 100px rgba(11, 124, 199, 0.5);
  }
  20% {
    text-shadow: 0px 0px 100px rgba(168, 11, 199, 0.5);
  }
  40% {
    text-shadow: 0px 0px 100px rgba(11, 199, 96, 0.5);
  }
  60% {
    text-shadow: 0px 0px 100px rgba(199, 11, 11, 0.5);
  }
  80% {
    text-shadow: 0px 0px 100px rgba(199, 96, 11, 0.5);
  }
}

.perks {
  position: absolute;
  margin-top: 20vh;
}
.perks > span {
  color: rgba(200, 200, 200, 0.7);
  padding: 40px;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 4;
  text-shadow: 0px -1px 2px rgba(255, 255, 255, 0.8),
    0px 5px 2px rgba(0, 0, 0, 0.8);
}

/* ---- FOOTER ---- */

footer {
  position: fixed;
  bottom: 0;
  right: 0px;
  padding: 40px;
}

/* custom styling for all icons */
i.fas,
i.fab {
  color: rgb(35, 35, 35);
  font-size: 4em;
  margin-left: 20px;
  transition: 0.2s;
  transition-timing-function: ease-in-out;
}

i.fas:hover,
i.fab:hover {
  color: rgb(40, 40, 40);
  transform: matrix3d(
    1.05,
    0,
    0,
    0,
    0,
    1.05,
    0,
    -0.001,
    0,
    0,
    1,
    0,
    0,
    0,
    0,
    1
  );
}
/*  ----  MOBILE ---- */

@media only screen and (max-width: 1200px) {
  .name {
    font-size: 120px;
  }
  .name::after {
    font-size: 120px;
  }

  .perks > span {
    padding: 10px;
  }

  footer {
    padding: 40px;
  }

  i.fas,
  i.fab {
    color: rgb(35, 35, 35);
    font-size: 3em;
    margin-left: 18px;
  }
}

@media only screen and (max-width: 900px) {
  .name {
    writing-mode: vertical-rl;
    font-size: 80px;
  }
  .name::after {
    writing-mode: vertical-rl;
    font-size: 80px;
  }

  .perks {
    position: fixed;
    bottom: 20px;
  }
  .perks > span {
    font-size: 1.3em;
  }

  footer {
    position: fixed;
    top: 0;
    right: 0px;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }

  i.fas,
  i.fab {
    color: rgb(45, 45, 45);
    font-size: 2.5em;
    margin: 5px;
  }

  i.fas:hover,
  i.fab:hover {
    color: rgb(55, 55, 55);
  }
}