.currCond {
  color: black;
  font-size: 0.8em;
  padding: 5px 5px 5px 5px;
  font-weight: bold;
  display: inline;
  text-align: center;
}

.currHead {
  color: black;
  font-size: 1em;
  font-weight: normal;
  padding: 5px;
  background-color: #f2f2f2;
  max-width: 1100px;
  border-style: solid;
  border-radius: 8px;
  border-width: 2px;
  box-shadow: 3px 3px #999;
}

.currHead p {
  display: inline;
  font-weight: bold;
}


.currBanner {
    display: inline;
}

.currentIcon {
    display: inline;
    font-size: 2em;
}

.currentDesc {
    display: inline;
    font-size: 1.6em;
    font-weight: 400;
}

.currTemp {
    display: inline;
    font-size: 2.3em;
    font-weight: 600;
}

.currWind {
    display: inline;    
}

.currAQI {
    display: inline;
    justify-content: center;
}

.windArrow {
    padding: 0 4px 0 4px;
    font-size: 18px;
}

.pressChg {
    display: inline;
    text-transform: lowercase;
}

.futureIcon {
    display: inline;
    font-size: 1.5em;
}

.currMoon {
    display: inline;
}

/*cardinal directions and degrees	
N 348.75 - 11.25 rotate: none
NNE 11.25 - 33.75 rotate: 25deg
NE 33.75 - 56.25 rotate: 45deg
ENE 56.25 - 78.75 rotate: 65
E 78.75 - 101.25 rotate: 90
ESE 101.25 - 123.75 rotate: 115
SE 123.75 - 146.25 rotate: 135
SSE 146.25 - 168.75 rotate: 155
S 168.75 - 191.25 rotate: 180
SSW 191.25 - 213.75 rotate: 205
SW 213.75 - 236.25  rotate: 225
WSW 236.25 - 258.75 rotate: 245
W 258.75 - 281.25 rotate: 270
WNW 281.25 - 303.75 rotate: 295
NW 303.75 - 326.25 rotate: 315
NNW 326.25 - 348.75 rotate: 335
*/
.windDirection {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
    
}

.north { 
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);    
}

.northnortheast {
  transform: rotate(22deg);
  -webkit-transform: rotate(22deg);
}

.northeast {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.eastnortheast {
  transform: rotate(68deg);
  -webkit-transform: rotate(68deg);
}

.east {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.eastsoutheast {
  transform: rotate(112deg);
  -webkit-transform: rotate(112deg);
}

.southeast {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.southsoutheast {
  transform: rotate(158deg);
  -webkit-transform: rotate(158deg);
}

.south {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.southsouthwest {
  transform: rotate(202deg);
  -webkit-transform: rotate(202deg);
}

.southwest {
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
}

.westsouthwest {
  transform: rotate(258deg);
  -webkit-transform: rotate(258deg);
}

.west {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
}

.westnorthwest {
  transform: rotate(292deg);
  -webkit-transform: rotate(292deg);
}

.northwest {
  transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
}

.northnorthwest {
  transform: rotate(338deg);
  -webkit-transform: rotate(338deg);
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
}

.down {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}

.currBody {
  color: black;
  font-size: 1.5em;
  font-weight: bold;
  padding: 5px;
  background-color: #f2f2f2;
  max-width: 1100px;
  border-style: solid;
  border-radius: 8px;
  border-width: 2px;
  box-shadow: 3px 3px #999;
}

.curr-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5px;
}

.curr-flexFore {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 5px;
}

.currForecast {
  color: black;
  padding: 8px;
  background-color: #f2f2f2;
  /*max-width: 1100px;*/
  max-width: 13vw;
  border-style: solid;
  border-radius: 8px;
  border-width: 2px;
  box-shadow: 3px 3px #999;
}

/* Responsive layout - makes the forecasts stack on each other */
@media (max-width: 1100px) {
  .currForecast {
    flex: 100%;
    max-width: 40%;
  }
}

.forecast {
   display: inline;
   text-align: center;
   font-size: 0.9em;
   font-weight: 200;
}

.forecast img {
   border-style: solid;
   border-radius: 8px;
   border-width: 0;
}

.forecast p {
   display: inline;
   font-weight: bold;
}


#cone {
      width: 0;
      height: 0;
      border-left: 70px solid transparent;
      border-right: 70px solid transparent;
      border-top: 100px solid blue;
      border-radius: 50%;
      position: relative;
}