@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {
  font-family: 'Montserrat' !important;
  background: linear-gradient(to left, #ebebeb, #ffffff); 
  margin: 0;
  padding: 0;
}

.container {
    max-width: 400px;
    min-width: 400px;
  }
  
  .heading {
    font-weight: 400;
    font-size: 45px;
    text-align: center;
  }

  .form-rounded {
    border-radius: 2em !important;
  }

  .back-card {
    border-radius: 6em !important;
  }

  .city-name {
    position: absolute;
    width: 100%;
  }
  
  .city-name p {
    font-size: 20pt;
    font-weight: 400;
  }
  
  .city-name span {
    font-weight: 400;
    font-size: 36pt;
    position: relative;
    top: -60px;
  }
  
  .temp span {
    font-weight: 100;
    font-size: 5em;
    letter-spacing: -5px;
    white-space: nowrap;
  }

  .card-mid {
    line-height: 0.5;
  }
  
  .condition {
    line-height: 1em;
    font-weight: 700;
    font-size: 1.1em;
    text-transform: capitalize;
  }
  .high::before {
    content: '';
    background: url('img/up.svg') no-repeat;
    width: 10px;
    height: 15px;
    display: inline-block;
    position: relative;
    top: 3px;
  }
  
  .low::before {
    content: '';
    background: url('img/down.svg') no-repeat;
    width: 10px;
    height: 15px;
    display: inline-block;
    position: relative;
    top: 3px;
  }

  .icon-container {
    border-radius: 2em !important;
    width: 100px;
    height: 100px;
    background: #ffffff !important;
  }

  .icon-container img {
    margin: auto;
  }
  
  .card-bottom {
    line-height: 0.5;
  }
  .card-bottom span {
    font-size: 12px;
  }
  .card-bottom p {
    font-size: 45px;
    font-weight: 100;
    letter-spacing: -2px;
  }