body{

    background-image: url("../img/background.png") ;

}

.transparent-background{
    margin: 10% auto;

    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(5,1fr);

    padding: 5%;
    width: 50%;
    height: 100%;

    background: rgba(255, 255, 255, 0.148);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.242);
    backdrop-filter: blur( 8.5px );
    -webkit-backdrop-filter: blur( 8.5px );
    border-radius: 10px;
}
h1{
    grid-row: 1;
    grid-column: 2/ span 2;
    margin-top: -5%;
    justify-self: center;
}
.selectCity{
    width: 50%;
    
    grid-row: 2;
    grid-column: 2 / span 2;

    margin-bottom: 3%;

}

select{
    padding: 10%;
    width: 200%;
    background: none;
    border-color: black;
}

.cityInfo{
    grid-row:3 / span 2;
    grid-column: 1/ span 4;
    display: grid;
    grid-template-columns: 4/ span 4;


}



#cityName{
    grid-row: 1; 
    font-size: 200%;
    align-self: end;
   

}
#cityDate{
    
   align-self: start;
    
    opacity: 0.7 ;
    grid-row: 2;
    font-size: 125%;


}

#cityTime{
    grid-column: 4;
    grid-row: 1 /span 2;
    font-size: 200%;
    align-self: center;
    margin-top: -5%;
}
.footer{
    grid-row: 5;
    grid-column: 1/ span 4;
    align-self: center;
    justify-self: center;
    margin-bottom: -10%;

}