nav a {
    background-color: rgb(0, 0, 0); 
    color: white;                    
    text-decoration: none;    
    padding: 10px 20px;       
    border: 1px solid white;  
    border-radius: 4px;
    text-align: justify;
  
 }

 nav {
    text-align: center;
 }

 nav a:hover {
    background-color: white; 
    color: rgb(0, 0, 0); 
    border-color: rgb(0, 0, 0);          
    transition: 2s;
    
                     
 }

 h1 {
    text-align: center;
    justify-content: center;
 }

 @media(max-width:700px) {
    nav {
        display: flex;
        flex-direction: column;
        padding: 40px;
        margin: 10px;
    }

    nav a {
        text-align: center;
        padding: 10px;
    }

 }

 @media (max-width:640px) {
    body {
        background-image:url(the-needle-8424256_640.jpg);
    }
}
 
@media (min-width:640px) and (max-width:1280px) {
        body {
            background-image: url(the-needle-8424256_1280.jpg) ;
        }
}
 
@media (min-width:1280px) and (max-width:1920px) {
    body {
        background-image: url(the-needle-8424256_1920.jpg);
    }
}