*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* border: 1px solid; */
}

:root {
  font-size: 62.5%;
  font-family: 'Quicksand', sans-serif;
}

body {
  background-color: hsl(214, 80%, 60%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0 auto;
}

main {
  min-width: 600px;
  max-width: 650px;
  width: 95%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#outputs {
  min-height: 24em;
  background-color: hsl(0, 0%, 94%);
  margin-bottom: 2.7em;
  position: relative;
}

#info-inputs {
  min-height: 8em;
  background-color: hsl(207, 85%, 80%);
  padding: 1em 2em;
  text-align: center;
  align-items: center;
}

#outputs, #info-inputs {
  box-shadow: 5px 5px 10px black;
}

.main-box {
  border: 2px solid black;
  border-radius: 10px;
}

/* The elements with flex */
#outputs section, #info-inputs, #clickables, #main-details section, .icon, #wind-action { 
  display: flex;
}

/* This is for the inputs*/
#get-weather-btn, #cities  {
  font-size: 1.8em;
  width: fit-content;
  height: fit-content;
  min-width: 9em; 
  padding: 0.5em 1.5em;
}

#get-weather-btn {
  margin-left: 0.8em;
}

label[for="cities"] {
  font-size: 1.7em;
  width: 50%;
}

label[for="cities"]::first-letter {
  font-size: 1.3em;
}

#clickables {
  width: 50%;
  justify-content: flex-end;
}

/* This is for the Upper Box */

#main-details {
  height: 40%;
  border-bottom: 1px solid gray;
}

#main-details section {
  height: fit-content;
}

#weather-details {
  height: 60%;
}

#selected-city {
  font-size: 3em;
  justify-content: center;
  align-items: flex-end;
  margin-top: 1.1em;
  margin-bottom: 0.6em;
}

#weather-container {
  font-size: 2.5em;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 1em;
}

.icon {
  align-items: center;
}

#weather-icon {
  margin-right: 5px;
  height: 3em; 
  background-color: hsla(0, 0%, 50%, 0.2);
  border-radius: 25%;
  box-shadow: 2px 3px 2px gray; 
}

/* The Extra Deatails (Second Innerbox) */

#humdity-container {
  padding: 1.5em ;
  font-size: 1.7em;
  /* border: 1px solid; */
  min-height: 45%;
  justify-content: space-around;
}

#humdity-container p {
  margin: 0.2em 0 0; 
}

#weather-details> section:last-of-type {
   font-size: 1.7em;
   min-height: 2.5em;
   justify-content: space-around;
}

#wind-action {
  align-items: center;
}

#wind-action > div > p {
  margin: 0.5em 2em;
}

#wind-direction-picture {
  border: 2px solid;
  width: 80px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  margin: 27.2px 75px 27.2px 0;
  min-height: 4.5em; 
}

#windhand {
  position: absolute;
  top: 18%;
  left: 48%;
  height: 70%;
  transform: rotate(0deg);
  border: 1px solid;
}

#wind-arrow {
  position: absolute;
  top: -5px;
  left: -6.4px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid black;
}

.marker {
  border: 1px solid;
  height: 10px;
  width: 2px;
  position: absolute;
}

#up {
  top: -10px;
  left: 49%;
}

#down {
  bottom: -10px;
  left: 49%;
}

#right, #left {
  transform: rotate(90deg);
}

#right {
  right: -8px;
  top: 47%;
}

#left {
  left: -8px;
  top: 47%;
}

#loading-image {
  height: 50px;
  position: absolute;
  bottom: 2px;
}