body{
    background-image: url(background.jpg); 
    background-size: 100vw 100vh; 
    font-family: 'Manjari', sans-serif;
    font-weight: bold; 
    font-size: 1em; 
}
#header{
    vertical-align: middle; 
    display: none; 
}
#citySearch{
    font-family: 'Manjari', sans-serif;

}

#daily{
    background: rgba(0, 151, 19, 0.3); 
    text-align: center; 
}

#fail{
    text-align: center; 
    display: none; 
}

#failimg{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
#success{
    display: none; 
}


#three-day{
    background: rgba(57, 115, 163, 0.5);
    text-align: center; 
}
.day:hover{
    background: rgba(90, 148, 196, 0.5);

}


#three-day-grid{
    display: grid; 
    grid-template-rows: 1fr; 
    grid-template-columns: repeat(3, 1fr); 
}

#hourly{
    background: rgba(187, 204, 32, 0.7);
    text-align: center; 
}

#hourly-grid{
    display: grid; 
    grid-template-rows: 1fr; 
    grid-template-columns: 1fr; 
}


.rowDiv{
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    grid-template-rows: 1fr; 
}
.arrow{
    background-color:rgba(0, 0, 0, 0.0);
    border: 0px; 
}

.buttonDiv{
    text-align: center; 
}
.squareDiv:hover{
    background: rgba(200, 218, 46, 0.7); 
}
/*
@media(max-width: 1000px){
    #hourly-grid{
        grid-template-rows:  repeat(6, 1fr); 
        grid-template-columns: repeat(4, 1fr); 
    }

}*/

@media(max-width: 680px){
    #three-day-grid{
        grid-template-rows:  repeat(3, 1fr); 
        grid-template-columns: 1fr; 
    }
    .rowDiv{
        grid-template-rows: repeat(6, 1fr); 
        grid-template-columns:  1fr; 
    }
    /*#hourly-grid{
        grid-template-rows:  repeat(12, 1fr); 
        grid-template-columns: repeat(2, 1fr); 
    }*/

}