head {
    text-align:center;
}

@keyframes bgcolor {
    0% {
     background:linear-gradient(to top, rgb(64, 161, 199), skyblue, white);  
    }

    20% {
        background:linear-gradient(to top, rgb(64, 161, 199), skyblue, white);  
       }

    40% {
        background:linear-gradient(to top, rgb(117, 187, 214),rgb(119, 195, 224)e, white); 
    }

    60% {
        background:linear-gradient(to top, rgb(83, 151, 179), rgb(38, 111, 139), rgb(141, 95, 179)); 
    }

    80% {
        background:linear-gradient(to top, rgb(94, 96, 221), darkblue, purple);
    }

    100% {
    background:linear-gradient(to top, rgb(94, 96, 221), darkblue, purple);  
    }

    
}


body {
    min-height:100vh;
    text-align:center;
        -webkit-animation: bgcolor 20s infinite;
        animation: bgcolor 40s infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
        margin: 0; height: 10%;  
        overflow-y: hidden;
        overflow: hidden;
       
    }

    .disable-scroll{
        overflow-y: hidden;
      }

      .buttons-scroll{
        margin-left: 250px;
      }
  
.grid {
    flex-wrap: wrap;
    width:1800px;
    height:400px;
} 

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

 .grid > div{
    position:relative; 
    height:60px;
    width:60px;
    background-color:pink;
    border-radius:50px;
    border-color:black;
    z-index:1;
    /* animation: fadeOut 10s; */
    transition-property: height;
    transition-duration: 4s;
    transition-timing-function: vertical;
    position:relative;

}

iframe {
    size:-100px;
}

a {
    color:black;
    font-size:100;
    position:relative;;
}

h1 {

color:black;
text-align:center;
font-size:30px;
font-style: italic;
float:left;
background-color:white;

margin-left:20px;
}

h2 {
    text-align:center;
    font-size:35px;
}

h3 {
    /* background-color:black; */
    /* color:pink; */
    text-align: center;
    font-size:15px;
    top:100px;
    right:880px;
    height:30px;
}

h4 {
    color:hotpink;
    font-size: 25px;
}

.grass {
    background-color: forestgreen;
    height:40vh;
}

button {
    background-color:black;
    color:hotpink;
    font-size:20px;
    border-color:pink;
    border-radius:2px;
    box-shadow: 4px 4px hotpink;
    /* height:30px; */
    margin-right:40px;
    margin-left:5px;
    height:40px;
    margin-bottom:200px;
}

button:hover {
    transform: scale(0.8);
    border-color:pink;
    border-radius:2px;
}

button:active {
    opacity:0.5;
}

img {
    height:150px;
    width:150px; 
    border-color:hotpink; 
    border-style:solid;
    transition: width 2s; 
}

image {
    height:150px;
    width:150px; 
    border-color:hotpink; 
    border-style:solid;

}

p {
    font-size:25px;
    color:hotpink;
    font-style:italic;
}

.PrincessPeachCute {
    image-orientation: inherit;  
    border-radius: 10px; 
   position:relative;
   z-index:2;
   border-radius:20px;
   border-color:hotpink;
}

.CuteCloud {
    width:150px;
    height:100px;
    position:relative;
    
}

table {
    border-color:gold;
    border-radius:2px;
    display: inline-block ; 
    
}