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

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container{
  
  width:400px;
  height:100px;
  border-radius: 10px;
  
   background-image: linear-gradient(30deg, #E5E3C9, #B4CFB0, #94B49F, #789395);
  
  color: white;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 2em;


  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  transition: 600ms;  
}

#container:hover{
  cursor: pointer;
  
  width: 100vw;
  height: 100vh;

  border-radius: 0;

  font-size: 7em;
  
}