@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&family=Roboto:wght@100&display=swap');
@media (min-width:600px) {
    body{
        background-image: url(Images/sunset.jpg);
        background-size: 100% auto; 
        background-position: center top;
        margin: 0;
        background-color: #1a1617;
        background-repeat: no-repeat;

    }
    header h1{
        font-family: 'Raleway', sans-serif;
        text-align: center;
        font-size: 40px;
        text-decoration: underline 2px;
        color: azure;
        
    }
    header nav a{
        font-family: 'Roboto', sans-serif;
        text-decoration: none;
        color: white;
        
        margin: 5px;
        font-size: 20px;
        transition: 0.7s;
       
    }
    header nav a:hover{
        color: bisque;
        transition: 0.7s;
    }
    header{
        padding:30px 0;
    }
    header nav{
        justify-content: center;
        margin-top: 10%;
        display: flex;
        flex-direction: row;
    }
 }

@media (max-width:600px) {
    body{
        
        background-image: url(Images/sunset.jpg);
        background-size: 100% auto; 
        background-position: center top;
        margin: 0;
        background-color: #1a1617;
        background-repeat: no-repeat;
    }
    header h1{
        font-family: 'Raleway', sans-serif;
        text-align: center;
        font-size: 40px;
        text-decoration: underline 2px;
        color: aliceblue;
        
    }
    header nav{
        margin-top: 40%;
        display: flex;
        flex-direction: column;
        
    }
    header nav a{
        font-family: 'Roboto', sans-serif;
        text-decoration: none;
        color: white;
        text-align: center;
        margin: 5px;
        font-size: 20px;
        transition: 0.7s;

    }
    header nav a:hover{
        color: white;
        transition: 0.7s;
    }
}