header{
    position: fixed;
    width: 100%;
    z-index: 1000;
    background-color: #eef8fd;
    text-align: center;
    #navigation{
        max-width: 1200px;
        margin:0 auto;
        display: grid;
        grid-template-columns: auto auto;
        button .icon {
            display: none;
          }
        
        #resume{
            text-align: right;
        }
        #nav{
            text-align: left;
        }
        button {
            padding: 10px 20px;
            margin: 10px 5px;
            background: #dbeaf6;
            border: 2px solid transparent; 
            color: #575380;
            font-size: 16px;
            transition: background-color 0.4s ease, color 0.4s ease, border 0.4s ease; 
            border-radius: 7px;
        }
                
        #mode{
            width: 50px;
            padding: 10px 10px;
            margin: 10px 5px;
        }
        
        button:hover {
            cursor: pointer;
            border: 2px solid transparent; 
            background-color: #348d94;
            color: white;
        }
    }
    #navigation{

        @media only screen and (max-width: 720px) {
            button .text {
              display: none;
            }
            
            button .icon {
              display: inline-block;
            }
          }
        @media only screen and (max-width:517px){
            button{
                margin: 10px 0px 10px 0px;
            }
        }
        @media only screen and (max-width:449px){
            button{
                margin:0;
                background-color: transparent;
                padding: 5px 20px 5px 20px;
            }
            #mode{
                display: none;
            }
        }
    }
    #resume{
        button:hover{
            background-color: #5d6fc1;
        }
    }
}
/* background-color: #487fab; */