/* Set starting margin and padding to 0 */
    body {
        padding: 0em;
        margin: 0em;
    }

    .mobile{
        display: none;
    }

/* Designing the header*/
    #header {  
        height: auto;
        position: fixed;                 /* Set the navbar to fixed position */
        top: 0;                          /* Position the navbar at the top of the page */
        width: 100%;                     /* Set the navbar to cover the width*/     
        padding-top: 2vh;                /* Position the content in navbar from the top */
        padding-bottom: 2vh;             /* Position the content in navbar from the bottom */
    }

    #header p {
        margin: 0px;                     /* Give all the p content in navbar a margin 0 */
    }

/* Designing the logo*/
    #header img {
        height: 10vh;                    /* Height of logo */
        padding-left: 3vw;               /* Place the logo from the left side*/
    }

/* Designing meny*/
    #meny {
        width: 20%;                      /* Width of meny*/
        float: right;                    /* Position meny to the right*/
        display: flex;                   /* Flex content inside box*/
        justify-content: space-between;  /* Position with space-between content*/
        padding: 5vh 100px 0px 18px;     /* Designing meny*/
    }

    .footer {
        background-color: white;
        height: 10vh;
    }


/* Designing for ipad*/
    @media (max-width: 1024px) { 
    /*Hide desctop content*/  
        .desktop{
            display: none;
        }
    /*Show mobile content*/
        .mobile {
            display: contents;
        }
        
    /* Change navbar*/   
        #header {
            position: relative;              /* Set the navbar to a relative position */
            height: auto;
            padding: 0px;                    /* Reset padding*/
            padding-bottom: 20px;            /* Set padding on bottom*/
        }
        
        #header img {
            height: auto;                    /* Reset height*/
            width: 70%;                    /* Setting size of logo*/    
            padding: 0px;                    /* Reset padding*/
            display: block;                  /* Display logo as block*/
            margin-left: auto;               /* Place logo in center*/
            margin-right: auto;              /* Place logo in center*/
            }
        
        #meny {
            text-align: center;              /* Center text */
            width:100vw;                     /* Make meny box cover the screen*/
            display: block;                  /* Place content in blocks*/
            float: none;                     /* Position meny to the in the midle*/
            padding: 0px;                    /* Reset padding*/
            padding-top: 20px;               /* Put distance from picture*/
        }
        
        #meny p {
            padding: 6px;                    /* Put distance between content in meny*/
        }
    }
/* Designing for mobile*/
    @media (max-width: 540px) { 
        
        #header img {
            height: auto;                    /* Reset height*/
            width: 80%;                    /* Setting size of logo*/    
        }
}