<!-- By Lorenzo Satta Chiris -->

<h2 class="titles">Background animations</h2>
<h3 class="titles" id="smallTitle">Gradient backgrounds</h3>
<div class="bigContainer">
  <div class="container" id="container1">
    1
  </div>
  <div class="container" id="container2">
    2
  </div>
  <div class="container" id="container3">
    3
  </div>
  <div class="container" id="container4">
    4
  </div>
</div>

<hr>

<div class="bigContainer">
  <div class="container" id="container5">
    5
  </div>
  <div class="container" id="container6">
    6
  </div>
  <div class="container" id="container7">
    7
  </div>
  <div class="container" id="container8">
    8
  </div>
</div>

<hr>

<div class="bigContainer">
  <div class="container" id="container9">
    9
  </div>
  <div class="container" id="container10">
    10
  </div>
  <div class="container" id="container11">
    11
  </div>
  <div class="container" id="container12">
    12
  </div>
</div>

<h3 class="titles" id="smallTitle">Rotating Background</h3>
<div class="bigContainer">
  <div class="container" id="container13">
    13
  </div>
  <div class="container" id="container14">
    14
  </div>
  <div class="container" id="container15">
    15
  </div>
  <div class="container" id="container16">
    16
  </div>
</div>

<hr>

<h2 class="titles">Border animations</h2>
<h3 class="titles" id="smallTitle">Border Slow animations</h3>
<div class="bigContainer">
  <div class="containerB" id="containerB1">
    B1
  </div>
  <div class="containerB" id="containerB2">
    B2
  </div>
  <div class="containerB" id="containerB3">
    B3
  </div>
  <div class="containerB" id="containerB4">
    B4
  </div>
</div>

<hr>

<h3 class="titles" id="smallTitle">Quick animations</h3>
<div class="bigContainer">
  <div class="containerB" id="containerB5">
    B5
  </div>
  <div class="containerB" id="containerB6">
    B6
  </div>
  <div class="containerB" id="containerB7">
    B7
  </div>
  <div class="containerB" id="containerB8">
    B8
  </div>
</div>

<hr>

<div class="bigContainer">
  <div class="containerB" id="containerB9">
    B9
  </div>
  <div class="containerB" id="containerB10">
    B10
  </div>
  <div class="containerB" id="containerB11">
    B11
  </div>
  <div class="containerB" id="containerB12">
    B12
  </div>
</div>

<hr>

<h3 class="titles" id="smallTitle">Rotating Borders</h3>

<div class="containerBRotating">
  <div class="circle-wrapper">
    <div class="success circle"></div>
    <div class="icon">B13
    </div>
  </div>

  <hr class="hr">

  <div class="circle-wrapper2">
    <div class="success2 circle2"></div>
    <div class="icon2">B14
    </div>
  </div>

  <hr class="hr">

  <div class="circle-wrapper3">
    <div class="success3 circle3">B15</div>
    <div class="icon3">
    </div>
  </div>

  <hr class="hr">

  <div class="circle-wrapper4">
    <div class="success4 circle4">B16</div>
    <div class="icon4">
    </div>
  </div>
</div>

<div class="containerBRotating">
  <div class="circle-wrapper5">
    <div class="success5 circle5"></div>
    <div class="icon5">B17
    </div>
  </div>

  <hr class="hr">

  <div class="circle-wrapper6">
    <div class="success6 circle6"></div>
    <div class="icon6">B18
    </div>
  </div>

  <hr class="hr">

  <div class="circle-wrapper7">
    <div class="success7 circle7">B19</div>
    <div class="icon7">
    </div>
  </div>

  <hr class="hr">

  <div class="circle-wrapper8">
    <div class="success8 circle8">B20</div>
    <div class="icon8">
    </div>
  </div>
</div>

<div class="info">
  <a href="https://codepen.io/DevLorenzo" target="_blank" class="info1">My profile page</a>
  <a href="https://codepen.io/DevLorenzo/pen/LYRJbVw" target="_blank" class="info2">My most visited Pen</a>
  <a href="https://www.codegrepper.com/app/profile.php?id=182534" target="_blank" class="info3">Grepper profile</a>
