.collage {position: absolute;
top: 10px;
left: 10px;}

.contain{
position: relative;
overflow: hidden;
height: 70%;
}

#pink{text-emphasis-color: initial;}    

p{
font-family: 'Comic Sans MS', cursive, sans-serif;
}

.CropContainer {
position: relative;
overflow: hidden;
}



.pink 
{color: rgb(239, 115, 136);}

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,0%);
    margin: 0;
}


 .container {
        width: 60%;
        height: 70px;
        background-color: rgb(133, 236, 217);
        position: relative;
    }

.display-exp{
    display: flex;
}

.display-exp-div{
    flex:1;
    padding: 30px;
    margin: 20px ;
    color: rgb(234, 255, 248);

}

.display-exp-gap{
    display: flex;
    gap: 10px;
    
}

.flex-container{
  display:flex;
  flex-direction:row;
}

.flex-container div{
  flex:1;
}

@keyframes changeBGColor{/* the animation's name */
  from {background-color: red;} /* stating state, needs to have a specific property expression*/
  to {background-color: yellow;} /* ending state, could have multiple ones through percentage*/
}