style.css

/* information */
@import url('https://fonts.googleapis.com/css2?family=Keania+One&family=Montserrat:wght@900&family=Raleway&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.5em;
    overflow-x: hidden;
    }
 :root{
     --color-brand: #C6DCBE;
     --font-bold: 'Montserrat', sans-serif;
     --font-text: 'Raleway', sans-serif;
 }

 body{
     background-color:rgba(256, 256, 0, 0.15);
    
 }

/* header */
 h1{
     text-align: center;
     margin:1em 0.5em 0em 0.5em;
     font-size:3em;
     font-family: 'Keania One', cursive;
     color: black;
     line-height: 1.3em;

 }
h2{
    text-align: center;
    font-size:1.5em;
    font-family: 'Keania One', cursive;
    margin:0em 15% 0.25em 15%;
    color: black;
    line-height: 1.3em;
 
}
#pedar{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
  }
#image1{
    width: 40vw;
    max-width: 350px;
    margin-bottom: 10%;
}
.child2{
   background-color: var(--color-brand);
   position: absolute;
   width: 100%;
   height: 45%;
   display: flex;
   justify-content: center;
   align-items: flex-end;
  }

.image2{
    width: 75%;
    max-width: 600px;
}

#charkha1{
    animation: spinning 3000ms linear infinite;
    transform-origin:center ;
    transform-box: fill-box;
}
#charkha2{
    animation: spinning 3000ms linear infinite;
    transform-origin:center ;
    transform-box: fill-box;
}

@keyframes spinning {
    
    0%{
        transform: rotate(0deg);
    }
    
    25%{
        transform: rotate(-90deg);
    }
    50%{
        transform: rotate(-180deg);
    }
    
    75%{
        transform: rotate(-270deg);
    }
    100%{
        transform: rotate(-360deg);
    }
    
}

#Vector-65{
    transform: translate(-5px, 1px);
  
}


#Vector-53 {
    animation: shift 1s linear infinite;
    transform-origin:center ;
    transform-box: fill-box;
}

@keyframes shift {

    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(0.25deg);
    }
    100%{
        transform: rotate(-0.25deg); 
    }
}

/* main */
article {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 5vw;
    }
.sunglasses-padar{
    position: relative;
   display: flex;
   justify-content: center;
   margin: 1em auto;
}
.sunglasses-child{
    width: 80%;
    max-width: 550px;
}


h3{
    text-align: center;
    font-size: 1.6em;
    border-right: 0.2em solid var(--color-brand);
    border-left: 0.2em solid var(--color-brand);
    margin: 1em 1em 0 1em;
    color: black;
    padding: 1em 0.5em;
    font-family:var(--font-bold) ;
    line-height: 1.6em;

}
.text{
    text-align: justify;
    color: black;
    font-size: 1em;
    font-family: var(--font-text);
    padding: 1em 0.5em;
}

a{
    text-decoration: none;
    color:green;
  
}
/* footer */

footer{
    position: relative;
    display: flex;
    justify-content: center;
    width: 130%;
    
}
.image-footer{
width: 100%;
}
/* responsive */
@media screen and (min-width:550px) {
  
    header{
        position: relative;
    }
    .design-header{
        position: absolute;
        display: flex;
        align-items: center;
        flex-direction: column;
        top: 15%;
        left: 8%;
    }
    h1, h2{
            margin: auto 0;
    }
   
   
   #pedar{
       justify-content: flex-end;
   }

    article{
        flex-direction: row;
    }
    .right, .left{
        width: 45%;
        margin: auto 2%;
        max-width: 300px;
    }
    footer{
        width: 100%;
        max-height: 250px;

}
.image-footer{
    object-fit: cover;
}
     
}