/* ------------------------------------------------------
			Main Style Stylesheet
			Project :       Custom Ckeckbox Css
			Version :       0.1
			Author :        Mohamed Yousef
			Primary use :   All purposes
------------------------------------------------------ */

/* ------------------------------------------------------
   body
	+ STYLE_1
	+ STYLE_2
------------------------------------------------------ */

/*===== Import Css Files =====*/
/*@import "style_1.css";*/


/*===== Main Style =====*/
html,body{
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* body-style */
body {
  position: relative;
  background: rgba(4, 16, 75, .3);
  color: rgba(4, 16, 75, 1);
}

body::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 50%;
  border-radius: 100%;
  bottom: -50%;
  left: 25%;
  box-shadow: 0 150px 800px rgb(8, 32, 86);
  transform: rotate(-180deg);
}

body::after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 100%;
  top: -50%;
  left: 25%;
  box-shadow: 0 150px 300px rgba(4, 16, 75, 1);
  animation: animate_1 12s infinite;
}

h1 { font-family: "Arial"; font-weight: 600; display: block; height: 50px; width: 260px; margin: auto; font-size: 40px; color: yellow; text-align: center; position: absolute; left: calc(50% - 130px); top: calc(50vh - 25px); text-shadow: 2px 3px 10px rgba(0,0,0,.3); }
h2 { font-family: "Arial"; font-weight: 400; display: block; height: 50px; width: 260px; margin: auto; font-size: 20px; color: #fff; text-align: center; position: absolute; left: calc(50% - 130px); top: calc(50vh + 40px); letter-spacing: .075em; }

.c1 { color: #000; }
.c2 { color: red; }
/* gradient-bg-style */
.gradient-bg::before {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;
  border-radius: 100%;
  top: 0%;
  left: -50%;
  box-shadow: 0 0 500px 450px rgba(14, 76, 142, 1);
  animation: animate_2 11s infinite;
}

.gradient-bg::after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;
  border-radius: 100%;
  top: 0%;
  right: -50%;
  bottom: -1000px;
  box-shadow: 0 0 500px 450px rgba(93, 248, 240, 1);
  animation: animate_3 10s infinite;
}

/* animate-1 */
@keyframes animate_1 {
  25% {
	box-shadow: 0 150px 300px rgba(4, 16, 75, 1);
  }

  50% {
	box-shadow: 0 150px 300px rgba(14, 76, 142, 1);
  }

  75% {
	box-shadow: 0 150px 300px rgba(93, 248, 240, 1);
  }

  100% {
	box-shadow: 0 150px 300px rgba(4, 16, 75, 1);
  }
}

@-webkit-keyframes animate_1 {
  25% {
	box-shadow: 0 150px 300px rgba(4, 16, 75, 1);
  }

  50% {
	box-shadow: 0 150px 300px rgba(14, 76, 142, 1);
  }

  75% {
	box-shadow: 0 150px 300px rgba(93, 248, 240, 1);
  }

  100% {
	box-shadow: 0 150px 300px rgba(4, 16, 75, 1);
  }
}

/* animate-2 */
@keyframes animate_2 {
  25% {
	box-shadow: 0 0 500px 450px rgba(14, 76, 142, 1);
  }

  50% {
	box-shadow: 0 0 500px 450px rgba(93, 248, 240, 1);
  }

  75% {
	box-shadow: 0 0 500px 450px rgba(86, 148, 243, 0.7);
  }

  100% {
	box-shadow: 0 0 500px 450px rgba(14, 76, 142, 1);
  }
}

@-webkit-keyframes animate_2 {
  25% {
	box-shadow: 0 0 500px 450px rgba(14, 76, 142, 1);
  }

  50% {
	box-shadow: 0 0 500px 450px rgba(93, 248, 240, 1);
  }

  75% {
	box-shadow: 0 0 500px 450px rgba(86, 148, 243, 0.7);
  }

  100% {
	box-shadow: 0 0 500px 450px rgba(14, 76, 142, 1);
  }
}

/* animate-3 */
@keyframes animate_3 {
  25% {
	box-shadow: 0 0 500px 450px rgba(93, 248, 240, 1);
  }

  50% {
	box-shadow: 0 0 500px 450px rgba(86, 148, 243, 0.7);
  }

  75% {
	box-shadow: 0 0 500px 450px rgba(14, 76, 142, 1);
  }

  100% {
	box-shadow: 0 0 500px 450px rgba(93, 248, 240, 1);
  }
}

@-webkit-keyframes animate_3 {
  25% {
	box-shadow: 0 0 500px 450px rgba(93, 248, 240, 1);
  }

  50% {
	box-shadow: 0 0 500px 450px rgba(86, 148, 243, 0.7);
  }

  75% {
	box-shadow: 0 0 500px 450px rgba(14, 76, 142, 1);
  }

  100% {
	box-shadow: 0 0 500px 450px rgba(93, 248, 240, 1);
  }
}