:root {
  --highColor: #fdde00;
  --whiteColor: #fff;
  --blackColor: rgb(208, 210, 170);
  --windColor: #4ceeff;
  --placeColor: rgb(63, 206, 172);
}

body {
  font-family: monospace;
  font-size: 1.2em;
}

/* - - - LAYOUTS - - - */

.flex_col {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.flex_row {
  display:flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* - - - BLOCKS - - - */

.info_block {
  display: inline-block;
  padding: 0.5em;

  /* border: solid 1px black;
  border-radius: 8px;  */
}


/* - - - BLOCKS OF DATA - - - */

/* - - - WEATHER WIDGET - - - */

.weather_widget {
  background: repeating-linear-gradient(309deg, #1159af, #002569);
  color: var(--whiteColor);
}

/* - - - DATE - - - */

.date {
  padding: 5px 10px;
  font-size: 1.5em;
}

/* - - - PLACE - - - */
.place {
  color: var(--whiteColor);
}

.place_names {
  font-size: 1.5em;
}

.city {
  font-family: fantasy;
  margin-left: 0.3em;
  font-size: 2em;
}
.country {
  font-size: 0.8em;
  margin-left: 0.7em;
  align-self: end;
}

.place_details {
  font-size: 1.0em;
}


/* - - - T°C - - - */

.temperature_grid {
  display: grid;
  grid-template-columns: 0.1fr 0.8fr;
  grid-template-rows: repeat(3, 2em);
  grid-gap: 10px;
  margin: 1em;
}

.temp_current {
  font-size: 3.5em;
  color: var(--highColor);
  text-align: right;
  font-family: fantasy;
  grid-column: 2;
  grid-row: 1;
}

.temp_minmax {
  color: var(--blackColor);
  font-size: 1em;
  position:relative;
  left:40px;
}
.temp_min {
  grid-row: 3;
}
.temp_max {
  grid-row: 1;
}

.temp_feel {
  grid-row: 3;
  grid-column: 2;
  position: relative;
  top: 10px;
  font-size: x-large;
  font-weight: 200;
  color: var(--highColor);
  text-align: right;
}


/* - - - WIND - - - */

.wind {
  color: var(--windColor);
  font-size: 1.2em;
  margin: 0.2em 1em;
  position: relative;
  top:-5px;
  height: 0;
}

.windir {
  display: inline-block;
}


/* - - - WHEATHER DESCR - - - */

.icon_current_weather {
  transform: scale(1.5);
}

.weather_current_description {
  text-transform: uppercase;
  margin: 1em;
}

/* - - - FORECAST - - - */

.forecasts {
  display: flex;
  flex-flow: row;
  justify-content: center;
  flex-wrap: wrap;
}

.forecast_widget {
  background-color: #3267a957;
  border: solid 1px fffafa0f;
  border-radius: 8px;
  padding: 8px;
  margin-left: 10px;
  margin-top: 5px;
}

.date_forecast {
  color: var(--whiteColor);
  font-size: 1.2em;
  text-transform: uppercase;
}

.time_forecast {
  font-size: 0.8em;
  color: var(--whiteColor);
}

.temp_minmax_forecast {
  color: #92b5e4;
  font-size: 1.5em;
}

.description_forecast {
  color: var(--whiteColor);
  font-size: 1.0em;
  text-transform: uppercase;
}

.description_infos {
  font-size: 0.7em;
  
}

.wind_forecast {
  color: var(--windColor);
  font-size: 1.2em;
}

.windir_forecast {
  display: inline-block;
}

.icon_weather_forecast {
  transform: scale(0.7);
}