/*
color scheme :
dark blue: #33658a
light blue: #86bbd8   (background color)
green: #758e4f
yellow: #f6ae2d
orange: #f26419
*/

/*
fonts:
font-family: 'Oswald', sans-serif;
font-family: 'Cormorant Upright', serif;
font-family: 'Courgette', cursive;        Nope
font-family: 'Kaushan Script', cursive;
font-family: 'Cormorant', serif;          Nope
font-family: 'Jaldi', sans-serif;
*/

body {
  /* font-family: 'Oswald', sans-serif; */
  /* font-family: 'Cormorant Upright', serif; */
  /* font-family: 'Courgette', cursive; */
  /* font-family: 'Kaushan Script', cursive; */
  /* font-family: 'Cormorant', serif; */
  /* font-family: 'Jaldi', sans-serif; */
  background-image: url('https://c1.staticflickr.com/5/4703/39263977214_a1284cf053_b.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  color: #FFFFFF;
}

input {
  margin: 0.5em;
}

form {
  color: #FFFFFF;
  padding: 2em;
  text-align: center;
}

/* header section */
.main-header {
  background-color: #33658a;
}

.main-header h1 {
  color: #FFFFFF;
  display: inline;
  padding: 0.5em;
  /* font-family: 'Kaushan Script', cursive; */
}

.buttons {
  float: right;
  padding: 0.5em;
}

/* current conditions block */
.current-conditions div {
  margin: 0.5em;
  display: inline-block;
  background-color: rgba(1, 1, 1, 0.6);
  /* background-color: #505050; */
}

.current-con p {
  display: inline-block;
  padding: 0.2em;
  text-align: center;
}

.current-con h3 {
  display: inline-block;
  padding: 0em 0.5em 0.5em 0em;
}

.current-con {
  vertical-align: top;
  padding: 0.5em;
  text-align: center;
}

.city {
  vertical-align: top;
  padding: 1em;
}

.connections {
  vertical-align: top;
  padding: 0.5em;
}

/* todays forecast block */

.todays-forecast div {
  margin: 0.5em;
  display: inline-block;
  background-color: rgba(1, 1, 1, 0.6);
}

.icon-section {
  vertical-align: top;
}

.icon-section p {
  display: inline-block;
}

.icon-section h3 {
  display: inline-block;
}

/* weekly forecast block */

.weeks-forecast {
  background-color: rgba(1, 1, 1, 0.6);
}

.hour-div {
  width: 20%;
  display: inline-block;
  text-align: center;
}

.weekly-div {
  margin: 0.5em;
  width: 20%;
  display: inline-block;
  text-align: center;
}

.weekly-forecast {
  dislay: inline-block;
  margin: 0.5em;
}

/* modal blocks */

.login-modal, .signup-modal, .location-modal {
  display: none;
  position: fixed;
  top: 5%;
  left: 5%;
  z-index: 1;
  height: 90%;
  width: 90%;
  color: #FFFFFF;
  text-align: center;
  background-color: #33658a;
}

.login-modal {
  /* background-color: #f26419; */
  background-color: rgba(242, 100, 25, 0.9);
}

.signup-modal {
  /* background-color: #758e4f; */
  background-color: rgba(117, 142, 79, 0.9);
}

.location-modal {
  /* background-color: #86bbd8; */
  background-color: rgba(134, 187, 216, 0.9);
}