</div>

// By Lorenzo Satta Chiris

/* Find quickly an animation with ctrl + f. Search for container + number of the animation you search / For border containers add a B (containerB1) */

@import url("https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,600;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap");

/* Find here a cool list of gradient animated effects (with no JS)*/

/* First Row - Direction -45deg - 4 colors palette */

#container1 {
  /*Cool marine gradient: Grey, blue, violet, grey again */
  background: linear-gradient(
    -45deg,
    #bdc3c7,
    #2c3e50,
    #c33764,
    #1d2671,
    #141e30,
    #6dd5ed
  );
  background-size: 400% 400%;
  animation: backgroundChange0 15s ease infinite;
}

@keyframes backgroundChange0 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#container2 {
  /* fire gradient: red, yellow, orang, red again  */
  color: white;
  background: linear-gradient(
    -45deg,
    #d02090,
    #7c1000,
    #ff4605,
    #ffd729,
    #f8a42f,
    #d3312e,
    #ea0000,
    #50010a
  );
  background-size: 400% 400%;
  animation: backgroundChange1 10s ease infinite;
}

@keyframes backgroundChange1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#container3 {
  /*Green gradient: Violet, green, yellow, aqua*/
  background: linear-gradient(
    -45deg,
    #c0cd50,
    #00f77b,
    #c0cd50,
    #7df502,
    #81cc39,
    #84a470,
    #887ba7,
    #8b52de,
    #4e0169
  );
  background-size: 400% 400%;
  animation: backgroundChange2 7s ease-in infinite;
}

@keyframes backgroundChange2 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#container4 {
  /* Serious gradient: Black and grey*/
  color: whitesmoke;
  background: linear-gradient(
    -45deg,
    #121212,
    #383836,
    #2c3e54,
    #316e83,
    #468590,
    #a8b4b2,
    #a4a4a4,
    #b3bf86
  );
  background-size: 400% 400%;
  animation: backgroundChange3 15s ease infinite;
}

@keyframes backgroundChange3 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Second Row - Direction -90deg - 4 colors palette */

#container5 {
  /*Cool marine gradient: Grey, blue, violet, grey again */
  background: linear-gradient(
    -90deg,
    #bdc3c7,
    #2c3e50,
    #c33764,
    #1d2671,
    #141e30,
    #6dd5ed
  );
  background-size: 400% 400%;
  animation: backgroundChange4 15s ease infinite;
}

@keyframes backgroundChange4 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#container6 {
  /* fire gradient: red, yellow, orang, red again  */
  color: white;
  background: linear-gradient(
    -90deg,
    #d02090,
    #7c1000,
    #ff4605,
    #ffd729,
    #f8a42f,
    #d3312e,
    #ea0000,
    #50010a
  );
  background-size: 400% 400%;
  animation: backgroundChange5 10s ease infinite;
}

@keyframes backgroundChange5 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#container7 {
  /*Green gradient: Violet, green, yellow, aqua*/
  background: linear-gradient(
    -90deg,
    #c0cd50,
    #00f77b,
    #c0cd50,
    #7df502,
    #81cc39,
    #84a470,
    #887ba7,
    #8b52de,
    #4e0169
  );
  background-size: 400% 400%;
  animation: backgroundChange6 7s ease-in infinite;
}

@keyframes backgroundChange6 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#container8 {
  /* Serious gradient: Black*/
  color: whitesmoke;
  background: linear-gradient(
    -90deg,
    #121212,
    #383836,
    #2c3e54,
    #316e83,
    #468590,
    #a8b4b2,
    #a4a4a4,
    #b3bf86
  );
  background-size: 400% 400%;
  animation: backgroundChange7 15s ease infinite;
}

@keyframes backgroundChange7 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Third Row - Direction -90deg - 4 colors palette */

