/* CSS Reset */
*, *::before, *::after { 
    margin: 0;
    padding: 0;
    box-sizing: inherit;
  }


:root {
    --gray : rgb(160, 160, 160);
    --border-gray: rgb(165, 165, 165);
    --light-gray : #F3F3F3;
    --soft-lavender: #e1e8f6;
    --dark-gray: #DCE1E3;
    --lapis: #39a0ca;
    --ice-blue: #a0d2eb;
    --peach: #f3756b;
    --coffee: #e3dbc9;
}

body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #c9f9ff;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3;
  }
  
.header-wrapper {
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: center;
    background-color: transparent;
  }
  
.header {
  font-stretch: ultra-expanded;
  margin-top: 20px;
  padding: 20px;
  font-size: 60px;
  font-weight: 650;
}

.body-container {
  margin-top: 30px;
  height: 420px;
  min-width: 350px;
  padding: 10px;
  background-color: #90d7ff ;
  display: flex;  
  flex-direction: column;
  border-radius: 30px;
  border: 1px var(--border-gray) solid;
}

/* Location input form */
.form-container {
  height: 32px;
  width: 340px;
  display: flex;
  justify-content: left;
  background-color: var(--light-gray);
  border-radius: 25px;
  border: 1px var(--border-gray) solid;
  align-self: center;
}

#location-form {
  height: 30px;
  width: 295px;
  padding-left: 15px;
  padding-right: 20px;
  background-color: transparent;
  border: none;
  outline: none;
}

#search-icon {
  background-color: transparent;
  --ionicon-stroke-width: 24px;
  font-size: 24px; 
  margin-top: 4px;
  margin-left: 5px;
}

#submit-icon {
  background-color: transparent;
  --ionicon-stroke-width: 18px;
  font-size: 32px;
  margin-bottom: 2px;
  margin-right: 3px;
}

#submit-icon:hover {
  opacity: 0.45;
  transition: 0.55s;
  transform: translate(0em, -0.05em)
}

#submit-icon:active {
  transform: translate(0em, 0.02em); 
  transition: 0.1s;
}

/* Weather Display */
.weather-container {
  margin-top: 30px;
  margin-left: 20px;
  font-weight: 600;
  font-size: 25px;
  display: grid;
  grid-template-areas: 
    "a a a"
    "b b b"
    "c c e"
    "c c e"
    "f f d"
}

.city {
  grid-area: a;
  font-size: 50px;
  font-weight: 300;
  font-stretch: ultra-expanded;
}

.region {
  grid-area: b;
  font-weight: 300;
  font-size: 20px;
  padding-left: 5px;
}

.temperature {
  margin-top: 10px;
  grid-area: c;
  font-size: 80px;
  font-weight: 400;

}

.condition {
  grid-area: d;
  font-size: 20px;
  font-weight: 400;
  margin-left: 33px;
}

#condition-icon {
  grid-area: e;
  width: 128px;
}

.wind {
 grid-area: f;
 font-size: 20px;
 padding-left: 7px;
}