/* define base colors */
:root {
    --accent-color: #117921;
    --accent-color-secondary: #BEE08F;
    --muted-color: #323A48;
    --dark-color: #222225;
    --darker-color: #181819;
    --light-color: #E2E2E3;
    --lighter-color: #F2F2F3;

    --absolute-color: black;
    --text-color: white;

    --bg-color: var(--darker-color);
    --bg-color-alt: var(--dark-color);
    --font-headings: "ArcticonsSans", sans-serif;
    --font-body:    sans-serif;
}

/* define scrollbar */
html {
    scrollbar-color: var(--accent-color) transparent;
    scrollbar-width: thin;
    overflow-y: scroll;
}

/* header styling */
header {
    padding-bottom: 1.2rem;
    border-bottom: 2px solid var(--text-color);
    #header-nav {
        font-size: 120%;
        align-content: end
    }
    #header-title {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap
    }
    
    h1 {
        margin-top: 0.4rem;
        margin-bottom: 0.4rem;
        margin-right: 1.2rem
    }

    nav > * {
        margin-top: 0.4rem;
        text-align: right
    }

    .download {
        position: relative
    }
    .download-dropdown{
        position:absolute
    }
    
}

footer {
    border-top: 1px solid white;
    padding-top: 1.2rem;
    font-family: var(--font-headings);
    text-align:center;
    #copyleft {
        display:inline-block;
        transform: rotate(180deg);
    }
}

body {    
    font: 1rem/1.2 var(--font-body);
    font-variant-ligatures: none;
    color: var(--text-color);
    background: var(--bg-color);
    text-align: left;

    h1, h2, h3, h4, .arcticons-font, #searchBar {
        font-family: var(--font-headings);
    }

    input, #popup, button {
        font: inherit;
        color: inherit;
        font-weight: 700;
        padding: 0.2rem;
        border-radius: 0.4rem;
        border: none;
        background: var(--muted-color);
        color: white
    }

    #content-wrapper {
        text-align: justify;
        font-family: var(--font-headings);
        max-width: 55rem;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        margin-top: 1.6rem;
        margin-bottom: 1.6rem;
        line-height: 1.6;
        letter-spacing: 0.025rem;
    }
    #popup {
        visibility: hidden;
        padding: 0.8rem;
        position: fixed !important;
        z-index: 1000;
        bottom: 10%;
        left: 50%;
        color: black;
        background: var(--accent-color-secondary);
        transform: translate(-50%, 0%);
    }

    button {
        font-size: 90%
    }
    button:hover {
        color: var(--accent-color-secondary);
    }
    button:active {
        background: var(--accent-color-secondary);
        color: black
    }
}

.invisible {
    display: none !important;
}

.button-on {
    background: var(--accent-color);
    color: white;
}

a:link, a:visited { color: inherit }
a:hover, .icon-switcher:hover { color:var(--accent-color-secondary);}

#search {
    z-index: 1000;
    background:var(--bg-color);
    position: sticky;
    top: 0;
    border-bottom: 2px solid var(--text-color);
    padding-top: 1rem;
    padding-bottom: 1rem;

    #searchInner {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1rem
    }
    #searchBar {
        background: var(--absolute-color);
        color: var(--text-color);
        text-align: center;
        border-radius: 1rem;
        border: 2px solid var(--text-color);
    }
}

/* define scroll behavior for various elements */
#categoryFilters, #header-nav, #searchFilters, #searchBar {
    overflow:scroll;
    text-wrap:nowrap;
    scrollbar-width:thin;
    scrollbar-color: var(--absolute-color) transparent;
}

/* define gaps between category buttons */
#categoryFilters {
    margin-top: 1rem;
    button {
        margin-left: 0.6rem;
        margin-right: 0.6rem;
    }
}

#searchFilters {
    scrollbar-width: none;
    gap: 1.6rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    display: flex;

    .filtersSpan {
        border: 1px solid var(--text-color);
        border-radius: 0.6rem;
        padding: 0.4rem;
        button {
            border-radius: 0.2rem;
        }
    }
}

.light-mode {
    --bg-color: var(--light-color);
    --bg-color-alt: var(--lighter-color);
    --absolute-color: white;
    --text-color: black;
    border-color: var(--absolute-color) !important;
    .iconActions a:hover > img {
        filter: invert(0)
    }
}

.iconList {
    display:flex;
    flex-wrap:wrap;
    padding-top: 1.2rem;
    gap: 1.2rem;

    .iconPanel {
        display:flex;
        margin:auto;
        padding: 0.6rem;
        gap: 0.6rem;
        .iconDetails {
            min-width: 8rem;
            h3 {
                margin-bottom: 0.6rem;
            }
        }
    }
    .iconActions {
        display: flex;

        a {
            display:none;
        }

    }
   
    .iconPanel:hover {      
        .iconImageDiv, h3 {
            filter: drop-shadow(0px 0px 4px var(--accent-color-secondary));
        }
        a {
            display: block;
            border-radius: 0.6rem;
            padding: 0.2rem 0.6rem;
        }
        a:hover {
            background: var(--muted-color);
            color: white;
        }
        a:active {
            background: var(--accent-color);
            color: white;
        }
    }

    .iconImageDiv {
    display:flex;
    flex-direction: column;
    margin:auto;
    text-align: center;
    }

}

.inverted {
    filter: invert(1)
}

@font-face {
    font-family: "ArcticonsSans";
    src: url(./ArcticonsSans-Regular.woff2);
}