#container9 {
  /*Cool marine gradient: Grey, blue, violet, grey again */
  background: linear-gradient(
    45deg,
    #bdc3c7,
    #2c3e50,
    #c33764,
    #1d2671,
    #141e30,
    #6dd5ed
  );
  background-size: 400% 400%;
  animation: backgroundChange8 15s ease infinite;
}

@keyframes backgroundChange8 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#container10 {
  /* fire gradient: red, yellow, orang, red again  */
  color: white;
  background: linear-gradient(
    45deg,
    #d02090,
    #7c1000,
    #ff4605,
    #ffd729,
    #f8a42f,
    #d3312e,
    #ea0000,
    #50010a
  );
  background-size: 400% 400%;
  animation: backgroundChange9 10s ease infinite;
}

@keyframes backgroundChange9 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#container11 {
  /*Green gradient: Violet, green, yellow, aqua*/
  background: linear-gradient(
    45deg,
    #c0cd50,
    #00f77b,
    #c0cd50,
    #7df502,
    #81cc39,
    #84a470,
    #887ba7,
    #8b52de,
    #4e0169
  );
  background-size: 400% 400%;
  animation: backgroundChange10 7s ease infinite;
}

@keyframes backgroundChange10 {
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#container12 {
  /* Serious gradient: Black*/
  color: whitesmoke;
  background: linear-gradient(
    45deg,
    #121212,
    #383836,
    #2c3e54,
    #316e83,
    #468590,
    #a8b4b2,
    #a4a4a4,
    #b3bf86
  );
  background-size: 400% 400%;
  animation: backgroundChange11 15s ease infinite;
}

@keyframes backgroundChange11 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

// Fourth Row: Rotating Backgrounds - Ypu can easily change colors in background-image, linear-gradient

#container13 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 300%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: backgroundRotate 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(10% - 12px);
    height: calc(10% - 12px);
    background: white;
    border-radius: 5px;
  }
}

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

#container14 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -55%;
    top: -80%;
    width: 300%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: backgroundRotate1 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(0% - 12px);
    height: calc(0% - 12px);
    background: white;
    border-radius: 5px;
  }
}

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

#container15 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -99%;
    width: 300%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: backgroundRotate2 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(0% - 12px);
    height: calc(0% - 12px);
    background: white;
    border-radius: 5px;
  }
}

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

#container16 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -99%;
    width: 300%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: backgroundRotate3 3.5s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(0% - 12px);
    height: calc(0% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes backgroundRotate3 {
  0% {
    transform: translatex(0px, 0px);
  }
  25% {
    transform: translate(100px, 100px);
  }
  50% {
    transform: translate(0px, 100px);
  }
  75% {
    transform: translate(-100px, 100px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

/* Border Animations */

/* First row: Slow animations */

#containerB1 {
  animation: borderSpin0 5s ease infinite;
}

@keyframes borderSpin0 {
  0% {
    border-color: #bdc3c7;
  }
  25% {
    border-color: #2c3e50;
  }
  50% {
    border-position: 100% 50%;
    border-color: #c33764;
  }
  75% {
    border-color: #1d2671;
  }
  90% {
    border-position: 0% 50%;
    border-color: #141e30;
  }
  100% {
    border-position: 0% 50%;
    border-color: #6dd5ed;
  }
}

#containerB2 {
  animation: borderSpin1 5s ease infinite;
}

@keyframes borderSpin1 {
  0% {
    border-color: #d02090;
  }
  25% {
    border-color: #7c1000;
  }
  50% {
    border-position: 100% 50%;
    border-color: #ff4605;
  }
  75% {
    border-color: #f8a42f;
  }
  90% {
    border-position: 0% 50%;
    border-color: #d3312e;
  }
  100% {
    border-position: 0% 50%;
    border-color: #50010a;
  }
}

#containerB3 {
  animation: borderSpin2 5s ease infinite;
}

@keyframes borderSpin2 {
  0% {
    border-color: #c0cd50;
  }
  25% {
    border-position: 100% 75%;
    border-color: #00f77b;
  }
  50% {
    border-position: 75% 50%;
    border-color: #7df502;
  }
  75% {
    border-position: 50% 25%;
    border-color: #81cc39;
  }
  90% {
    border-position: 0% 50%;
    border-color: #887ba7;
  }
  100% {
    border-position: 50% 100%;
    border-color: #4e0169;
  }
}

#containerB4 {
  animation: borderSpin3 5s ease infinite;
}

