:root,.light {
    --header-bg: rgb(100 220 255 / 50%);
    --body-bg: #fefefe;
    --body-fg: #333333;
    scrollbar-color: #ddd transparent;
}
.dark {
    --header-bg: rgb(100 220 255 / 90%);
    --header-fg: rgb(0 20 25);
    --body-bg: #050505;
    --body-fg: #dddddd;
    scrollbar-color: #222 transparent;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    background: var(--body-bg) !important;
    color: var(--body-fg) !important;
}

header {
    background: var(--header-bg);
    color: var(--header-fg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 0.75rem;

    & .logo_name {
        display: flex;
        flex-direction: column;
        line-height: 1;
        align-items: flex-start;

        & small {
            font-size: 0.8rem;
            opacity: 0.5;
        }

        & h1 {
            font-size: 1.75rem;
        }
    }
}

main {
    padding:0.5rem;
}
.g05{gap:0.5rem;}