html {
  box-sizing: border-box;
  overflow: hidden;
  height: 100vh;
}

*,
*::before,
*::after {
    box-sizing: inherit;

    --blue-bg: #B3E0FF;
    --horn: #ffddab;
    --horn-line: #f4c598;

    --pink-light: #ffaeb0;
    --pink-dark: #ff545a;

    --purple-eye: #502e75;

    --white-face: #eeeeee;
    --white-face-shadow: #e1e1e1;

    --grey-leg: #cdd1d2;
    --red-hoof: #ff5654;

    --r-red: #ff2220;
    --r-orange: #ffae00;
    --r-yellow: #ffe100;
    --r-green: #85c900;
    --r-blue: #00b0ff;
    --r-purple: #8139df;
    --r-pink: #ff40e1;

    --white-cloud: #fff;
    --yellow-star: #f8e545;
}

body {
  background-color: var(--blue-bg);
  margin: 0;
  height: 100vh;
  overflow: hidden;

  --ratio: 1;
}

.unicorn-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10em;
  transform: translateX(100vw);
  transition: transform 8s linear;
}

.unicorn-container.appear {
    transform: translateX(calc(-100vw - 250px));
}

.unicorn-container.reset {
  transition: none;
}

.unicorn {
  margin-top: 100px;
}

.unicorn .header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.unicorn .horn {
    position: relative;
    overflow: hidden;
    width: calc(40px * var(--ratio));
    height: calc(50px * var(--ratio));
}

.unicorn .horn .lines-container {
    position: absolute;
    width: calc(20px * var(--ratio));
    height: calc(50px * var(--ratio));
    overflow: hidden;
    transform: skew(-20deg, 68deg);
    top: calc(25px * var(--ratio));
    left: calc(10px * var(--ratio));
    background: var(--horn);
    background: linear-gradient(
    105deg,
    var(--horn) 0%,
    var(--horn) 8%,
    var(--horn-line) 9%,
    var(--horn-line) 13%,
    var(--horn) 14%,
    var(--horn) 38%,
    var(--horn-line) 39%,
    var(--horn-line) 43%,
    var(--horn) 44%
    );
}

.unicorn .head {
    display: flex;
    justify-content: center;
    margin-left: calc(70px * var(--ratio));
}

.unicorn .face {
    display: flex;
    justify-content: center;
    margin-top: calc(30px * var(--ratio));
    position: relative;
    z-index: 1;
}

.unicorn .face .pink {
    z-index: 2;
    position: relative;
    width: calc(80px * var(--ratio));
    height: calc(85px * var(--ratio));
    background-color: var(--pink-light);
    border-radius: calc(20px * var(--ratio)) calc(8px * var(--ratio)) calc(8px * var(--ratio)) calc(20px * var(--ratio));
}

.unicorn .face .pink::before {
    content: "";
    position: absolute;
    width: calc(8px * var(--ratio));
    height: calc(8px * var(--ratio));
    background-color: var(--pink-dark);
    border-radius: 50%;
    top: calc(20px * var(--ratio));
    left: calc(10px * var(--ratio));
    box-shadow: calc(25px * var(--ratio)) 0 var(--pink-dark);
}

.unicorn .face .pink::after {
    content: "";
    position: absolute;
    width: calc(55px * var(--ratio));
    height: calc(40px * var(--ratio));
    background-color: var(--pink-dark);
    border-radius: calc(4px * var(--ratio)) calc(4px * var(--ratio)) calc(30px * var(--ratio)) calc(30px * var(--ratio));
    bottom: calc(5px * var(--ratio));
    left: calc(11px * var(--ratio));
}

.unicorn .face .white {
    position: relative;
    width: calc(90px * var(--ratio));
    height: calc(85px * var(--ratio));
    background-color: var(--white-face);
    margin-left: calc(-30px * var(--ratio));
    border-bottom-right-radius: calc(35px * var(--ratio));
    box-shadow: 0 calc(11px * var(--ratio)) var(--white-face-shadow);
}

.unicorn .face .white::before {
    content: "";
    position: absolute;
    width: calc(8px * var(--ratio));
    height: calc(8px * var(--ratio));
    background-color: white;
    border-radius: 50%;
    top: calc(20px * var(--ratio));
    right: calc(30px * var(--ratio));
    box-shadow: calc(3px * var(--ratio)) calc(4px * var(--ratio)) 0 calc(7px * var(--ratio)) var(--purple-eye);
}

