body {

  background-color: #c7e9fb;


}
div#context {

 box-sizing:border-box;  
  padding:20px; 
 text-align:center; 
  font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";


}


div.t-portal {
  width:270px; 
  overflow:hidden; 
  border:1px solid #000; 
  border-radius:9px;
  margin: 0 auto; 
  text-align:left;
}

div.t-container {
  width:400px; 
  position:relative; 
  font-size: 52px;
  position:relative; 
  background:#fff; 
 
}

div.box {
  display:block; 
  width:190px; 
  float:left;
  position:relative; 

}

div.box.fahrenheit {
 z-index:1;
background-color: #f9fcff;
background-image: linear-gradient(147deg, #f9fcff 0%, #dee4ea 74%);
    border-right:1px solid #000; 
}
div.box.celsius {
 z-index:2; 
/*   margin-left:-120px; */
background-color: #efecec;
background-image: linear-gradient(315deg, #efecec 0%, #f9aba4 74%);


    cursor:pointer; 
  
   webkit-transition:left 1s ease-in-out; 
  transition:left 1s ease-in-out; 
}

.box.celsius:hover {
  left:-109px; 
}

.scalesymbol {
  width:70px; 
  display:inline-block; 
}

.scalesymbol.cel {
  font-size:30px;
  text-align:center;
}
.box.celsius:hover .scalesymbol {
  font-size:52px; 
}