html,
body {
  font-family: 'Titillium Web', sans-serif;  
  background: url(https://lh3.googleusercontent.com/p/AF1QipOWQOnc5H1KaoL3RA5dV1Vvn75adsXwlCG52KP_=s1600-w1600) no-repeat center center fixed;
  background-size: cover;
  color: white; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;  
  min-height: 100vh;  
  text-shadow: 2px 2px black;
}

.title {
  color:white;
  text-shadow: 2px 2px black;
}

.field {
  padding-left: 10px;
}

.level {
  height: 180px;
}

.card-container{
  display: grid;  
	grid-template-columns: repeat(auto-fill, minmax(380px,6fr));
  grid-gap: 1em;
}

.card{
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
  height: max-content;
}

.card-header {
  background-color: rgb(0, 0, 0, 0.3);
  height: 150px;  
}

.right-col {
  background-color: rgba(0, 0, 0, 0);
}

.card-content {
  background-color: rgb(0, 0, 0, 0.3);
}

#cityImage {
  height: 150px;
  padding:0;
  margin:0;
  width: 218px;  
}

#cityImage img {
  border: none;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media only screen and (max-width: 768px) {
  #localWeather {
    display: none;
  }
}