.unicorn .face .white::after {
    content: "";
    position: absolute;
    width: calc(14px * var(--ratio));
    height: calc(35px * var(--ratio));
    background-color: var(--pink-dark);
    border-radius: calc(7px * var(--ratio)) calc(7px * var(--ratio)) 0 0;
    top: calc(-35px * var(--ratio));
    right: calc(4px * var(--ratio));
    box-shadow: 0 0 0 calc(4px * var(--ratio)) var(--white-face);
}

.unicorn .hair {
    position: relative;
    overflow: hidden;
    width: calc(230px * var(--ratio));
    height: calc(180px * var(--ratio));
    margin-left: calc(-100px * var(--ratio));
    border-top-left-radius: calc(30px * var(--ratio));
}

.unicorn .hair .inner-hair {
    position: relative;
    width: calc(230px * var(--ratio));
    height: calc(18px * var(--ratio));
    border-radius: 0 calc(9px * var(--ratio)) calc(9px * var(--ratio)) 0;
    background: var(--r-red);
    box-shadow: calc(-15px * var(--ratio)) calc(18px * var(--ratio)) var(--r-orange), 
    calc(-15px * var(--ratio)) calc(36px * var(--ratio)) var(--r-yellow),
    calc(-12px * var(--ratio)) calc(54px * var(--ratio)) var(--r-green), 
    calc(-15px * var(--ratio)) calc(72px * var(--ratio)) var(--r-blue), 
    calc(-8px * var(--ratio)) calc(90px * var(--ratio)) var(--r-purple),
    calc(-15px * var(--ratio)) calc(108px * var(--ratio)) var(--r-pink), 
    calc(-6px * var(--ratio)) calc(126px * var(--ratio)) var(--r-red), 
    calc(-15px * var(--ratio)) calc(144px * var(--ratio)) var(--r-orange),
    calc(-8px * var(--ratio)) calc(162px * var(--ratio)) var(--r-yellow), 
    calc(-8px * var(--ratio)) calc(180px * var(--ratio)) var(--r-green);
    animation: hair 2s linear infinite;
}

.unicorn .hair .inner-hair::after {
    content: "";
    position: absolute;
    width: calc(50px * var(--ratio));
    height: calc(18px * var(--ratio));
    border-radius: 9px;
    right: 0px;
    box-shadow: calc(-12px * var(--ratio)) calc(18px * var(--ratio)) var(--blue-bg), 
    calc(13px * var(--ratio)) calc(54px * var(--ratio)) var(--blue-bg), 
    calc(-6px * var(--ratio)) calc(90px * var(--ratio)) var(--blue-bg),
    calc(14px * var(--ratio)) calc(126px * var(--ratio)) var(--blue-bg), 
    calc(-7px * var(--ratio)) calc(162px * var(--ratio)) var(--blue-bg);
}

.unicorn .neck {
    position: relative;
    width: calc(90px * var(--ratio));
    height: calc(50px * var(--ratio));
    background-color: var(--white-face);
    margin-left: calc(-10px * var(--ratio));
    margin-top: calc(-95px * var(--ratio));
}

.unicorn .body {
    display: flex;
}

.unicorn .main {
    position: relative;
    width: calc(300px * var(--ratio));
    height: calc(150px * var(--ratio));
    left: calc(200px * var(--ratio));
    background: var(--white-face);
    background: radial-gradient(
        circle at calc(250px * var(--ratio)) 65%,
        #fff 0%,
        #fff calc(70px * var(--ratio)),
        var(--white-face) calc(71px * var(--ratio))
    );
    border-bottom-left-radius: calc(50px * var(--ratio));
    border-bottom-right-radius: calc(75px * var(--ratio));
    border-top-right-radius: calc(75px * var(--ratio));
}

.unicorn .main::after {
    content: "";
    position: absolute;
    width: calc(40px * var(--ratio));
    height: calc(40px * var(--ratio));
    left: calc(70px * var(--ratio));
    top: calc(-20px * var(--ratio));
    border-bottom-left-radius: calc(60px * var(--ratio));
    border-bottom: calc(20px * var(--ratio)) solid var(--white-face);
    border-left: calc(20px * var(--ratio)) solid var(--white-face);
}

.unicorn .main::before {
    content: "";
    position: absolute;
    width: calc(20px * var(--ratio));
    height: calc(70px * var(--ratio));
    left: calc(-20px * var(--ratio));
    top: calc(-20px * var(--ratio));
    background-color: var(--blue-bg);
}

