/*@import url("https://fonts.googleapis.com/css?family=Montserrat:900");*/

:root {
  --size: 8vw;
  --shadow: 10;
  --primary: white;
  --secondary: black;
  --s: 36px; /* control the size*/
  --c1: #ff847c;
  --c2: #e84a5f;
  --c3: #fecea8;
  --c4: #99b898;
}

body {
  margin: 0;
}

.wrapper {
  animation: sliding-background 220s linear infinite;
  background:
    conic-gradient(from  45deg at 75% 75%, var(--c3) 90deg,var(--c1) 0 180deg,#0000 0),
    conic-gradient(from -45deg at 25% 25%, var(--c3) 90deg,#0000 0),
    conic-gradient(from -45deg at 50% 100%,#0000 180deg,var(--c3) 0),
    conic-gradient(from -45deg,var(--c1) 90deg, var(--c2) 0 225deg,var(--c4) 0);
  background-size: var(--s) var(--s);
  height: 100vh;
  text-align: center;
}

.title {
  background: var(--primary);
  color: var(--secondary);
  font-family: "Montserrat", sans-serif;
  font-size: var(--size);
  letter-spacing: 1vw;
  line-height: 100vh;
  margin: 0;
  mix-blend-mode: lighten;
  text-transform: uppercase;

  &:before {
    color: var(--primary);
    content: attr(data-text);
    margin-left: -1%;
    margin-top: -1%;
    position: absolute;
  }
}

@keyframes sliding-background {
  0%,
  100% {
    background-position: 0 20%;
  }

  50% {
    background-position: 100% 80%;
  }
}