* {
  font-family: Arial, Verdana, sans-serif;
}

h1 {
  font-family: "Courier New", monospace;
}

i {
  color: green;
  /* this is how Cascading works */
  color: red;
}

b {
  color: pink;
}

p b {
  color: violet;
  /* !important tag will over write even if Cascading is applied  */
  color: blue !important;
}

p#intro {
  font-size: 100%;
}

p {
  font-size: 75%;
}

/* **************************** 239 INTRODUCING CSS ***************************************** */

/* Body tag will applied on all the css */
body {
  font-family: Arial, Verdana, sans-serif;
  color: #665544;
  padding: 10px;
}

.page {
  border: 1px solid #665544;
  background-color: #efefef;
  padding: inherit;
}

/* **************************** 240 INTRODUCING CSS ***************************************** */
.black {
  position: relative;
  width: 320px;
  height: 220px;
  margin-left: 15px;
  color: white;
  background-color: #000; /* Black background */
  /* border-radius: 40%; Increased radius for a more rounded corner */
  overflow: hidden;
  padding: 2px;
  border-radius: 20px;
}

.glow {
  margin: 10px;
  position: absolute;
  top: 300px;
  left: 150px;
  width: 350px;
  height: 250px;
  padding: 10px;
  border-radius: 20px;

  background: linear-gradient(
    90deg,
    #ca2639,
    /* Dark Bright Pink */ #ff3737,
    /* Dark Bright Orange */ #ffff33,
    /* Dark Bright Yellow */ #33cc33,
    /* Dark Bright Green */ #3333ff,
    /* Dark Bright Blue */ #7a288a /* Dark Bright Purple */
  );
  background-size: 400%;
  animation: animate 20s linear infinite;
}

.glow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: blur(40deg);
  z-index: -1;
}

@keyframes animate {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 400% 0;
  }
}