.unicorn .tail {
    position: relative;
    width: calc(200px * var(--ratio));
    height: calc(18px * var(--ratio));
    z-index: -1;
    border-radius: 0 calc(9px * var(--ratio)) calc(9px * var(--ratio)) 0;
    left: calc(100px * var(--ratio));
    top: calc(20px * var(--ratio));
    background: var(--r-red);
    box-shadow: 
        0 calc(18px * var(--ratio)) var(--r-orange), 
        calc(60px * var(--ratio)) calc(36px * var(--ratio)) var(--r-yellow), 
        0 calc(54px * var(--ratio)) var(--r-green),
        calc(-20px * var(--ratio)) calc(72px * var(--ratio)) var(--r-blue);
    animation: tail 1.5s linear infinite;
}

.unicorn .tail::after {
    content: "";
    position: absolute;
    width: calc(70px * var(--ratio));
    height: calc(18px * var(--ratio));
    border-radius: calc(9px * var(--ratio));
    right: 0px;
    box-shadow: calc(10px * var(--ratio)) calc(18px * var(--ratio)) var(--blue-bg), 
    calc(10px * var(--ratio)) calc(54px * var(--ratio)) var(--blue-bg);
}

.unicorn .tail::before {
    content: "";
    position: absolute;
    width: calc(120px * var(--ratio));
    height: calc(120px * var(--ratio));
    border-radius: 50%;
    background-color: var(--blue-bg);
    bottom: calc(-140px * var(--ratio));
    left: calc(10px * var(--ratio));
    background: linear-gradient(
    220deg,
    var(--blue-bg) 0%,
    var(--blue-bg) 55%,
    transparent 56%);
}

.unicorn .tail .inner-tail {
    position: absolute;
    width: calc(28px * var(--ratio));
    height: calc(28px * var(--ratio)); 
    background-color: transparent;
    border-bottom: calc(10px * var(--ratio)) solid var(--blue-bg);
    border-left: calc(10px * var(--ratio)) solid var(--blue-bg);
    right: calc(58px * var(--ratio));
    top: calc(72px * var(--ratio)); 
    border-bottom-left-radius: calc(30px * var(--ratio));
}

.unicorn .legs {
    position: relative;
    top: calc(-50px * var(--ratio));
}

.unicorn .legs .leg {
    position: absolute;
    width: calc(80px * var(--ratio));
    height: calc(80px * var(--ratio));
    border-bottom: calc(35px * var(--ratio)) solid;
    border-left: calc(35px * var(--ratio)) solid;
    border-bottom-left-radius: calc(80px * var(--ratio));
}

.unicorn .legs .leg::after {
    content: "";
    position: absolute;
    width: calc(20px * var(--ratio));
    height: calc(35px * var(--ratio));
    background-color: var(--red-hoof);
    bottom: calc(-35px * var(--ratio));
    right: calc(-20px * var(--ratio));
    border-bottom-right-radius: calc(17.5px * var(--ratio));
    border-top-right-radius: calc(17.5px * var(--ratio));
}

.unicorn .legs .leg:nth-child(odd) {
    color: var(--grey-leg);
}

.unicorn .legs .leg:nth-child(even) {
    color: #fff;
}

.unicorn .legs .leg:nth-child(1) {
    transform: rotate(90deg);
    top: calc(-30px * var(--ratio));
    left: calc(200px * var(--ratio));
    z-index: -1;
    transform-origin: top left;
    animation: leg1 1s ease-in-out infinite alternate;
}

.unicorn .legs .leg:nth-child(2) {
    transform: rotate(40deg);
    top: calc(-10px * var(--ratio));
    left: calc(250px * var(--ratio));
    transform-origin: top left;
    animation: leg2 1s .15s ease-in-out infinite alternate;
}

.unicorn .legs .leg:nth-child(2)::before {
    content: "";
    position: absolute;
    width: calc(35px * var(--ratio));
    height: calc(20px * var(--ratio));
    background-color: #fff;
    top: calc(-20px * var(--ratio));
    left: calc(-35px * var(--ratio));
    border-top-right-radius: calc(17.5px * var(--ratio));
    border-top-left-radius: calc(17.5px * var(--ratio));
}

.unicorn .legs .leg:nth-child(3) {
    transform: rotate(30deg);
    top: calc(-15px * var(--ratio));
    left: calc(352px * var(--ratio));
    z-index: -1;
    transform-origin: top left;
    animation: leg3 1s ease-in-out infinite alternate;
}

.unicorn .legs .leg:nth-child(4) {
    transform: rotate(60deg);
    top: calc(-5px * var(--ratio));
    left: calc(400px * var(--ratio));
    transform-origin: top left;
    animation: leg4 1s ease-in-out infinite alternate;
}

@keyframes leg1 {
  to {
    transform: rotate(50deg);
  }
}

