/******************************************************************************************************************
global config
******************************************************************************************************************/

:root {
  --blue: #008ac3; /* rgb(0, 183, 195)*/
  --gold: #ffd700; /* rgb(255,215,0) */
  --purple: #48005f;/*rgb(72,0,95)*/
}

* {
  background-color:  black;
}

/******************************************************************************************************************
 header footer and main genral config
******************************************************************************************************************/

.header{
  max-height: 5rem;
  background-color: var(--gold);
  background-image: linear-gradient(90deg, var(--gold), var(--gold), white, white, var(--gold), var(--gold), var(--gold), var(--purple));
  display: flex;
}

.footer {
  position: sticky;
  min-height: 5rem;
  background-image: linear-gradient(145deg, var(--purple), var(--blue), var(--blue), var(--purple));
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main > img {
  max-width: min(60vw, 50rem );
}

/******************************************************************************************************************
media queries 
******************************************************************************************************************/

@media (width < 992px) {
  .header {
    display: flex;
    justify-content: center; 
    background-image: linear-gradient(90deg, var(--purple), var(--gold), var(--gold), white, white, var(--gold), var(--gold), var(--purple) );
  } 
  .main > img {
    margin-top: clamp(1rem, 5vw, 7rem);
  }
  .footer {
    background-image: linear-gradient(90deg, var(--purple), var(--blue), var(--purple));
  }
}

@media (width < 481px) {
  .header {
    background-image: linear-gradient(90deg, var(--gold), white, white,  var(--gold) );
  }
}

@media (width >= 992px) {
  .main {
  margin-block: 7rem;
  }
  .left {
    margin-left: -2rem;
  }
}

/******************************************************************************************************************
 header logo decorations
******************************************************************************************************************/

.header > img {
  max-height: 5rem;
  padding-inline: 0.5rem;
}

.half-circle {
  width: 3rem;
  height: 6rem;
}
.right {
  border-radius: 0 3rem 3rem 0;
  background-color: black;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
}

.left {
  border-radius:  3rem 0 0 3rem;
  background-color: black;
  margin-top: -0.5rem;
}


/******************************************************************************************************************
 svg animations 
******************************************************************************************************************/

#logo-element {
  animation: fade 1s ease-in;
}

#percentage {
  animation: fade 1.5s 2s ease-in-out 4;
}

@keyframes rotate {
  25%{
    transform: rotate(90deg);
  }
  50%{
    transform: rotate(180deg);
  }
  75%{
    transform: rotate(270deg);
  }
}
#yellow-text {
  opacity: 1;
  animation: fade 2s ease-in;
}

#blue-text {
  opacity: 1;
  animation-name: fade;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 5s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}