@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');

@font-face {
  font-family: "POP";
  font-weight: bold;
  src: url("https://assets.codepen.io/1480814/MiriamLibre-Bold.ttf")
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    min-height: 100vh;
    background: #10b0c6;
    animation: d 1s infinite alternate;
}


.pop {
    z-index: -1;
  display: grid;
  position: fixed;
  inset: -200vmax;
  place-content: center;
  background: repeating-conic-gradient(at 50% 50%,#006f8d 0 18deg,#0000 0 36deg);
  animation: a 1.6s infinite linear;
}
.pop::before,
.pop::after {
  content: "ALT-G";
  grid-area: 1/1;
  font-size: 200px;
  font-family: "POP", monospace;
  font-weight: bold;
  text-transform: uppercase;
  color: #0000;
  background: radial-gradient(#fba41a 42%,#fef210 44%) 0 0/12px 12px;
  -webkit-background-clip: text;
  background-clip: text;
  transform: rotate(0deg) skewY(-8deg);
  animation: b 1.6s infinite linear;
}
.pop::before {
  text-shadow:
    1px 1px #f11145,2px 2px #f11145,3px 3px #f11145,
    4px 4px #f11145,5px 5px #f11145,6px 6px #f11145,
    7px 7px #10134a,8px 8px #10134a,9px 9px #10134a,
    10px 10px #10134a,11px 11px #10134a,12px 12px #10134a;
}
.pop::after {
  -webkit-text-stroke: 3px #000;
}

@keyframes a {
  100% {
    transform: rotate(36deg)
  }
}
@keyframes b {
  50% {
    transform: rotate(-18deg) scale(1.3) skewY(-8deg)
  }
  100% {
    transform: rotate(-36deg) scale(1) skewY(-8deg)
  }
}


@keyframes d {
  100% {background:#0082a6}
}


.ekortyla {
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 450;
    text-shadow: 10px 10px 10px black;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    position: absolute;
    z-index: 1000;
}
.ekortyla music{
    font-size: 12px;
    font-weight: 450;
    text-shadow: 10px 10px 10px black;
}
.ayo{
        color: #ffffff;
        font-family: 'Raleway', sans-serif;
        font-size: 13px;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-weight: 500;
        text-shadow: 15px 15px 15px 15px black;
        margin: 10px auto;
        margin-left: 0.1%;
    }
.ayo purple{
    color: #00c6ff;
    font-weight: 800;
    text-shadow: 15px 15px 15px 15px black;
}
.ayo ek{
    font-size: 10px;
    font-weight: 450;
    text-shadow: 15px 15px 15px 15px black;
}
.ekortyla .przyciemnienie {
    z-index: -1;
    background: rgba(0, 0, 0, 0.767);
    position: absolute;
    width: 15000px;
    height: 15000px;
    margin-left: -150px;
    margin-top: -1500px;
}