/* Colors */

/* ---------------- Variables ---------------- */
html {
    --border-radius:            5px;
    --accent-color-light:       aliceblue;
    --accent-color-middle:      rgb(173, 189, 203);
    --accent-color-dark:        rgb(24, 47, 56);
    --panel-border_one:         var(--accent-color-dark);
    --panel-border_two:         var(--accent-color-dark);
    --panel-header:             var(--accent-color-dark);
    --panel-background:         var(--accent-color-light);
    --body-background:          rgb(255, 255, 255);
    --input-background:         white;
    --input-background-hover:   rgb(216, 222, 227);
    --input-highlight:          rgb(86, 176, 255);
    --navvar-background:        rgb(179, 200, 218);
    --navbar-buttons-bg:        var(--accent-color-light);
    --navbar-buttons-hover:     var(--input-background-hover);
    --input-border-radius:      var(--border-radius);
    --link-color:               var(--accent-color-dark);
    --link-color-hover:         var(--input-highlight);
    --logo-outline-color:       var(--input-highlight);}

/* Background texture */

body { background-image: url('graphgreen.gif'); }


/* ----------------- Others -------------------- */ 

* { scrollbar-width: thin;}

img { image-rendering: pixelated;}

.logo { position: relative; }
.logo > img {
    position: absolute;
    width: 80px;
    top: 15px;
    right: -40px;}

.links { overflow-y: auto; }

.links a { text-decoration: none;}

/* ----------------- Fonts -------------------- */

@font-face {
    font-family:            'special elite';
    src:                    url('../fonts/specialelite.woff2') format('woff');
    font-weight:            normal;
    font-style:             normal;}

@font-face {
    font-family:            'honyaji';
    src:                    url('../fonts/HonyaJi-Re.ttf') format('truetype');
    font-weight:            normal;
    font-style:             normal;}


@font-face {
    font-family:            'basiic';
    src:                    url('../fonts/basiic.ttf') format('truetype');
    font-weight:            normal;
    font-style:             normal;}

@font-face {
    font-family:            'beefont';
    src:                    url('../fonts/beefont.ttf') format('truetype');
    font-weight:            normal;
    font-style:             normal;}

* { text-align: center; }

body { font-family: 'special elite', honyaji, basiic, monospace, serif, sans-serif; }

/* ----------------- Color -------------------- */
.navbar { background-color: var(--navvar-background); }

.panel {
    position:               relative;
    border-radius:          5px;
    border:                 2px solid var(--panel-border_one);
    background-color:       var(--panel-background);}

.chat-history {
    border-radius:          var(--chat-border-radius);
    background-color:       var(--chat-history-background);}

/* ------------- Decorations & dividers (D&D) -------------------- */
.panel .header { position: relative; }
.panel .header::after {
    position:                   absolute;
    bottom:                     -3px;
    content:                    "-   -  --⛤--  -   -";
    font-size:                  15px;}
   
/* ------------- Navbars stiling ------------------- */
.about, .links > div, .lang-picker { 
    border:                     5px groove rgb(214, 236, 255);
    background:                 var(--navbar-buttons-bg);}

.about:hover, .links > div:hover, .lang-picker:hover { 
    background-color:           var(--navbar-buttons-hover);
    transition:                 background-color 0.1s;}

/* ------------- Inputs & links ----------------- */
button, .button {
    font-family:                'special elite';
    background-color:           var(--input-background);
    border:                     0;
    border-radius:              var(--input-border-radius);
    border-bottom:              4px solid var(--input-highlight);
    padding:                    0.35em;}

button:hover, .button:hover {
    background-color:           var(--input-background-hover);
    border-bottom:              2px solid var(--input-highlight);
    padding-bottom:             0.1em;
    padding-top:                calc((0.35em + (0.25em - 0.1em)) + 2px);
    transition:                 background-color 0.1s;
    transition:                 border-bottom 0.1s;
    transition:                 padding-bottom 0.15s;
    transition:                 padding-top 0.15s;}

input[type=text], input[type=password] {
    font-family:                'special elite';
    border:                     0;
    border-radius:              var(--input-border-radius);
    border-bottom:              4px solid var(--input-highlight);
    transition:                 background-color 0.1s;
    transition:                 border-bottom 0.1s;}

    input[type=text]:focus, input[type=password]:focus { outline: 0; }

    input[type=text]:hover, input[type=password]:hover {
        border-bottom:              2px solid var(--input-highlight);
        background-color:           var(--input-background-hover);
        transition:                 background-color 0.1s;}

a, a:visited { 
    color:                      var(--link-color);
    text-decoration-style:      wavy;}

a:hover {
    transform:              translateY(-2px);
    color:                  var(--link-color-hover);
    transition:             color 0.1s;
    transition:             transform 0.1s;}

.logo { position: relative; }

    .logo-text { 
/*        position:           absolute;
        top:                50%;
        left:               50%;
        transform:          translateX(-50%) translateY(-50%); */
        font-size:          40px;
        color:              white;
        text-shadow:      
            2px 0 var(--logo-outline-color), 
            -2px 0 var(--logo-outline-color), 
            0 2px var(--logo-outline-color), 
            0 -2px var(--logo-outline-color),
            1px 1px var(--logo-outline-color), 
            -1px -1px var(--logo-outline-color), 
            1px -1px var(--logo-outline-color), 
            -1px 1px var(--logo-outline-color);}
        
    .logo a {
        color:              white;
        text-decoration:    none;
    }