@import url("https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap");
body {
  --x-offset: 0;
  --y-offset: 0;
  align-items: center;
  display: flex;
  font-family: "Permanent Marker", cursive;
  justify-content: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.container {
  align-items: center;
  clip-path: polygon(
    18.1802% 81.819806%,
    15.09109% 78.402134%,
    12.41386% 74.76054%,
    10.14851% 70.927015%,
    8.29505% 66.933545%,
    6.85347% 62.81212%,
    5.82376% 58.594728%,
    5.20594% 54.313359%,
    5% 50.000002%,
    5.20594% 45.686644%,
    5.82376% 41.405275%,
    6.85347% 37.187884%,
    8.29505% 33.066458%,
    10.14851% 29.072988%,
    12.41386% 25.239462%,
    15.09109% 21.597869%,
    18.1802% 18.180196%,
    21.59787% 15.091087%,
    25.23946% 12.41386%,
    29.07299% 10.148514%,
    33.06646% 8.2950496%,
    37.18788% 6.853466%,
    41.40527% 5.823763%,
    45.68664% 5.2059419%,
    50% 5.0000005%,
    54.31336% 5.2059419%,
    58.59473% 5.8237637%,
    62.81212% 6.8534667%,
    66.93354% 8.2950502%,
    70.92701% 10.148515%,
    74.76054% 12.413861%,
    78.40213% 15.091088%,
    81.81981% 18.180197%,
    84.90891% 21.597869%,
    87.58614% 25.239463%,
    89.85149% 29.072989%,
    91.70495% 33.066459%,
    93.14653% 37.187884%,
    94.17624% 41.405275%,
    94.79406% 45.686643%,
    95% 50.000002%,
    94.79406% 54.313359%,
    94.17624% 58.594728%,
    93.14653% 62.812118%,
    91.70495% 66.933544%,
    89.85148% 70.927014%,
    87.58614% 74.76054%,
    84.90891% 78.402134%,
    81.8198% 81.819805%,
    78.40213% 84.908913%,
    74.76054% 87.58614%,
    70.92701% 89.851486%,
    66.93354% 91.704951%,
    62.81212% 93.146535%,
    58.59473% 94.176238%,
    54.31336% 94.794059%,
    50% 95%,
    45.68664% 94.794059%,
    41.40528% 94.176238%,
    37.18788% 93.146535%,
    33.06646% 91.704952%,
    29.07299% 89.851487%,
    25.23946% 87.586141%,
    21.59787% 84.908914%
  );
  -webkit-clip-path: polygon(
    18.1802% 81.819806%,
    15.09109% 78.402134%,
    12.41386% 74.76054%,
    10.14851% 70.927015%,
    8.29505% 66.933545%,
    6.85347% 62.81212%,
    5.82376% 58.594728%,
    5.20594% 54.313359%,
    5% 50.000002%,
    5.20594% 45.686644%,
    5.82376% 41.405275%,
    6.85347% 37.187884%,
    8.29505% 33.066458%,
    10.14851% 29.072988%,
    12.41386% 25.239462%,
    15.09109% 21.597869%,
    18.1802% 18.180196%,
    21.59787% 15.091087%,
    25.23946% 12.41386%,
    29.07299% 10.148514%,
    33.06646% 8.2950496%,
    37.18788% 6.853466%,
    41.40527% 5.823763%,
    45.68664% 5.2059419%,
    50% 5.0000005%,
    54.31336% 5.2059419%,
    58.59473% 5.8237637%,
    62.81212% 6.8534667%,
    66.93354% 8.2950502%,
    70.92701% 10.148515%,
    74.76054% 12.413861%,
    78.40213% 15.091088%,
    81.81981% 18.180197%,
    84.90891% 21.597869%,
    87.58614% 25.239463%,
    89.85149% 29.072989%,
    91.70495% 33.066459%,
    93.14653% 37.187884%,
    94.17624% 41.405275%,
    94.79406% 45.686643%,
    95% 50.000002%,
    94.79406% 54.313359%,
    94.17624% 58.594728%,
    93.14653% 62.812118%,
    91.70495% 66.933544%,
    89.85148% 70.927014%,
    87.58614% 74.76054%,
    84.90891% 78.402134%,
    81.8198% 81.819805%,
    78.40213% 84.908913%,
    74.76054% 87.58614%,
    70.92701% 89.851486%,
    66.93354% 91.704951%,
    62.81212% 93.146535%,
    58.59473% 94.176238%,
    54.31336% 94.794059%,
    50% 95%,
    45.68664% 94.794059%,
    41.40528% 94.176238%,
    37.18788% 93.146535%,
    33.06646% 91.704952%,
    29.07299% 89.851487%,
    25.23946% 87.586141%,
    21.59787% 84.908914%
  );
  display: flex;
  justify-content: center;
  height: 100vmin;
  max-height: 440px;
  max-width: 440px;
  position: relative;
  transition: -webkit-clip-path 500ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: clip-path 500ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: clip-path 500ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-clip-path 500ms cubic-bezier(0.23, 1, 0.32, 1);
  width: 100vmin;
}
.slide {
  height: 100%;
  position: absolute;
  transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1);
  width: 100%;
}
.line {
  color: white;
  font-size: 14vmin;
  height: 14vmin;
  line-height: 14vmin;
  padding: 0 25vmin;
  position: absolute;
  overflow: hidden;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -moz-user-select: none;
  white-space: nowrap;
}
.line-below {
  color: black;
}
.line1 {
  -webkit-transform: translateX(var(--x-offset))
    translateY(calc(var(--y-offset) - 9vmin));
          transform: translateX(var(--x-offset))
    translateY(calc(var(--y-offset) - 9vmin));
}
.line2 {
  -webkit-transform: translateX(var(--x-offset))
    translateY(calc(var(--y-offset) + 9vmin));
          transform: translateX(var(--x-offset))
    translateY(calc(var(--y-offset) + 9vmin));
}
.inner {
  transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1);
}
.inner2 {
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.active .container {
  clip-path: polygon(
    10% 90%,
    10% 85%,
    10% 80%,
    10% 75%,
    10% 70%,
    10% 65%,
    10% 60%,
    10% 55%,
    10% 50%,
    10% 45%,
    10% 40%,
    10% 35%,
    10% 30%,
    10% 25%,
    10% 20%,
    10% 15%,
    10% 10%,
    10.21529% 7.5202%,
    10.52086% 6.6486458%,
    10.99077% 5.9901778%,
    11.64935% 5.5204373%,
    12.52087% 5.2150667%,
    13.62966% 5.049707%,
    15% 5%,
    19.4812% 6.718658%,
    23.64373% 8.6949807%,
    28.81458% 11.263077%,
    34.78905% 14.308281%,
    41.36244% 17.715926%,
    48.33002% 21.371346%,
    55.4871% 25.159873%,
    62.62895% 28.966842%,
    69.55087% 32.677586%,
    76.04814% 36.177438%,
    81.91606% 39.351732%,
    86.94992% 42.085802%,
    90.945% 44.264981%,
    95% 46.5%,
    96.53995% 48.032443%,
    96.92916% 48.984151%,
    97.06228% 49.989597%,
    96.93761% 50.996343%,
    96.55347% 51.951951%,
    95% 53.5%,
    90.93091% 55.742984%,
    86.93145% 57.9245%,
    81.89476% 60.659972%,
    76.02537% 63.834855%,
    69.52782% 67.334606%,
    62.60663% 71.044679%,
    55.46633% 74.85053%,
    48.31146% 78.637615%,
    41.34655% 82.291388%,
    34.77613% 85.697306%,
    28.80473% 88.740824%,
    23.63689% 91.307396%,
    19.47713% 93.28248%,
    15% 95%,
    13.63176% 94.947634%,
    12.52396% 94.775816%,
    11.65257% 94.462466%,
    10.99352% 93.985508%,
    10.52279% 93.322862%,
    10.21632% 92.452447%
  );
  -webkit-clip-path: polygon(
    10% 90%,
    10% 85%,
    10% 80%,
    10% 75%,
    10% 70%,
    10% 65%,
    10% 60%,
    10% 55%,
    10% 50%,
    10% 45%,
    10% 40%,
    10% 35%,
    10% 30%,
    10% 25%,
    10% 20%,
    10% 15%,
    10% 10%,
    10.21529% 7.5202%,
    10.52086% 6.6486458%,
    10.99077% 5.9901778%,
    11.64935% 5.5204373%,
    12.52087% 5.2150667%,
    13.62966% 5.049707%,
    15% 5%,
    19.4812% 6.718658%,
    23.64373% 8.6949807%,
    28.81458% 11.263077%,
    34.78905% 14.308281%,
    41.36244% 17.715926%,
    48.33002% 21.371346%,
    55.4871% 25.159873%,
    62.62895% 28.966842%,
    69.55087% 32.677586%,
    76.04814% 36.177438%,
    81.91606% 39.351732%,
    86.94992% 42.085802%,
    90.945% 44.264981%,
    95% 46.5%,
    96.53995% 48.032443%,
    96.92916% 48.984151%,
    97.06228% 49.989597%,
    96.93761% 50.996343%,
    96.55347% 51.951951%,
    95% 53.5%,
    90.93091% 55.742984%,
    86.93145% 57.9245%,
    81.89476% 60.659972%,
    76.02537% 63.834855%,
    69.52782% 67.334606%,
    62.60663% 71.044679%,
    55.46633% 74.85053%,
    48.31146% 78.637615%,
    41.34655% 82.291388%,
    34.77613% 85.697306%,
    28.80473% 88.740824%,
    23.63689% 91.307396%,
    19.47713% 93.28248%,
    15% 95%,
    13.63176% 94.947634%,
    12.52396% 94.775816%,
    11.65257% 94.462466%,
    10.99352% 93.985508%,
    10.52279% 93.322862%,
    10.21632% 92.452447%
  );
}
.active .slide:nth-child(2) {
  opacity: 0;
}
.active .inner {
  opacity: 0;
}
.active .inner2 {
  opacity: 1;
}