*{
margin: 0;
padding: 0;
}

body{
    background-image: url(images/image_2.jpg);
}
h1{
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 2px;
    color: rgb(10, 12, 12);
    font-size: 50px;
}
.front{
    margin: 10% auto 2% auto;
    /* border: 2px solid black; */
}
.Heading{
    color: #ffffff;
    font-weight: 700;
    text-transform: 0px 1px 2px #000;
}

#placeBox{
 margin: 0 auto 2% auto;
  display: block;
  width: 27em;
  height: 33px;
  padding: 25px;
}
#placeBox::placeholder{
    font-size: 1.3rem;
    letter-spacing: 2px;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#placeBox[type = text]{
    font-size: 25px;
    text-align: center;
}
@media screen and (max-width: 767px) {
    #placeBox{
        width: 60%;
        width: 20em;
        height: 10px;
    }
    #placeBox::placeholder{
        font-size: 20px;
        
    }
    #placeBox[type = text]{
        font-size: 20px;
        text-align: center;
    }
}
.button{
    margin: 0 auto;
    display: block;
    font-size: 20px;
    width: 129px;
    height: 44px;
    font-weight: bold;
    font-family: sans-serif;
    border-radius: 17px;
    cursor: pointer;
    background-color: rgb(80 189 197);
    border: none;
}
.button:hover{
    background-color: rgb(3, 166, 177);
    transition: 0.3s;
    color: rgb(0, 0, 0);
}


/* Container */ 
.first-container {
margin: 65px auto;
color: rgb(0, 0, 0);
}
.first-container h2{
    font-size: 40px;
}

.screen{
    background-color: rgba(0, 0, 0, 0.375);
}
.spans{
    font-weight: 700;
}
.cityColor{
    color: #ffffff;
    font-weight: 700;
    /* -webkit-text-stroke: 1.5px black; */
    text-transform: 0px 1px 2px #000;
}
.cardLets{
    background-color: #ffffff99 !important;
}