.brand-logo {
    color: black;
}


body {

    background-image: url('https://media.giphy.com/media/4N1FZFE5AGO3qrUGkw/source.gif');
    background-size: cover;
    font-family: 'Raleway', sans-serif; 
    
}

h1 {
    font-family: 'Montserrat Alternates', sans-serif;
    text-align: center;
    font-size: 5em;
    white-space:normal;
    word-break: break-all;
    
}

#submit{
    font-family: 'Montserrat Alternates', sans-serif;
    text-align: center;
    background-color: #ff81c1;
    color: whitesmoke;

 

 

}


#cityButton{
    font-family: 'Montserrat Alternates', sans-serif;
    text-align: center;
    background-color: #ff81c1;
    color: whitesmoke;

}


.input-field{
    width: 25% ;

}

input{

    width: 25%;
}

.card {
 margin-left: 25%;

}

img {
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

p {
 text-align: center;
 
 


}

.nav-wrapper {
 background-color: #ff81c1;
 font-family: 'Montserrat Alternates', sans-serif;
 
 




}

.uvLow {
    background-color: greenyellow;
   
    color: black;


}

.uvModerate {

    background-color: yellow;
    
    color: black;
}



.uvModerateHigh {

    background-color: orange;
    
    color: black;




}


.uvHigh {

 background-color: red;
 
 color: black;

}

.uvExtreme {


    background-color: purple;
    
    color: black;



}


.input-field {

    margin-top: 5%;

    



}


@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@1,600&family=Raleway:wght@500&display=swap');
/* 
font-family: 'Montserrat Alternates', sans-serif;
font-family: 'Raleway', sans-serif; */