@keyframes borderSpin3 {
  0% {
    border-color: #121212;
  }
  25% {
    border-position: 100% 75%;
    border-color: #383836;
  }
  50% {
    border-position: 75% 50%;
    border-color: #2c3e54;
  }
  75% {
    border-position: 50% 25%;
    border-color: #468590;
  }
  90% {
    border-position: 0% 50%;
    border-color: #a4a4a4;
  }
  100% {
    border-position: 50% 100%;
    border-color: #b3bf86;
  }
}

/* Second Row: Normal Border Animations (same colors)*/

#containerB5 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

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

#containerB6 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -100%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate1 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

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

#containerB7 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -60%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate2 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10px;
    top: 10px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

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

#containerB8 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 300%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate3 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

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

/* Third Row: Border Animations while playing with colors */

#containerB9 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 80% 80%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#bdc3c7, #bdc3c7),
      linear-gradient(#2c3e50, #2c3e50), linear-gradient(#c33764, #1d2671),
      linear-gradient(#1d2671, #6dd5ed);
    animation: rotate4 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

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

#containerB10 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -75%;
    top: -75%;
    width: 200%;
    height: 200%;
    background-color: #d02090;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 0 100%;
    background-image: linear-gradient(#7c1000, #7c1000),
      linear-gradient(#ff4605, #ffd729), linear-gradient(#f8a42f, #f8a42f),
      linear-gradient(#ea0000, #ea0000), linear-gradient(#50010a, #50010a);
    animation: rotate5 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 10px);
    background: white;
    border-radius: 5px;
  }
}

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

#containerB11 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -60%;
    top: -50%;
    width: 200%;
    height: 250%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#00f77b, #00f77b),
      linear-gradient(#c0cd50, #c0cd50), linear-gradient(#7df502, #81cc39),
      linear-gradient(#84a470, #887ba7), linear-gradient(#8b52de, #4e0169);
    animation: rotate6 4s ease infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10px;
    top: 10px;
    width: calc(90% - 12px);
    height: calc(90% - 12px);
    background: white;
    border-radius: 5px;
  }
}

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

#containerB12 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -100%;
    width: 300%;
    height: 200%;
    background-color: #a4a4a4;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#121212, #121212),
      linear-gradient(#383836, #316e83), linear-gradient(#2c3e54, #468590),
      linear-gradient(#a8b4b2, #b3bf86);
    animation: rotate7 8s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes rotate7 {
  100% {
    transform: rotate(-2turn);
  }
}

/* Fourth Row: Border Animations while playing with colors */

// Rotating Border

// B13

.icon {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin 10s linear infinite;
}

.circle-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.circle-wrapper:hover .circle {
  animation: spin 3s linear infinite;
}

.success {
  background-color: #4bb543;
  border: 2.5px dashed #4bb543;
}

@keyframes spin {
  100% {
    transform: rotateZ(360deg);
  }
}

// B14

.icon2 {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle2 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 70%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin1 10s linear infinite;
}

.circle-wrapper2 {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.circle-wrapper2:hover .circle2 {
  animation: spin1 3s linear infinite;
}

.success2 {
  background-color: red;
  border: 2.5px dashed #4bb543;
}

@keyframes spin1 {
  0% {
    transform: rotateZ(360deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

// B15

.icon3 {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle3 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin2 10s linear infinite;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -100%;
    width: 300%;
    height: 200%;
    background-color: #a4a4a4;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#121212, #121212),
      linear-gradient(#383836, #316e83), linear-gradient(#2c3e54, #468590),
      linear-gradient(#a8b4b2, #b3bf86);
    animation: rotate7 8s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

.circle-wrapper3 {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.success3 {
  background-color: #4bb543;
  border: 2.5px dashed #4bb543;
}

@keyframes spin2 {
  100% {
    transform: rotateZ(-360deg);
  }
}

// B16

.icon4 {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle4 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin3 10s linear infinite;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -60%;
    top: -50%;
    width: 200%;
    height: 250%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#00f77b, #00f77b),
      linear-gradient(#c0cd50, #c0cd50), linear-gradient(#7df502, #81cc39),
      linear-gradient(#84a470, #887ba7), linear-gradient(#8b52de, #4e0169);
    animation: rotate6 4s ease infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10px;
    top: 10px;
    width: calc(90% - 12px);
    height: calc(90% - 12px);
    background: white;
    border-radius: 5px;
  }
}

.circle-wrapper4 {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.success4 {
  background-color: #4bb543;
  border: 2.5px dashed #4bb543;
}

@keyframes spin3 {
  100% {
    transform: rotateZ(-360deg);
  }
}

// B17

.icon5 {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle5 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 80%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin4 10s linear infinite;
  background: linear-gradient(
    45deg,
    #c0cd50,
    #00f77b,
    #c0cd50,
    #7df502,
    #81cc39,
    #84a470,
    #887ba7,
    #8b52de,
    #4e0169
  );
  background-size: 400% 400%;
}

.circle-wrapper5 {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.circle-wrapper5:hover .circle5 {
  animation: spin4 3s linear infinite;
}

.success5 {
  background-color: #4bb543;
  border: 2.5px dashed #4bb543;
}

@keyframes spin4 {
  50% {
    background-position: 100% 50%;
  }
  100% {
    transform: rotateZ(360deg);
    background-position: 0% 50%;
  }
}

//18

.icon6 {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle6 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 70%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin5 10s linear infinite;
  background: linear-gradient(
    45deg,
    #d02090,
    #7c1000,
    #ff4605,
    #ffd729,
    #f8a42f,
    #d3312e,
    #ea0000,
    #50010a
  );
  background-size: 400% 400%;
}

.circle-wrapper6 {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.circle-wrapper6:hover .circle6 {
  animation: spin5 3s linear infinite;
}

.success6 {
  background-color: red;
  border: 2.5px dashed #50010a;
}

@keyframes spin5 {
  0% {
    background-position: 0% 50%;
    transform: rotateZ(360deg);
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
    transform: rotateZ(-360deg);
  }
}

// B19

.icon7 {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle7 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin6 10s linear infinite;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -100%;
    width: 300%;
    height: 200%;
    background-color: #a4a4a4;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#121212, #121212),
      linear-gradient(#383836, #316e83), linear-gradient(#2c3e54, #468590),
      linear-gradient(#a8b4b2, #b3bf86);
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

.circle-wrapper7 {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.success7 {
  background-color: #4bb543;
  border: 2.5px dashed #4bb543;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -55%;
    top: -80%;
    width: 300%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: backgroundRotate1 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(0% - 12px);
    height: calc(0% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes spin6 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
    transform: rotateZ(-360deg);
  }
}

// B20

.icon8 {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle8 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin7 10s linear infinite;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -60%;
    top: -50%;
    width: 200%;
    height: 250%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#00f77b, #00f77b),
      linear-gradient(#c0cd50, #c0cd50), linear-gradient(#7df502, #81cc39),
      linear-gradient(#84a470, #887ba7), linear-gradient(#8b52de, #4e0169);
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10px;
    top: 10px;
    width: calc(90% - 12px);
    height: calc(90% - 12px);
    background: white;
    border-radius: 5px;
  }
}

.circle-wrapper8 {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.success8 {
  background-color: #4bb543;
  border: 2.5px dashed #4bb543;
}

@keyframes spin7 {
  100% {
    transform: rotateZ(-360deg);
  }
}

/* Other Visual stuff */

/* text */
.titles {
  display: flex;
  justify-content: center;
  align-items: center;
  color: blue;
  font-family: "Asap", sans-serif;
  font-size: 40px;
  margin-top: 25px;
  margin-left: 5px;
}

#smallTitle {
  font-size: 35px;
  opacity: 0.8;
}

/* Containers */
.bigContainer {
  display: flex;
  justify-content: center;
}

.bigContainer + hr {
  margin-top: 20px;
  margin-bottom: 20px;
}

.container {
  border: 3px solid blue;
  border-radius: 10px;
  margin-right: 20px;
  padding-top: 35px;
  padding-bottom: 35px;
  width: 380px;
  font-family: "Yusei Magic", sans-serif;
  color: red;
  font-size: 35px;
  text-align: center;
}

.containerB {
  border: 5px solid blue;
  border-radius: 10px;
  margin-right: 20px;
  padding-top: 35px;
  padding-bottom: 35px;
  width: 380px;
  background-color: whitesmoke;
  font-family: "Yusei Magic", sans-serif;
  color: red;
  font-size: 35px;
  text-align: center;
}

.containerBRotating {
  height: 100vh;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -60px;
  margin-top: -200px;
}

.containerBRotating + .containerBRotating {
  margin-top: -300px;
}

.hr {
  margin-left: 50px;
  margin-right: 50px;
  height: 120px;
}

/* Info part and title */

.info {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #2c3e50;
  font-family: "Asap", sans-serif;
  font-size: 35px;
  margin-top: 30px;
  margin-left: 25px;
  text-decoration: none;
}

.info1 {
  border: 1px solid red;
  border-width: 3px;
  border-radius: 50%;
  margin-right: 20px;
  border-right: none;
  padding: 20px;
  color: inherit;
  text-decoration: inherit;
}

.info1:hover {
  color: whitesmoke;
  border-color: #c31432;
  border-width: 8px;
  padding: 25px;
  background: linear-gradient(
    -45deg,
    #bdc3c7,
    #2c3e50,
    #c33764,
    #1d2671,
    #141e30,
    #6dd5ed
  );
  background-size: 400% 400%;
  animation: backgroundChange 15s ease infinite, borderSpin 10s ease infinite;
}

.info2 {
  padding: 2px;
  border: 1px solid red;
  border-width: 3px;
  border-radius: 50%;
  border-left: none;
  border-right: none;
  padding: 20px;
  color: inherit;
  text-decoration: inherit;
}

.info2:hover {
  color: whitesmoke;
  border-color: #c31432;
  border-width: 8px;
  padding: 25px;
  background: linear-gradient(
    -45deg,
    #bdc3c7,
    #2c3e50,
    #c33764,
    #1d2671,
    #141e30,
    #6dd5ed
  );
  background-size: 400% 400%;
  animation: backgroundChange 15s ease infinite, borderSpin 10s ease infinite;
}

.info3 {
  padding: 2px;
  border: 1px solid red;
  border-width: 3px;
  border-left: none;
  border-radius: 50%;
  margin-left: 20px;
  padding: 20px;
  color: inherit;
  text-decoration: inherit;
}

.info3:hover {
  color: whitesmoke;
  border-color: #c31432;
  border-width: 8px;
  padding: 25px;
  background: linear-gradient(
    -45deg,
    #bdc3c7,
    #2c3e50,
    #c33764,
    #1d2671,
    #141e30,
    #6dd5ed
  );
  background-size: 400% 400%;
  animation: backgroundChange 15s ease infinite, borderSpin 10s ease infinite;
}

/* Info animations */

@keyframes backgroundChange {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes borderSpin {
  0% {
    border-color: #c31432;
  }
  50% {
    border-position: 100% 50%;
    border-color: #240b36;
  }
  100% {
    border-position: 0% 50%;
    border-color: #240b36;
  }
}

// By Lorenzo Satta Chiris

// No JS