#header_gif {
    background-image: url('/static/images/shared/header_gif.gif');
    float: left;
    width: 64px;
    height: 64px;
    position: absolute;
}

@keyframes header_sway {
    from {
        transform: translateX(0px);
    }

    to {
        transform: translateX(10px);
    }
}

#header_logo {
    margin-left: 40px;
    animation: 2s ease-in-out 0s infinite alternate-reverse both running header_sway;
    user-select: none;
    cursor: pointer;
}

/* Try to get font from API */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

body {
    background-color: #050A0F;
    color: #d2d2d2;
    font-family: 'Rubik', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

h4, h5, h6 {
    margin: 0%;
}

.smalltext {
    font-size: small;
}

/* desktop */
@media (min-width: 500px) {
    #aside-responsive {
        width: 205px;
        min-height: 100%;
        float: left;
        margin-right: 10px;
    }

    .phone {
        display: none;
    }
}

/* phone */
@media (max-width: 499px) {
    #aside-responsive {
        & .attribution {
            display: none;
        }
    }

    #sidebar-responsive {
        &.hidden {
            max-height: 35px;
            overflow: hidden;
        }
    }

    .desktop {
        display: none;
    }
}

#background-style {
    width: 100%;
    height: 100%;
    z-index: -999;
    clear: both;
    border: none;
    float: left;
    position: fixed;
}

#background-style>iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.foreground-blocker {
    width: 100%;
    height: 100%;
    float: left;
    position: fixed;
    background-color: #1e1e1ee0;

    /* center element */
    display: flex;
    justify-content: center;
    align-items: center;
}

#filedrop {
    width: 200px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

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

    &:hover {
        text-decoration: underline;
    }

    &:visited {
        color: inherit;
    }

    &[onclick] {
        cursor: pointer;
    }

    &.header:not(:hover) img {
        filter: brightness(40%);
    }
}

.navbar a, .sidebar a {
    width: 100%;
}

.navbar a, .sidebar a, a.button, input[type=submit].button {
    text-align: center;
    
    border-bottom: #6f6f6f70 4px solid;
    text-decoration: none;

    padding: 0.2em 0em;
    margin: 0em 0.3em;

    &:not(:active):hover {
        outline: 1px #6f6f6f70 solid;
        border-bottom-color: #d2d2d2;
    }
}

a.button, input[type=submit].button {
    min-width: 3em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    background: transparent;

    &:hover {
        cursor: pointer;
    }

    &:active, &:hover {
        user-select: none;
    }
}

.editor button {
    color: inherit;
    font-family: inherit;
    font-size: inherit;

    background-color: #1e1e1ee0;
    border: none;
    border-bottom: #6f6f6f70 4px solid;
    outline: 1px #6f6f6f70 solid;

    &:not(:hover) img {
        filter: brightness(70%);
    }

    &:hover:not(:active) {
        border-bottom-color: #d2d2d2;
        cursor: pointer;
    }
}

:not(:hover) .floating {
    display: none;
}

.floating {
    background-color: #1e1e1ee0 !important;
    position: absolute;
    right: 0%;
}

.navbar {
    display: flex;
    justify-content: space-evenly;
}

.block {
    background-color: #1e1e1ee0;
    padding: 0.4em;
    border-top: #3c3c3c 4px solid;
    box-shadow: 0px 10px 20px #0003;
    outline: 1px #6f6f6f70 solid;
    margin-bottom: 0.5em;
}

img.zoomable {
    outline: 0px #d2d2d2 solid;
}

.block[onclick], img.zoomable {
    transition: background-color 0.5s, outline 0.5s;

    &:hover, &:active {
        background-color: #252525e0;
        outline: 1px #d2d2d2 solid;
        outline-width: 3px;
        cursor: pointer;
    }
}

.block .smallimg {
    width: 35.7%;
    height: 100%;
    background-position: center;
    background-size: cover;
    outline: 1px #6f6f6f70 solid;
}

.block .excerpt {
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;

    /* prettier but less supported ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

.block.tile {
    width: 120px;
    height: 100px;
    display: flex;
    gap: 0.5em;
    flex-direction: column;
    justify-content: center;
    text-align: center;

    & .icon {
        flex-grow: 1;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        image-rendering: pixelated;
    }
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    overflow: hidden; /* for responsive mode */

    & a {
        text-align: left;
        margin: 0px 0px;

        &[style]::before {
            content: ' ';
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: transparent;
            background-image: var(--icon);
            margin-right: 0.5em;
            margin-left: 0.5em;
            filter: brightness(70%);
        }
    }
}

/* copies the style above... */
.iconbutton[style] {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-image: var(--icon);
    margin-right: 0.5em;
    margin-left: 0.5em;
    filter: brightness(70%);
    border: none;
}

#link_kofi {
    &:hover>span {
        background-color: #ee4c4c;
        padding: 0.1em 0.4em;
        position: absolute;
        float: right;
        transform: rotate(-5deg) translateX(10%);
        color: white;
        border-radius: 0.3em;
        font-size: 1em;
    }
    &:not(:hover)>span {
        display: none;
    }
}

.attribution {
    filter: opacity(40%);
}

input, textarea {
    color: inherit;
    border: none;
    font-size: inherit;
    font-family: inherit;
    padding-left: inherit;
    padding-right: inherit;

    &[type=text], &[type=password], &[type=datetime], &[type=datetime-local] {
        background: #0000004a;
        outline: 1px #6f6f6f70 solid;

        &::placeholder {
            color: #3c3c3c;
            font-style: italic;
        }
    }
}

textarea {
    background: #0000004a;
    outline: 1px #6f6f6f70 solid;

    &::placeholder {
        color: #3c3c3c;
        font-style: italic;
    }

    &.vertical {
        resize: vertical;
    }

    &.pre {
        font-family: 'Jetbrains Mono', 'Courier New', Courier, monospace;
    }
}

.code-hilight {
    background: #0000004a;
    font-family: 'Jetbrains Mono', 'Courier New', Courier, monospace;
    tab-size: 3;
    text-wrap: auto;
    text-align: initial;

    &::before {
        pointer-events: all;
        cursor: pointer;
        content: ' ';
        float: right;
        position: relative;
        background-color: #1e1e1ee0;
        outline: 1px #6f6f6f70 solid;
        padding: 0.2em;
        width: 16px;
        height: 16px;
        background: url('/static/images/blog/icon_copy.png') no-repeat 3px 3px;
        filter: brightness(70%);
    }
    &:active::before {
        background-color: #252525e0;
        background-image: url('/static/images/blog/icon_check.png');
        filter: brightness(100%);
    }
}

@keyframes egg_wiggle {
    0% { transform: rotate(0deg); }
    5% { transform: rotate(40deg) scale(120%); }
    15% { transform: rotate(-40deg) scale(140%); }
    25% { transform: rotate(40deg) scale(140%); }
    35% { transform: rotate(-40deg) scale(120%); }
    40%, 100% { transform: rotate(0deg); }
}

@keyframes egg_disabled {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#egg-fetcher:not(:hover,.disabled) {
    animation: egg_wiggle 3s ease-in-out 0s infinite normal none;
}

#egg-fetcher:hover {
    transform: scale(140%);
}

#egg-fetcher.disabled {
    pointer-events: none;
    filter: brightness(50%);
    animation: egg_disabled 2s linear 0s infinite normal none;
}