@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


*{
    box-sizing: border-box;
}
.h1{
    text-align: center;
}
body{   
    background-color: blanchedalmond;
    font-family: "Roboto",sans-serif;
    display:flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center;

    /* overflow:hidden; */
} 
.box{
    background-color: teal;
    color:white; 
    width:400px; 
    height:200px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    border:1px solid white;
    margin:10px; 
    border-radius: 10px; 
    transform: translateX(400%); 
    transition:transform 0.6s ease;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}  
.box:nth-of-type(even){
    transform: translateX(-400%);
}
.box.show{
    transform: translateX(0);
}