/* Styling til mobiludgave. Denne slår også igennem på desktop med mindre den er ændret i media queryen (@media only screen and (min-width: 768px)) */

*
{
    margin: 0;
    padding: 0;
}

body
{
    font-family: 'Roboto', sans-serif;   
}

main
{
    margin: 0.5rem;
}

main section article img
{
    position: relative;
    width: 100%;
    z-index: -1;
}

h1, p
{
    margin: 2rem 0;
}

nav
{
    height: 50px;
    background-color: hsl(0, 0%, 50%);
    line-height: 50px;
}

nav ul
{
    display: none; /* I mobilvisning skal menuen ikke vises, før brugeren har klikket på hamburger menu ikonet */
    width: 100%;
    list-style-type: none;
    text-transform: uppercase;
    font-size: 24px;
}

/* nav ul li:hover
{
    background-color: hsla(0, 0%, 20%, 0.8);
} */

nav ul li h2
{
    /* position: relative; */
    color: gainsboro;
    font-size: 24px;
    cursor: pointer;
    padding: 0 2rem;
}

nav ul li a
{
    text-decoration: none;
    padding: 1rem;
}

/* Fælles styling for checkbox og menuikoner */
nav .menu-btn, nav>img
{
    height: 40px;
    position: absolute;
    top: 5px;
    right: 10px;
}

/* Separat styling for checkbox */
nav .menu-btn
{
    display: block;
    width: 40px;
    z-index: 7;
    opacity: 0;
    cursor: pointer;
}

/* Separat styling for menuikoner */
nav>img
{
    z-index: 6;
}

/* Hamburger menu ikonen vises som default */
nav .menu-btn ~ .menuicon
{
    display: block;
}

/* Lukke ikonet til menuen skjules som default */
nav .menu-btn ~ .closeicon
{
    display: none;
}

/* Særlig styling til desktop - minimum viewport bredde på 768 pixels */
@media only screen and (min-width: 768px)
{
    /* Checkbox og hamburger menu ikon vises ikke på desktop */
    nav .menu-btn ~ .menuicon, nav .menu-btn
    {
        display: none;
    }

    nav ul
    {
        display: flex;
        justify-content: space-evenly;
        height: auto;   
    }

    nav ul li
    {
        padding: 0;
    }

    nav ul li a
    {
        color: gainsboro;
    }

    /* Checkbox og pil ned ikon skal ikke vises i desktop visning */
    nav ul li img, nav ul li input
    {
        display: none;
    }

    nav h2 {
        position: relative;
    }

    /* Styling af dropdown menu. Den skal ikke vises (display: none), før man hover over det overliggende menupunkt */
    nav ul li ul
    {
        /* margin-top: 7vh; */
        display: none;
        position: absolute;
        background-color: hsl(0, 0%, 80%);
        text-transform: none;
        width: 227.4px;
        font-size: 19px;
        text-align: left;
        top: 7.1%;
    }




    /* Når brugeren hover over det overliggende menupunkt, skal dropdown menuen vises */
    nav ul li:hover ul
    {
        display: block;
    }


    nav ul li:hover a
    {
        color: darkslategray;
    }

    nav ul li ul li
    {
        display: block;
        padding: 0 1rem;
    }

    nav ul li ul li:hover
    {
        background-color: hsla(0, 0%, 20%, 0.6);
    }

    nav ul li ul li:hover a
    {
        color: gainsboro;
    }


    nav ul li ul li {
        background-color: aquamarine;
    }




}

nav .menu-btn:checked ~ .menuicon {
    display: none;
}
nav .menu-btn:checked ~ .closeicon {
    display: block;
}

nav .menu-btn:checked ~ ul {
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;   
    z-index: 100;
}

nav ul li img {
    position: absolute;
    width: 30px;
    height: 30px;
    /* top: 1%; */
    left: 65%;
    transform: translate(50% -50%);
}


nav .menu-btn:checked ~ ul li {
    display: flex;
    align-items: center;
}


.submenu-btn {
    position: absolute;
    /* display: none; */
    z-index: 999;
    width: 250px;
    height: 40px;
    /* top: 50%; */
    /* left: 52%; */
    transform: translate(50% -50%);
    opacity: 0;
    cursor: pointer;
}

.submenu-btn:checked ~ ul{
display: block;
}

nav ul li {
    z-index: 5;
    display: flex;
    flex-direction: column;
    background-color: hotpink;
}
nav ul li:hover {
    opacity: 100;
}