body {
    text-align: center;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    color: white;
}

.main-container {
  display: flex;
  justify-content: center;
  background-repeat: no-repeat;
  background-color: #28236b;
  background-size: cover;
  position: absolute;
  height: 100vh;
  width: 100vw;

}
.info-container{
  border-radius: 5px;

    background-color: rgba(0, 0, 0, .6);
    margin: 20px;
    padding: 20px;
    max-width: 300px;
}
.temp-unit {
    cursor: pointer;
    color: #5bf;
    font-weight: bold;
}

.temp-unit:active,
.temp-unit:hover {
    color: orange;
}

.icon {
    width: 141px;
    transform: translateY(-10px);
}

.icon:hover {
    box-shadow: none;
    transition-duration: 1s;
    transform: translateY(0px);
}

.zip {
    font-size: 15px;
    color: white;
    padding: 12px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0.5px 0.5px;
    background-color: rgba(0, 0, 0, .6);
}