html{
    background-image: url("https://codehs.com/uploads/bc8f3d87c0d95eed22cb2de110a325f6"), url("https://static.vecteezy.com/system/resources/thumbnails/017/128/585/small/green-grass-texture-design-ideal-for-wallpaper-vector.jpg");
    background-size:1920px, 300px;
    width:auto;
    
  
}

body{
    
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    text-shadow:#FFFFFF 1px 1px 0px;
}
h1{
    font-size:40px;
}
h2{
    font-size:28px;
}

@keyframes petition{
    
/*    0%{background-color:#00FF00;}

    50%{background-color:#FFA500;}
    
    100%{background-color:#00FF00;}
    */
}

@keyframes petitionspin{
   from{rotate:-2deg;}
    to{rotate: 2deg;}
    
}

@keyframes petspin{
    50%{rotate:0deg;}
    55%{rotate:-20deg;}
    65%{rotate:10deg;}
    70%{rotate:0deg;}
}
a{
  
}
button{
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    font-size:20px;
    color:black;
    
   display:inline;
   float:right; 
   margin-right:250px;
   background-color:#FFFFFF;
   
   
   animation-name:petition,petspin;
   animation-duration:8s,10s;
   animation-iteration-count:infinite,infinite;
   animation-timing-function:ease,ease;
  
   

   
}
button:hover{
   animation-name:petitionspin;
   animation-duration:0.1s;
   animation-delay:0s;
   animation-iteration-count:infinite;
   animation-timing-function:steps;
}


p{
    
    border-radius:5px;
    font-size:20px;
    
}
/*                   */
ul{
    background-image: url("https://img.freepik.com/free-photo/gray-plain-concrete-textured-background_53876-128585.jpg");
    background-size:125%;
    border-radius:3px;
    font-size:20px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:5px;
    
    
}
div{
    width:45%;
    padding:20px;
    display:block;
    

   
}
img{
    height:200px;
    margin-left:25px;
    margin-right:25px;
    
    border-color: gray;
    border-style:solid;
    border-width:5px;
    border-radius:3px;
    
}
.examples{
   width:100%;
   display: flex;
   flex-direction:row;
  
   
}
.exampletext{
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4wYpfwJaRXgbwyf4gBZVyfHFe-m3bOD9NAVD5Xq8q95HsbfCi434YpRSGDyyDWuQHzf8&usqp=CAU");
    border-radius:3px;
    width:60%;
    
   
}
.examples p{
    width:250px;
    padding-left:25px;
    padding-right:25px;
}