html {
    background-color: #EDEDED;
}

header.sticky {
    display: flex;
    position: sticky;
    top:0;
    left: 0;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    height: fit-content;
    max-height: 10dvh;
    background-color: black;

    a.logo {
        display: flex;
        width: 20%;

        img {
            width: 5rem;
            height: auto;
        }
    }

    nav.desktop {
        display: none;
        justify-content: space-between;
        align-items: center;
        width: 80%;
        flex: 3;

        @media (min-width: 789px) {
            display: flex;
        }


        a {
            text-decoration: none;
            color: white;

            &.active {
                color: #BFFB4F;
            }
        }
    }

    section.hamburgermenu {
        display: flex;
        flex-direction: column;

        nav {
            display: inherit;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            a {
                opacity: 0;
                transform: translateY(-20%);
            }
        }
    }

    button {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        flex-direction: column;        
        position: relative;
        width: 20%;

        @media (min-width: 789px) {
            display: none;
        }

        span {
            font-size: 1rem;
            color: white;
            position: absolute;
            bottom: -1rem;
        }

        .icon-wrapper {
            position: relative;
            width: 2.9375rem;
            height: 1.9375rem;
        }

        .icon-hamburger, .icon-close {
            position: absolute;
            top: 0;
            left: 0;
        }

        .icon-close {
            opacity: 0;
            transform: rotate(-90deg) scale(0.5);
        }

        .close {
            visibility: hidden;
            opacity: 0;
        }
    }
}


main.home {

    section:nth-of-type(1) {
        

        article {
            display: flex;
            flex-direction: column;
            margin-block: 2rem;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 1rem;
            align-items: center;
        }
    }

    section:nth-of-type(2) {

        margin-top: 3rem;

        ul {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 425px), 1fr));
            gap: 1rem;
        }

        li {
            width: 100%;
            min-width: 0;         
            display: flex;
            flex-direction: column;
            border-radius: var(--border-medium);
            background-color: var(--background-secondary);
            padding: 1rem;
            color: white;
    
            img {
                width: 60%
            }

            p {
                margin-block: .5rem;
                text-wrap: wrap;
                font-size: 1rem;
            }

            h3 {
                margin-block: 1rem;
                font-size: var(--heading-medium);
            }
            
            a {
                color: var(--badges);
            }
        }

        article {
            
            div.badges {
                display: flex;
                gap: 1rem;
            }
        }
    }

    section:nth-of-type(3) {
        
    }

    section:nth-of-type(4) {
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            width: 100%;
            gap: 2rem;
        }

        li {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            background-color: white;
            box-shadow: 5px 5px 5px black;
            border-radius: 20px;
            width: 30%;
        }

        img {
            width: 30%;
            height: auto;
        }
    }
}


[popover] {

    width: 100vw;
    height: 80dvh;
    transform: translateY(100vh); 
    opacity: 0;
    border-radius: 0 0 1.25rem 1.25rem;
    pointer-events: auto !important;
    
    transition: 
        transform 0.3s ease-in-out, 
        opacity 0.3s, 
        display 0.3s allow-discrete, 
        overlay 0.3s allow-discrete
    ;

    &:popover-open {
        transform: translateY(10dvh);
        opacity: 1;

        @starting-style {
            transform: translateY(100%);
            opacity: 0;
        }
    }

    &::backdrop {
        position: fixed;
        top: 10dvh;
        left: 0;
        pointer-events: auto;
        background-color: rgba(0, 0, 0, 0);
        transition: 
            display 0.3s allow-discrete, 
            overlay 0.3s allow-discrete, 
            background-color 0.3s
        ;
    }

    &:popover-open::backdrop {
        pointer-events: auto;
        background-color: rgba(0, 0, 0, 0.5);
    }

}



main.createnote {
    margin: 3rem;

    h2 {
        font-size: 3rem;
    }

    form {
        display: flex;
        flex-direction: column;
    }

    fieldset {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem; 
        
        div {
            display: flex;
            flex-direction: column;
            width: 45%
        }
        
        input, textarea, select {
            display: flex;
            border-radius: 0.5rem;
            height: 3rem;
            border: 2px solid #D9D9D9;
            font-size: 1rem;
            padding-left: .5rem;
            font-weight: 300;

            &::placeholder {
                padding-left: .5rem;
            }

            &:nth-of-type(1) {
                width: 100%;
            }

            &:nth-of-type(2) {
                width: 100%;
            }

            &:nth-of-type(3) {
                width: 100%;
            }

            &:nth-of-type(4) {
                width: 100%;
            }
        }

        select {
            width: 100%;
        }

        button {
            width: 70%;
            height: 3rem;
            background-color:#0c0c0c;
            color:#BFFB4F;
            border-radius: 1.25rem;
            font-size: 1.5rem;
        }
    }
}