style.css

.bg-unique,
header {
  background-image: url("https://github.blog/wp-content/uploads/2020/12/2-2.png?resize=1024%2C613");
  background-size: cover;
  background-repeat: no-repeat;
}
.bg-custom,
footer {
  background-image: url("https://github.blog/wp-content/uploads/2020/12/102393310-07478b80-3f8d-11eb-84eb-392d555ebd29.png?fit=1200%2C630");
  background-size: cover;
  background-repeat: no-repeat;
}

.development-notice {
  background-color: #ffcc00;
  color: #000;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
}
 
/* Custom styles for centering content */

/* @keyframes moveAndRotate {
  0% {
    transform: translateY(0) translateX(0) rotate(10deg);
  }
  25% {
    transform: translateY(-20vh) translateX(25vw) rotate(20deg);
  }
  50% {
    transform: translateY(-40vh) translateX(65vw) rotate(30deg);
  }
  75% {
    transform: translateY(25vh) translateX(65vw) rotate(200deg);
  }
  100% {
    transform: translateY(10) translateX(10) rotate(300deg);
  }
}

.rocket {
  display: inline-block;
  top: 20;
  position: fixed;
  animation: moveAndRotate 15s linear infinite;
} */
.tech {
  border-color: #af13cb;
}
.blur {
  backdrop-filter: blur(10px);
  background: rgba(86, 206, 239, 0.756);
}

/* Glowing Effects */
.glowing-corners {
  border-radius: 15px;
  box-shadow: 0 0 8px 2px #00fe2f;
  box-shadow: 0 0 10px 2px rgba(114, 170, 165, 0.7),
    0 0 15px 2px rgba(0, 254, 169, 0.5), 0 0 20px 4px rgba(0, 254, 220, 0.3);
  background-color: #b9dddbc7;
}
.bg-custom {
  background-size: cover;
}
#contact div img {
  width: 83%;
}

/* Animated Button */
.animate-effect {
  color: #fff;
  display: grid;
  place-content: center;
  text-shadow: 0 1px 0 #000;
  width: -moz-fit-content; /* for Firefox */
  width: fit-content;
  --border-angle: 0turn;
  --main-bg: conic-gradient(
    from var(--border-angle),
    #213,
    #112 5%,
    #112 60%,
    #213 95%
  );
  border: 2px solid transparent;
  border-radius: 1rem;
  --gradient-border: conic-gradient(
    from var(--border-angle),
    transparent 25%,
    #08f,
    #f03 99%,
    transparent
  );
  animation: bg-spin 3s linear infinite;
  background: var(--main-bg) padding-box, var(--gradient-border) border-box,
    var(--main-bg) border-box;
  background-position: 50%;
}

@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

.animated-button:hover {
  animation-play-state: paused;
}

/* Custom property for --border-angle */
@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

/* Skills Sections HW Fixed */
.skill-100 {
  height: 170px !important;
  width: 100% !important;
}

.circle-motion {
  color: #fff;
  display: grid;
  text-shadow: 0 1px 0 #000;
  --border-angle: 0turn;
  --main-bg: conic-gradient(
    from var(--border-angle),
    #111433,
    #111222 5%,
    #111422 60%,
    #111c33 95%
  );
  border: 2px solid transparent;
  --gradient-border: conic-gradient(
    from var(--border-angle),
    transparent 25%,
    #08f,
    transparent 99%,
    transparent
  );
  animation: bg-spin 3s linear infinite;
  background: var(--main-bg) padding-box, var(--gradient-border) border-box,
    var(--main-bg) border-box;
  background-position: 50%;
}

@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

.resume-button:hover {
  animation-play-state: paused;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

/* For Courses */
.gradient-border-button {
  position: relative;
  display: inline-block;
  padding: 10px 30px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  background-color: #111433;
  overflow: hidden;
  border: 2px solid transparent;
  animation: border-animation 3s linear infinite;
}

@keyframes border-animation {
  0% {
    border-color: transparent;
    transform: scale3d(1, 1, 1);
  }
  50% {
    border-color: #08f;
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    border-color: transparent;
    transform: scale3d(1, 1, 1);
  }
}

/* ?Preloader style */
#preloader {
  background: rgb(28 39 58) url(icons/preloader.gif) no-repeat center center;
  background-size: 30%;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 100;
}