@charset "UTF-8";

@font-face
{
    font-family: 'RockSalt';
    src: url('font/RockSalt-Regular.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: 'WenKai';
    src: url('font/LXGWWenKaiMonoTC-Regular.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root
{
    --main-color: #527191;
    --w-color: #ffffff;
    --b-color: #111111;
}

html
{
    font-family: 'WenKai';
    padding: 0;
    margin: 0;
    background-color: var(--main-color);
    color: var(--b-color);
}

body
{
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
}

main
{
    flex: 1;
    padding: 1%;
}

.container
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1000px;
    gap: 0px;
}

.column
{
    flex: 1 1 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

#textNickName
{
    text-align: center;
    color: var(--b-color);
    font-family: 'RockSalt';
}

#listLinks
{
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#listLinks li
{
    list-style-type: none;
    transition: 0.3s;
    margin: 5px;
    height: 3em;
    width: 9em;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
}

#listLinks a
{
    display: inline-flex;
    padding: 0 10px;
    gap: 5px;
    align-items: center;
    justify-self: center;
    flex-grow: 1;
    color: var(--b-color);
    text-decoration: none;
}

#listLinks img
{
    object-fit: contain;
    width: 2.5em;
    height: 2.5em;
}

#imagePanel
{
    justify-content: center;
}

.gridPaper
{
    background-color: var(--w-color);
    background-image:
        repeating-linear-gradient(0deg,
            rgb(from var(--b-color) r g b / 0.1),
            rgb(from var(--b-color) r g b / 0.1) 1px,
            transparent 1px,
            transparent 8px),
        repeating-linear-gradient(90deg,
            rgb(from var(--b-color) r g b / 0.1),
            rgb(from var(--b-color) r g b / 0.1) 1px,
            transparent 1px,
            transparent 8px);
    border: 2px solid var(--b-color);
}

.afterglow
{
    filter:
        drop-shadow(1px 0px 0px var(--b-color)) drop-shadow(-1px 0px 0px var(--b-color)) drop-shadow(0px 1px 0px var(--b-color)) drop-shadow(0px -1px 0px var(--b-color)) drop-shadow(3px 0px 0px var(--main-color));
}