@import url("style.less");

:root[data-theme="theme-light"] {
    --bg-color: #fcecdf;
    --header-color: #ffaeb2;
    --link-color: #f8bbbe;
    --link-hover-color: #fac2c5;
    --alttext-color: #AAAFAA;
    --p-color: #000000;
    --img-invert: 1;
}

:root[data-theme="theme-dark"] {
    --bg-color: #1d1d1d;
    --header-color: #ffddff;
    --link-color: #ffddff;
    --link-hover-color: #eeddff;
    --alttext-color: #ddffdd;
    --p-color: #ffff;
    --img-invert: 0;
}

html {
    background-color: var(--bg-color);
    overflow-x: hidden;
    height: 100%;
}

li {
    list-style: none;
    a {
        color: var(--link-color) !important;
        text-decoration: underline 0.10em rgba(255, 255, 255, 0);
        transition: text-decoration-color 300ms;

        &:hover {
            text-decoration-color: var(--link-hover-color);
        }
    }
    user-select: none;
}

body {
    height: inherit;
    p {
        font-size: 1rem;

        &::selection {
            background: (@highlighter-color / 1.08);
            color: black;
        }
    }
    h1 {
        &::selection {
            background: (@highlighter-color / 1.08);
            color: black;
        }
    }
    a {
        &::selection {
            background: (@highlighter-color / 1.08);
            color: black;
        }
    }
    .colflex();
    justify-content: unset;
    gap: 2rem;
    overflow-x: hidden;
}

main {
    height: inherit;
    overflow-y: scroll;
    p, 
    a {
        color: var(--p-color);
        font-family: 'Iosevka Etoile Web Light';
    }
}

header {
    background-image: url("/assets/images/bg.jpg");
    background-position-y: 40%;
    nav {
        margin-top: 8%;
        .colflex();

        #navmenu {
            .rowflex();
            font-size: 1.3rem;
            margin-top: 1rem;
            font-family: monospace;
            margin-bottom: 0.5rem;
            a {
                color: @link-color !important;

                &:hover {
                    text-decoration-color: @link-color;
                }
            }
        }
    }
    #title {
        text-align: center;
        font-family: 'Iosevka Etoile Web';
        font-size: 32px;
        font-style: italic;
        color: transparent;
        background: linear-gradient(@link-hover-color, @link-color, @link-hover-color);
        background-clip: text;
    }
    user-select: none;
}

footer {
    bottom: 0;
    position: relative;
    #socials {
        .rowflex();
        gap: 0.5rem;
        img {
            filter: brightness(0) saturate(100%) invert(91%) sepia(9%) saturate(500%) hue-rotate(275deg) brightness(105%) contrast(98%) invert(var(--img-invert));
            width: 1.6rem;
            height: 1.6rem;
            &:hover {
                filter: brightness(0) saturate(100%) invert(92%) sepia(18%) saturate(400%) hue-rotate(290deg) brightness(95%) contrast(90%) invert(var(--img-invert));
            }
        }
    }
    #buttons {
        margin-top: 0.5rem;
        .rowflex();
        gap: 0.1rem;
    }
    div {
        position: fixed;
        bottom: 0;
        a {
            .alttext();
        }
        button {
            background: none;
            border: none;
            color: gray;
            
            &:hover {
                cursor:pointer;
            }
        }
    }

}