@keyframes leg2 { 
  to {
    transform: rotate(80deg);
  }
}

@keyframes leg3 { 
  to {
    transform: rotate(70deg);
  }
}

@keyframes leg4 { 
  to {
    transform: rotate(20deg);
  }
}

@keyframes hair {
  
  14% {
    box-shadow: 
      calc(-15px * var(--ratio)) calc(18px * var(--ratio)) var(--r-yellow),
      calc(-15px * var(--ratio)) calc(36px * var(--ratio)) var(--r-green),
      calc(-12px * var(--ratio)) calc(54px * var(--ratio)) var(--r-blue),
      calc(-15px * var(--ratio)) calc(72px * var(--ratio)) var(--r-purple),
      calc(-8px * var(--ratio)) calc(90px * var(--ratio)) var(--r-pink),
      calc(-15px * var(--ratio)) calc(108px * var(--ratio)) var(--r-red),
      calc(-6px * var(--ratio)) calc(126px * var(--ratio)) var(--r-orange),
      calc(-15px * var(--ratio)) calc(144px * var(--ratio)) var(--r-yellow),
      calc(-8px * var(--ratio)) calc(162px * var(--ratio)) var(--r-green),
      calc(-8px * var(--ratio)) calc(180px * var(--ratio)) var(--r-blue);
  }
  
  28% {
    box-shadow: 
      calc(-15px * var(--ratio)) calc(18px * var(--ratio)) var(--r-green),
      calc(-15px * var(--ratio)) calc(36px * var(--ratio)) var(--r-blue),
      calc(-12px * var(--ratio)) calc(54px * var(--ratio)) var(--r-purple),
      calc(-15px * var(--ratio)) calc(72px * var(--ratio)) var(--r-pink),
      calc(-8px * var(--ratio)) calc(90px * var(--ratio)) var(--r-red),
      calc(-15px * var(--ratio)) calc(108px * var(--ratio)) var(--r-orange),
      calc(-6px * var(--ratio)) calc(126px * var(--ratio)) var(--r-yellow),
      calc(-15px * var(--ratio)) calc(144px * var(--ratio)) var(--r-green),
      calc(-8px * var(--ratio)) calc(162px * var(--ratio)) var(--r-blue),
      calc(-8px * var(--ratio)) calc(180px * var(--ratio)) var(--r-purple);
  }
  
  42% {
    box-shadow: 
      calc(-15px * var(--ratio)) calc(18px * var(--ratio)) var(--r-blue),
      calc(-15px * var(--ratio)) calc(36px * var(--ratio)) var(--r-purple),
      calc(-12px * var(--ratio)) calc(54px * var(--ratio)) var(--r-pink),
      calc(-15px * var(--ratio)) calc(72px * var(--ratio)) var(--r-red),
      calc(-8px * var(--ratio)) calc(90px * var(--ratio)) var(--r-orange),
      calc(-15px * var(--ratio)) calc(108px * var(--ratio)) var(--r-yellow),
      calc(-6px * var(--ratio)) calc(126px * var(--ratio)) var(--r-green),
      calc(-15px * var(--ratio)) calc(144px * var(--ratio)) var(--r-blue),
      calc(-8px * var(--ratio)) calc(162px * var(--ratio)) var(--r-purple),
      calc(-8px * var(--ratio)) calc(180px * var(--ratio)) var(--r-pink);
  }
  
  56% {
    box-shadow: 
      calc(-15px * var(--ratio)) calc(18px * var(--ratio)) var(--r-purple),
      calc(-15px * var(--ratio)) calc(36px * var(--ratio)) var(--r-pink),
      calc(-12px * var(--ratio)) calc(54px * var(--ratio)) var(--r-red),
      calc(-15px * var(--ratio)) calc(72px * var(--ratio)) var(--r-orange),
      calc(-8px * var(--ratio)) calc(90px * var(--ratio)) var(--r-yellow),
      calc(-15px * var(--ratio)) calc(108px * var(--ratio)) var(--r-green),
      calc(-6px * var(--ratio)) calc(126px * var(--ratio)) var(--r-blue),
      calc(-15px * var(--ratio)) calc(144px * var(--ratio)) var(--r-purple),
      calc(-8px * var(--ratio)) calc(162px * var(--ratio)) var(--r-pink),
      calc(-8px * var(--ratio)) calc(180px * var(--ratio)) var(--r-red);
  }

  70% {
    box-shadow: 
      calc(-15px * var(--ratio)) calc(18px * var(--ratio)) var(--r-pink),
      calc(-15px * var(--ratio)) calc(36px * var(--ratio)) var(--r-red),
      calc(-12px * var(--ratio)) calc(54px * var(--ratio)) var(--r-orange),
      calc(-15px * var(--ratio)) calc(72px * var(--ratio)) var(--r-yellow),
      calc(-8px * var(--ratio)) calc(90px * var(--ratio)) var(--r-green),
      calc(-15px * var(--ratio)) calc(108px * var(--ratio)) var(--r-blue),
      calc(-6px * var(--ratio)) calc(126px * var(--ratio)) var(--r-purple),
      calc(-15px * var(--ratio)) calc(144px * var(--ratio)) var(--r-pink),
      calc(-8px * var(--ratio)) calc(162px * var(--ratio)) var(--r-red),
      calc(-8px * var(--ratio)) calc(180px * var(--ratio)) var(--r-orange);
  }
  
  85% {
    box-shadow: 
      calc(-15px * var(--ratio)) calc(18px * var(--ratio)) var(--r-red),
      calc(-15px * var(--ratio)) calc(36px * var(--ratio)) var(--r-orange),
      calc(-12px * var(--ratio)) calc(54px * var(--ratio)) var(--r-yellow),
      calc(-15px * var(--ratio)) calc(72px * var(--ratio)) var(--r-green),
      calc(-8px * var(--ratio)) calc(90px * var(--ratio)) var(--r-blue),
      calc(-15px * var(--ratio)) calc(108px * var(--ratio)) var(--r-purple),
      calc(-6px * var(--ratio)) calc(126px * var(--ratio)) var(--r-pink),
      calc(-15px * var(--ratio)) calc(144px * var(--ratio)) var(--r-red),
      calc(-8px * var(--ratio)) calc(162px * var(--ratio)) var(--r-orange),
      calc(-8px * var(--ratio)) calc(180px * var(--ratio)) var(--r-yellow);
  }
  
  100% {
    box-shadow: 
      calc(-15px * var(--ratio)) calc(18px * var(--ratio)) var(--r-orange), 
      calc(-15px * var(--ratio)) calc(36px * var(--ratio)) var(--r-yellow),
      calc(-12px * var(--ratio)) calc(54px * var(--ratio)) var(--r-green), 
      calc(-15px * var(--ratio)) calc(72px * var(--ratio)) var(--r-blue), 
      calc(-8px * var(--ratio)) calc(90px * var(--ratio)) var(--r-purple),
      calc(-15px * var(--ratio)) calc(108px * var(--ratio)) var(--r-pink), 
      calc(-6px * var(--ratio)) calc(126px * var(--ratio)) var(--r-red), 
      calc(-15px * var(--ratio)) calc(144px * var(--ratio)) var(--r-orange),
      calc(-8px * var(--ratio)) calc(162px * var(--ratio)) var(--r-yellow), 
      calc(-8px * var(--ratio)) calc(180px * var(--ratio)) var(--r-green);
  }
}

