@import url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css');

html{
    height:100%;
    margin: 0;
        padding: 0;
}
body, map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
              
      .iphone{
          width:450px;
          height:800px;
          background-color:#233;
          border-radius:  80px;
          padding: 60px 25px 120px 25px;        
          display: inline-block;      
      }
          
      .phoneInfo{
          height:100%;
          width:100%;
          margin:0;
          background-color: blue;
          padding:0;          
          border-radius: 15px;
          border-color: black;
          border-width: 4px;
          border-style: solid;
      }
      
      .iphone1
       {
         margin-left: 16.66% !Important;  
           
       }
       
       #twoPhones{
           margin-top: 25px;
           margin-bottom: 20px;
       }
      
       #latlng, #theTime{
           font-size: 14px;
           font-family: verdana;
           font-weight: 500;
           font-stretch: expanded;
           padding:0;
           margin:0;
       }
       
          #latlng{
              padding-bottom: 12px;
              text-align: center;
          }
          
          #theTime{
              padding:5px 0 5px 0; 
              margin:0 15px 10px 15px;
              color: darkseagreen;
              text-align: center;
              background-color: rgba(255,255,255,0.8);
              border-radius: 20px;
          }
       
       .general{
          text-align: center;
          height: 20%;
          color: chocolate;
          font-weight: 900;
          padding: 0;
          padding-right: 5px;
          margin:-2px 0px 0px 0px;
          background-color: bisque;          
           border-top-left-radius: 15px;
           border-top-right-radius: 15px;
          }
          #weatherLocation{
              padding: 5px;
              padding-bottom: 10px;
              margin:0;
              font-size: 15px;
              
          }
          
	  #specific{
		 padding-top:7px;
		 height: 35%;
		 background-color: burlywood;        
		 margin:0;
                   }
	   #twoThirdBox{
		   padding: 0;
		   margin:0;
		   background-color:inherited;
	   }
	   #oneThirdBox{
		   padding: 0;
		   margin:0;  
		   background-color: inherit;
		   
	   }
           
       #temp{
           font-size: 60px;
           vertical-align:top;
           text-align:left;
           padding:0 0 0 0;       
            margin: 0px;
            color:white;
            font-weight:500;
             display: inline-block;
             font-family: "arial narrow";
			 background-color: inherit;
       }
       
       #feelsLike{
           font-size: 20px;
           padding:3px 0px 2px 3px;
           color:white;
           font-weight: 500;
		   background-color: inherit;
           
       }
       
       #tempDiv{
           background-color:inherit;
           border:white solid 1px;
           border-left-width: 1px;
           border-top-width:3px;
           border-right-width:1px;
           border-radius: 12px;
           margin-left: 2px;
           margin-right:3px;
           padding:0 0 0 0;  
		   width: 40%;
          
              }
       
       #randomUnit{
           font-size: 12px;
           padding:2px 3px 2px 3px;
            background-color: inherit;
           border-radius: 3px;
           color:white;
           margin:0;
       }
       
       #thermometer{
           padding: 5px 0 0 0;
           font-size:20px;
           text-align: left;
           margin:0;
           vertical-align: top;
           color:white;
           background-color: inherit;
           max-width: 15px;
       }
       
       #units{
		   width:20px;
           font-size: 40px;
           color:white;
           font-weight: 900;
           padding:0;
           vertical-align: top;        
            text-align: left;        
            margin-left:36%;
			margin-right: 0;
             height: 80px;
             display:inline-block;
             background-color: inherit;
       }
       
       #unit2
       {
           display: none;
       }
       
       #precipBox{
            background-color: inherit;
            text-align: center;
            color:white;
            padding:4px 0 6px 0;
            font-size: 16px;
            font-weight: 500;             
            border:white solid 1px;
               border-top-width: 1px;
                  border-right-width: 0px;
                     border-bottom-width: 0px;
                        border-left-width: 1px;
           border-radius: 10px
       }
       
        #pressureBox{
            background-color: inherit;
            text-align: center;
            color:white;
            padding:4px 0 6px 0;
            font-size: 16px;
            font-weight: 500;   
            border:white solid 1px;
            border-top-width: 1px;
                  border-right-width: 1px;
                     border-bottom-width: 0px;
                        border-left-width: 0px;
           border-radius: 10px;
       }
         #windSpeedBox{
            background-color: inherit;
            text-align: center;
            color:white;
            padding:6px 0 2px 0;
            font-size: 16px;
            font-weight: 500;           
            border:white solid 1px;
            border-top-width: 0px;
                  border-right-width: 0px;
                     border-bottom-width: 1px;
                        border-left-width: 1px;
           border-radius: 10px;
       }
       
        #windDirectionBox{
            background-color: inherit;
            text-align: center;
            color:white;
            padding:6px 0 2px 0;
            font-size: 16px;
            font-weight: 500;         
            border:white solid 1px;
            border-top-width: 0px;
                  border-right-width: 1px;
                     border-bottom-width: 1px;
                        border-left-width: 0px;
           border-radius: 10px;
       }
       
       .wi-wind-direction, .wi-barometer, .wi-raindrop{
           font-size:20px;
       }
       
       #humidityRow{
           padding-top: 15px;
       }
       
        #humidityBox{
            background-color: inherit;
            text-align: center;
            color:white;
            padding:0;
            font-size: 16px;
            font-weight: 500;           
            margin-left: 16%;
            border:white solid 1px;
            border-top-width: 1px;
                  border-right-width: 0px;
                     border-bottom-width: 1px;
                        border-left-width: 1px;
           border-radius:10px;
       }
       
        #cloudCoverBox{
            background-color: inherit;
            text-align: center;
            color:white;
            padding:0;
            font-size: 16px;
            font-weight: 500;        
            border:white solid 1px;
            border-top-width: 1px;
                  border-right-width: 0px;
                     border-bottom-width: 1px;
                        border-left-width: 0px;
           border-radius: 10px;
       }
       
        #visibilityBox{
            background-color: inherit;
            text-align: center;
            color:white;
            padding:0;
            font-size: 16px;
            font-weight: 500;           
            border:white solid 1px;
            border-top-width: 1px;
                  border-right-width: 1px;
                     border-bottom-width: 1px;
                        border-left-width: 0px;
           border-radius: 10px;
       }
       
       #weatherIconBox{
            padding: 3px 0 0 0;         
           margin:0;
           text-align: center;
           vertical-align: top;
           max-height: 160px;
       }
       
       #weatherIcon{
           vertical-align:middle;
           text-align: right;
           padding:6px 0 6px 0;      
           margin:0;
           font-size: 90px;
           color: white;
           font-weight: bolder;
           margin:0;
       }
       
       #summary{
           color:white;
           text-align: center;
           line-height: 14px;
           padding:0 0 5px 0;
           margin:0;
           font-size: 12px;
       }
       #goLeft{
           color:black;
           float:left;
           padding:2px;
           margin:0 0 5px 15px;
       }
       #goRight{
           color:black;
           float:right;           
           padding:2px;
           margin:0 15px 5px 0;

       }
       
       #dailyDetails{
           background-color: peru;
           height: 47%;
           width:100%;
           border-bottom-left-radius: 15px;
           border-bottom-right-radius: 15px;
           margin:0;
           display: inline-block;
           text-align: center;
           padding-right: 8px;
           padding-left: 8px;
                  }
                  
            .tabular
            {
                display: table-cell;
                padding: 3px 2px 2px 2px;
                text-align: center;
                font-size: 12px;
                text-decoration: none;
                margin:2px;
                color:white;
                font-weight: 600;
                width: 100%;
            }
            
            .tabular h5, .tabular h6{
                border: white solid 1px;
                border-radius: 3px;
                padding-top: 4px;
                padding-bottom: 2px;
                }