html {
   height: 100vh;
   width: 100vw;
   background-color: skyblue;
   background-image: url("https://pics.freeartbackgrounds.com/fullhd/Beautiful_Sky_Background-802.jpg");
   background-repeat: no-repeat;
   margin: 0px;
}

h1 {
   margin-top: 0px;
   margin-bottom: 20px;
}

.para {
   margin-top: 0px;
   font-family: "Zeyada", cursive;
   font-size: 3em;
   font-weight: 400;
   text-align: center;
   padding: 0px;

}

#spn1 {
   font-size: 4rem;
   color: white;
   font-family: "Grey Qo", cursive;
   font-weight: 400;
   text-shadow: 5px 5px 10px gray;
}


#saffron {
   height: 100px;
   width: 450px;
   background-color: orange;
}

#white {
   height: 100px;
   width: 450px;
   background-color: white;
}

#green {
   height: 100px;
   width: 450px;
   background-color: green;
}

#wheelOut {
   height: 90px;
   width: 90px;
   border: 5px solid blue;
   border-radius: 50%;
   /* position: relative; */
   /* top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);  */
}

.spoke {
   height: 0px;
   width: 45px;
   border: 1px solid blue;
   margin-bottom: 5px;
}

.container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

            
               /* Wheel Spoke rotations */
.spoke {
   position: absolute;
   /* top: 50%;
  left: 50%; */
   width: 45px;
   height: 2px;
   background-color: blue;
   transform-origin: 0 0;
}

.spoke1 {
   transform: rotate(3deg);
   /* position: relative; */
}

.spoke2 {
   transform: rotate(15deg);

}

.spoke3 {
   transform: rotate(30deg);
   /* position: relative; */
}

.spoke4 {
   transform: rotate(45deg);
   /* position: relative; */
}

.spoke5 {
   transform: rotate(65deg);
   /* position: relative; */
}

.spoke6 {
   transform: rotate(85deg);
   /* position: relative; */
}

.spoke7 {
   transform: rotate(105deg);
   /* position: relative; */
}

.spoke8 {
   transform: rotate(120deg);
   /* position: relative; */
}

.spoke9 {
   transform: rotate(135deg);

}

.spoke10 {
   transform: rotate(150deg);
   /* position: relative; */
}

.spoke11 {
   transform: rotate(165deg);
   /* position: relative; */
}

.spoke12 {
   transform: rotate(180deg);
   /* position: relative; */
}

.spoke13 {
   transform: rotate(-15deg);
   /* position: relative; */
}

.spoke14 {
   transform: rotate(-30deg);
   /* position: relative; */
}

.spoke15 {
   transform: rotate(-45deg);

}

.spoke16 {
   transform: rotate(-60deg);
   /* position: relative; */
}

.spoke17 {
   transform: rotate(-75deg);
   /* position: relative; */
}

.spoke18 {
   transform: rotate(-90deg);
   /* position: relative; */
}

.spoke19 {
   transform: rotate(-105deg);
   /* position: relative; */
}

.spoke20 {
   transform: rotate(-120deg);
   /* position: relative; */
}

.spoke21 {
   transform: rotate(-135deg);
   /* position: relative; */
}

.spoke22 {
   transform: rotate(-150deg);
   /* position: relative; */
}

.spoke23 {
   transform: rotate(-165deg);
   /* position: relative; */
}

.spoke24 {
   transform: rotate(-180deg);
   /* position: relative; */
}

         /* -------- end of flag spoke-------- */

                  /* button start */
button {
   padding: 15px;
   border: 2px solid blue;
   border-radius: 25%;
   margin-top: 30px;
}

button:hover {
   background-color: lightblue;
   cursor: pointer;
}

button {
   box-shadow: 5px 5px 10px gray;
}
               /* button end */


/* -------- animation for the flag -------- */
@keyframes flagWave {
   0% {
      transform: translateX(0);
   }

   50% {
      transform: translateX(10px);
   }

   100% {
      transform: translateX(0);
   }
}

#saffron {
   animation: flagWave 3s ease-in-out infinite;
}

#white {
   animation: flagWave 3s ease-in-out infinite;
   animation-delay: 0.5s;
}

#green {
   animation: flagWave 3s ease-in-out infinite;
   animation-delay: 1s;
}


         /* FOOTER STYLING */

footer {
   text-align: right;
   box-shadow: 5px 5px 10px gray;
   text-shadow: 5px 5px 10px gray;
   margin-top: 25px;
   
}