color: red;
}


p {
   
width: 350px;
   
border: 1px black solid;
   
position: fixed;

}


span {
   
background: green;
   
color:white;
   
position: relative;
   
top: 150px;
   
left: 50px;

}


img.left {
   
float: left;
   
width: 500px;
   
margin-left: 10px;

}


img.right {
   
float: right;
   
width: 500px;
   
margin-right: 10px;

}


div.green_bottle {
    
border-radius:100px 100px 0px 0px;
    
background-color: #5533FF;
    
color: white;

font-size: 20px;

font-family:calibri;
    
padding: 50px;

overflow:hidden; 

background: linear-gradient( black, #5533FF);

 transition: width 5s; 

 -webkit-transition: width 5s; 
}



div:hover {
    
width: 700px;

}



div.blue_bottle {
    
border-radius:0px 0px 100px 100px;
    
background-color: darkblue;
    
color: white;

font-size: 20px;

font-family:calibri;
    
padding: 50px;

overflow:hidden;

background: linear-gradient( #5533FF, Black);
}



h1 {
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size: 100px;
  color: white;
  padding: 80px 50px;
  text-align: center;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}


body{

background-size : contain;

}