@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wdth,wght@62..125,100..900&family=Instrument+Serif&family=JetBrains+Mono:wght@400;500;700&family=Doto:wght@400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yarndings+12&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {

    color-scheme: light dark;

    /* Primary Colour */
    --lime: #C2FE0C;
    --black: #000000;
    --surface: #0A0A0A;
    --panel: #1C1C1C;
    --white: #FFFFFF;
    --grey: #8E8E8E;
    --violet: #5200FF;
    --pink: #FF2E93;
    --red: #FF3B30;
    --cyan: #00E5FF;
    --gray1: #1C1C1C;
    --gray2: #8E8E8E;
    --gray3: #E5E5E5;

    /* Type */
    --font-logo: 'Anton', 'Impact', sans-serif;
    --font-mono: 'Share Tech Mono', 'JetBrains Mono', 'Courier New', monospace;
    --font-pixel: 'Tiny5', 'JetBrains Mono', monospace;
    --font-decor: 'Yarndings 12', sans-serif;

    /* Component Colours */
    --color-background: light-dark(var(--white),var(--black));
    --color-text: light-dark(var(--black),var(--white));
    --color-surface: light-dark(var(--gray3),var(--gray1));
    --color-decor: var(--gray2);
    --color-accent-primary: light-dark(var(--violet),var(--lime));
    --color-accent-secondary: light-dark(var(--lime),var(--violet));
    --color-accent-warning: var(--red);

}
:root[data-theme='dark'] {
    color-scheme: dark;
}
:root[data-theme='light'] {
    color-scheme: light;
}

* { box-sizing: border-box; border-radius: 0; }


body {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--color-background);
    color: var(--color-text);
    font: 400 15px/1.55 var(--font-mono);
}

h1, .title{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    background: var(--color-accent-primary);
    color: var(--color-background);
    font-family: var(--font-pixel);
    text-transform: uppercase;
    font-size: clamp(20px,12vw, 40px);
    letter-spacing: 0.01em;
    padding: 0 1rem;
}
h1{
    margin: 0 0 1rem 0;
}


p{ margin: 0; }


.container {
    display: flex;
    flex-direction: column;
    margin: 0 auto 0 auto;
    height: 100vh;
    overflow: visible;
    max-width: 1000px;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

header{
    position: relative;
    display: flex;
    gap: 0.5rem;
    align-items: end;
    padding: 0.5rem;

}
footer{
    display: flex;
    position: relative;
    justify-content: space-between;
    color: var(--grey);
    padding: 1rem 0.5rem 0.25rem 0.5rem;
}

.main-content{
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;

    padding: 0.5rem;
}
.message-container{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    margin: 0 0 2rem 0;
    overflow-y: auto;
}
.message-container > *:first-child {
    margin-top: auto;
}

.form-container{
    flex: 0 0 auto;
    margin-top: auto;
}
.username{
    font-family: var(--font-mono);
    font-weight: bold;
    margin: 0 0 0.25rem;
}

form{
    background: var(--color-surface);
    padding: 1rem 1rem;
    width: 100%;
}
textarea, input{
    font-family: var(--font-mono);
    font-size: 1em;
    border: none;
    color: var(--color-text);
    background: none;
}
textarea:focus, input:focus{
    outline: none;
}

.plus {
    position: absolute;
    transform: translate(-50%,-50%);
    width: 4rem;
    height: 4rem;
    background:
            linear-gradient(var(--gray2), var(--gray2)) center/100% 1px no-repeat, /* Horizontal line */
            linear-gradient(var(--gray2), var(--gray2)) center/1px 100% no-repeat; /* Vertical line */
}
.tr { top: 0; left:100%}
.tl { top: 0; left:0 }
.br { top: 100%; left:100% }
.bl { top: 100%; left:0 }

.status-bar-normal{
    font-family: var(--font-pixel);
    font-size: 1rem;
    font-weight: bold;
    background: var(--color-text);
    color: var(--color-background);
    padding: 0.5rem;

}
.status-bar-error{
    font-family: var(--font-pixel);
    font-size: 1rem;
    font-weight: bold;
    background: var(--red);
    color: var(--color-text);
    padding: 0.5rem;
}

.flex-container{
    display: flex;
}

.message-decor{
    font-family: var(--font-decor);
    color: var(--grey);
    padding: 0 0 0 0.25rem;
    margin-left: auto;
}

.vertical{
    writing-mode: vertical-rl;
    display: inline-block;
}

textarea, input[type=text]{
    width: 100%;
}


input[type=submit]{
    font-family: var(--font-pixel);
    background: var(--color-accent-primary);
    color: var(--color-background);
    border: none;
    padding: 0.5rem 1rem;
}
input[type=submit]:hover{
    text-decoration: underline;
}
label{
    font-family: var(--font-mono);
    color: var(--color-decor);
    margin-right: 0.5em;
}

.panel{
    background: var(--color-surface);
    padding: 1rem 1rem;
}

.border-panel{
    border-style: solid;
    border-width: thin;
    border-color: var(--color-decor);
    padding: 0.5rem 0.25rem;
}
.input-wrapper:focus-within{
    border-color: var(--color-accent-primary);
}
.username-input{
    width: 100%;
    max-width: 500px;
}
.dot-font{
    font-family: var(--font-pixel);
    font-weight: bold;
}
.decor-font{
    font-family: var(--font-decor);
    color: var(--color-decor);
}

button{
    font-family: var(--font-pixel);
    background: var(--color-accent-primary);
    color: var(--color-background);
    border: none;
    padding: 0.5rem 1rem;
}
button:hover{
    text-decoration: underline;
}

.btn, .btn:visited, .btn:link{
    font-family: var(--font-pixel);
    background: var(--color-accent-primary);
    color: var(--color-background);
    border: none;
    padding: 0.5rem 1rem;
}
.btn:hover{
    text-decoration: underline;
    color: var(--color-background);
}

.login-button{
    font-family: var(--font-pixel);
    background: var(--color-accent-primary);
    color: var(--color-background);
    border: none;
    padding: 0.25rem 0.5rem;
    margin-left: auto;
}

.centered{
    margin: auto;
    padding: 0.5rem;
    position: relative;
}

.icon{
    aspect-ratio: 1/1;
    image-rendering: pixelated;
}
.logo{
    background: var(--color-background);
    height: 3.5rem;
    mask: url("icons/logo.png") no-repeat center / contain;
}

.moon{
    background: var(--color-text);
    height: 2rem;
    mask: url("icons/moon.png") no-repeat center / contain;
}
.sun{
    background: var(--color-text);
    height: 2rem;
    mask: url("icons/sun.png") no-repeat center / contain;
}

.logout{
    background: var(--color-accent-primary);
    height: 1rem;
    mask: url("icons/logout.png") no-repeat center / contain;
}
.moon:hover, .sun:hover{
    background: var(--color-accent-primary);
}

a:link, a:visited{
    color: var(--color-accent-primary);
    text-decoration: none;
}
a:hover{
    color: var(--color-accent-primary);
    text-decoration: underline;
}

.login-registration-form{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.no-display{
    display: none;
}