@keyframes tail {
  20% {
    background: var(--r-orange);
    box-shadow:
      0 calc(18px * var(--ratio)) var(--r-yellow),
      calc(60px * var(--ratio)) calc(36px * var(--ratio)) var(--r-green), 
      0 calc(54px * var(--ratio)) var(--r-blue),
      calc(-20px * var(--ratio)) calc(72px * var(--ratio)) var(--r-red);
  }
  
  40% {
    background: var(--r-yellow);
    box-shadow:
      0 calc(18px * var(--ratio)) var(--r-green),
      calc(60px * var(--ratio)) calc(36px * var(--ratio)) var(--r-blue), 
      0 calc(54px * var(--ratio)) var(--r-red),
      calc(-20px * var(--ratio)) calc(72px * var(--ratio)) var(--r-orange);
  }
  
  60% {
    background: var(--r-green);
    box-shadow:
      0 calc(18px * var(--ratio)) var(--r-blue),
      calc(60px * var(--ratio)) calc(36px * var(--ratio)) var(--r-red),
      0 calc(54px * var(--ratio)) var(--r-orange),
      calc(-20px * var(--ratio)) calc(72px * var(--ratio)) var(--r-yellow);
  }
  
  80% {
    background: var(--r-blue);
    box-shadow:
      0 calc(18px * var(--ratio)) var(--r-red),
      calc(60px * var(--ratio)) calc(36px * var(--ratio)) var(--r-orange),
      0 calc(54px * var(--ratio)) var(--r-yellow),
      calc(-20px * var(--ratio)) calc(72px * var(--ratio)) var(--r-green);
  }
  
}

@keyframes rotate{
  100%{
    transform: rotate(1turn);
  }
}