*
{
    margin: 0;
    padding: 0;
}

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

main
{
    margin: 0.5rem;
    background-color: hsl(0, 0%, 93%);
    margin: 0 auto;
    padding: 20px;
    height: 100%;
}

/* nav and footer */
    /* color and  size */
nav, footer
{
    background-color: hsl(120, 100%, 20%);
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: hsl(150, 100%, 98%);
    
}

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;
    padding: 20px 0;
}

nav ul li 
{
    text-decoration: none;
    display: block;
    padding: 1rem;
    position: relative;
    width: 90%;
}

/* text */
h1, h2, h3, p
{
    margin: 1rem 0;
}
p
{
    color:hsl(120, 20%, 25%);
    line-height: 1.5rem;
    
}

h1, h2, h3
{
    color: hsl(120, 100%, 20%);
    

}
h1
{
    font-size: 30px;
}

h3, h2
{
    font-size: 20px;
}

nav h2 
{
    color: hsl(147, 50%, 47%);
    text-decoration: none;
}
/* link color */
    /* list */
ul>li>a
{
    color: hsl(147, 50%, 47%);
    text-decoration: none;
}

.link
{
    color: hsl(120,50%,30%);
}

/* img styling*/
.headerimg{
    display: none;
}
.frontpageimg
{
    max-width: 100%;
}

.plantsimg
{
    min-width: 15%;
    max-width: 15%;
}

/* Pseudoclass */
nav a:hover
{
    background-color: hsla(0,0%,100%,0.3);
}

ul>li>a:hover
{
    opacity: 0.7;
}

.link:visited{
    color: hsl(120, 5%, 50%);
}

.link:focus
{
    color: hsl(225, 80%, 60%);
}

/* checkbox */
.cbHidden
{
    display: none;
}

.cbChecked:checked+.cbHidden
{
    display: inline;
}

/* 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;
}

nav .submenu-btn, nav>ul>li>img
{
    height: 40px;
    width: 40px;
    position: absolute;
    top: 35px;
    right: 10px;
}

nav .submenu-btn
{
    display: block;
    width: 40px;
    z-index: 7;
    opacity: 0;
    cursor: pointer;
}

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

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

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

nav .menu-btn:checked ~ ul
{
    display: flex;
    flex-direction: column;
}

nav ul
{
    background-color: hsla(0, 0%, 10%, 0.8);
    height: 100vh;
    position: fixed;
    z-index: 5;
    align-items: center;
}

/* Særlig styling til desktop - minimum viewport bredde på 768 pixels */
@media only screen and (min-width: 768px)
{
    header
    {
        padding: 0;
        margin: 0;   
        max-height: 100px;
        width: 100vw;
    }

    main
    {
        width: 70%;
    }

    nav
    {
        line-height: 50px;
    }

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

    nav input.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;
    }

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

    .headerimg
    {
        display: block;
        max-width: 100%;
    }

}