body{
    background-color:#C4E0E5;
}
h1{
    
    
    font-size: 60px;
    
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    
 color:white;
   
    text-align: center;  
    padding-top:10px;
       
text-shadow: 3px 3px 5px black, 0 0 30px #0750a3cc,0 0 15px #0c569b77;
    
    animation-name: move;
    
        animation-duration: 4s;
    
        animation-iteration-count: 2;
}
h2{font-size: 30px;
    
    color:#3fada8;
    
    text-shadow: 3px 3px 5px black, 0 0 30px #c9770c,0 0 15px #e97d02;
    
margin-left: 40px;
    
    margin-top: 0px;
}

h3{
    font-size:20px;
    color: #C4E0E5;
}

.grid-item {
    margin:10px;
    
padding:10px;
    
width:calc(50% - 20px);
    
height:300px;
    
text-align: center;
    
box-sizing: border-box;
    
overflow:auto;
    
background-color:#4B79A1;
    
box-shadow: rgba(221, 145, 74, 0.822);
    
border-radius: 10%;
    
padding:30px;
    
color:white;
}
#grid-floats li {
    float: left;
 
}
#grid-flex{
    display: flex;
    
    flex-wrap: wrap;
}
#grid-floats::after{
    content:'';
    
    display: block;
    
    clear: left;
}

 img { 
     background-color: white;
     
    width: 50%;
     
    border-radius: 50%;
     
border:3px solid black;
}
ul{
    list-style-type: none;
    
padding-left: 0px;
}
@keyframes move {
    0%   {background-color: pink; left:0px; top:0px;}
    25%  {background-color: #4B79A1; left:200px; top:0px;}
    50%  {background-color: pink; left:200px; top:200px;}
    75%  {background-color: gray; left:0px; top:200px;}
    100% {background-color: pink; left:0px; top:0px;}
}
.grid-item:nth-child(1){
   width:calc(100% - 20px);

}

@media  (min-width: 480px) {
   .grid-item:nth-child(n) {width: calc(100% / 3  - 20px);
    }
    .grid-item:nth-child(-n +2){width:calc(50% - 20px);}
}

@media  (min-width: 1024px) {
    .grid-item:nth-child(n) {width: calc(25% - 20px);
     }
     .grid-item:nth-child(1){width: calc(50% - 20px);}
 }