@import url('https://fonts.bunny.net/css2?family=Noto+Sans+Mono&display=swap');

:root {
    --color-black:      #282828FF;
    --color-red:        #cc241dFF;
    --color-green:      #98971aFF;
    --color-yellow:     #d79921FF;
    --color-blue:       #458588FF;
    --color-magenta:    #b16286FF;
    --color-cyan:       #689d6aFF;
    --color-white:      #bdae93FF;
    
    --color-blackb:     #504945FF;
    --color-redb:       #d65d0eFF;
    --color-greenb:     #000000FF;
    --color-yellowb:    #000000FF;
    --color-blueb:      #000000FF;
    --color-magentab:   #000000FF;
    --color-cyanb:      #000000FF;
    --color-whiteb:     #fbf1c7FF;
    
    --color-foreground: #ebdbb2FF;
    --color-background: #282828CC;
    --color-border:     #bdae93FF;

    --size-gap:         20px;
    --size-border:      2px;
    --size-blur:        21px;
    --size-image:       150px
}


body {
    margin: 0;
    min-height: 100vh;
    background-image: url("/assets/images/background.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
}

a {
    color: var(--color-cyan);
    text-decoration: underline;
}

center {
    display: inline-block;
    width: 100%;
}

.mainpanel {
    font-family: "Noto Sans Mono", monospace;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    word-wrap: break-word;
    white-space: pre-wrap;
  
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;

    color: var(--color-foreground);
    background-color: var(--color-background);
    backdrop-filter: blur(var(--size-blur));
    border: var(--size-border) solid var(--color-border);
  
    margin: auto;
    position: relative;
    top: var(--size-gap);
    width: 100%;
    max-width: 850px;
    height: calc(100vh - var(--size-gap)*2);
}

.bar {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.gallery {
    margin: auto;
    padding: 5px;
    width: calc((4 * var(--size-image)) + (3 * 5px));
    max-width: 90%;
    column-count: 4;
    column-gap: 5px;
}

.img-gallery {
    display: block;
    margin: 0 0 5px 0;
    max-height: 100%;
    max-width: var(--size-image);
    width: 100%;
    height: auto;
}

.container-image-normal {
    display: flex;
    margin: auto;
    padding: 5px;
    max-width: 90%;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.img-normal {
    display: block;
    max-width: 100%;
    max-height: var(--size-image);
    height: 100%;
}

.text-black    { color: var(--color-black); }
.text-red      { color: var(--color-red); }
.text-green    { color: var(--color-green); }
.text-yellow   { color: var(--color-yellow); }
.text-blue     { color: var(--color-blue); }
.text-magenta  { color: var(--color-magenta); }
.text-cyan     { color: var(--color-cyan); }
.text-white    { color: var(--color-white); }

.text-blackb   { color: var(--color-blackb); }
.text-redb     { color: var(--color-redb); }
.text-greenb   { color: var(--color-greenb); }
.text-yellowb  { color: var(--color-yellowb); }
.text-blueb    { color: var(--color-blueb); }
.text-magentab { color: var(--color-magentab); }
.text-cyanb    { color: var(--color-cyanb); }
.text-whiteb   { color: var(--color-whiteb); }