body { 
  font-family: sans-serif; 
  background-color: #017d7b;
  height: 96%;
  overflow: hidden;
  }


.data{
  //border: 1px solid black;
}

.chart{
  //border: 1px solid black;
 
}




.carousel-cell {
  float: left;
  height: 98%;
  margin-left: 2%;
  background: radial-gradient(lightgreen,#017d7b);
}



#mittaus{
  color: black;
  text-align: center;
  //border: 1px solid black;
  //height: 50%;
}


#otsikko{
	//border: 1px solid black;
  height: 7vw;
  font-size: 5vw;
  margin-top: 1vh;
}

#temp{
	//border: 1px solid black;
  height: 9vw;
  font-size: 7vw;
}


@media screen and (orientation: portrait) {
  .data{
    height: 50%;
    width: 100%;
  }
  .chart{
    height: 48% !important;
    width: 100% !important;
  }
  #humi, #pres, #batt, #time{
	  height: 6vw;
    font-size: 4vw;
  }
  .carousel-cell {
    width: 90%;

  }
}

@media screen and (orientation: landscape) {
  .data{
    height: 100%;
    width: 50%;

  }
  .chart{
    height: 98% !important;
    width: 50% !important;
    position: absolute;
    top: 0;
    left: 50%;
  }
  #humi, #pres, #batt, #time{
	  height: 6vh;
    font-size: 4vh;
  }
  .carousel-cell {
    width: 66%;
  }

}