App.css

@import url("https://fonts.googleapis.com/css?family=Comfortaa&display=swap");


body {
  font-family: 'Comfortaa', cursive;
}

.back {
  background-color: #005673;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  box-shadow: 0px 13px 40px -13px rgba(0,0,0,0.75);
  height: 90vh;
  background: transparent; 
  width: 80%;
  margin: 0 auto;
}

.title-box {
  height: 90vh;
  background-color: deepskyblue;
  display: flex;
  text-align: center;
  padding-left: 30px;
  color: #fff;
}

.main_title {
  font-style: bold;
  font-size: 60px;
  line-height: 1.2;
  font-family: 'Comfortaa', cursive;
}

.sub_title {
  font-weight: 100;
  line-height: 1.5;
  font-size: 25px;
  font-family: 'Comfortaa', cursive;
}

.form-box {
  background-color: #fff;
  height: 90vh;
  padding-top: 100px;
  padding-left: 50px;
}

input[type="text"] {
  background-color: transparent;
  border: 0;
  border-bottom: solid 1px #000;
  width: 75%;
  padding-bottom: 4px;
  color: #000 !important;
  font-weight: lighter;
  letter-spacing: 2px;
  margin-bottom: 30px;
  margin-right: 20px;
  font-size: 20px;
}

input[type="text"] { 
    outline: none;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #fff inset;
    -webkit-text-fill-color: #000000 !important;
}

button {
  border: 3px solid #1fc2ff;
  padding: 8px 20px;
  margin: 0 2px;
  border-radius: 20px;
  font-weight: lighter;
  letter-spacing: 1px;
  font-size: 15px;
  cursor: pointer;
  background-color: #fff;
  color: #000;
  font-weight: 100;
}

button:hover {
    color: #fff;
    background-color: #1fc2ff;
}

button:active {
  outline: none;
}

.weather__result {
  width: 60%;
  font-weight: 200;
  letter-spacing: 2px;
}

.weather__key {
  color: #1fc2ff;
  border-bottom: solid 1px rgba(0,0,0,0.3);
  padding: 20px 0 20px 0;
  font-weight: 400;
  font-size: 20px;
}

.weather__key:last-child {
  border: 0;
}

.weather__value {
  color: #000;
  font-weight: 200;
}

.weather__error {
  color: #1fc2ff;
  letter-spacing: 1px;
  font-weight: 200;
  
}

.black {
  color: black;
}