* { margin: 0; padding: 0; border: 0; appearance: none; box-sizing: content-box; transition: color 0.4s ease-out, border-color 0.4s ease-out, background-color 0.4s ease-out; }
*:focus { outline: 2px dotted rgb( var( --color-accent ) / 1.0 ); }

body { background: rgb( var( --color-base ) / 1.0 ); }
body, button { font-family: "Barlow Condensed", sans-serif; color: rgb( var( --color-main ) / 1.0 ); font-size: 12pt; font-weight: 500; letter-spacing: 0.1em; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; white-space: nowrap; }
p { font-weight: 400; }
ul, ol, li { list-style: none; }
table { width: 100%; border-collapse: collapse; empty-cells: show; }
th { white-space: nowrap; }
th, td { margin: 0; padding: 10px; border: 1px dotted rgb( var( --color-main ) / 1.0 ); }
tbody>tr>th,
tbody>tr>td { text-align: left; }

a { border-bottom: 1px dotted rgb( var( --color-main ) / 1.0 ); color: rgb( var( --color-main ) / 1.0 ); text-decoration: none; }
a * { pointer-events: none; }
a.hover, a:hover { border-bottom: 1px dotted rgb( var( --color-accent ) / 1.0 ); color: rgb( var( --color-accent ) / 1.0 ); transition: all 0.2s ease-out; }
a.focus, a:focus { border-bottom: 1px dotted rgb( var( --color-accent ) / 1.0 ); color: rgb( var( --color-accent ) / 1.0 ); transition: all 0.2s ease-out; outline: none; }

button { display: inline-flex; place-content: center; align-items: center; position: relative; overflow: hidden; padding: 12px 24px; border: 1px solid rgb( var( --color-main ) / 1.0 ); border-radius: 9px; color: rgb( var( --color-main ) / 1.0 ); background: rgb( var( --color-main ) / 0.2 ); white-space: nowrap; text-shadow: 0 0 4px rgb( var( --color-main ) / 0.6 ); box-shadow: 0 0 0 0 rgb( var( --color-main ) / 1.0 ), 0 0 8px 1px rgb( var( --color-main ) / 0.4 ) inset; backdrop-filter: blur( 16px ); cursor: pointer; outline: none; }
button::before { content: ""; display: block; position: absolute; left: 0; top: -160px; width: 30px; height: 100%; background: rgb( var( --color-main ) / 1.0 ); opacity: 0.0; }
button.hover:not( :disabled ), button:hover:not( :disabled ),
button.focus:not( :disabled ), button:focus:not( :disabled ) { background: rgb( var( --color-main ) / 0.4 ); box-shadow: 0 0 12px 2px rgb( var( --color-main ) / 1.0 ), 0 0 12px 1px rgb( var( --color-main ) / 1.0 ) inset; transition: all 0.2s ease-out; cursor: pointer; outline: none; }
button.hover:not( :disabled )::before, button:hover:not( :disabled )::before,
button.focus:not( :disabled )::before, button:focus:not( :disabled )::before { transition: all 0.2s ease-out; animation: aon-button-hover 0.4s linear; }
button.active:not( :disabled ), button:active:not( :disabled ) { background: rgb( var( --color-main ) / 0.8 ); box-shadow: 0 0 12px 2px rgb( var( --color-main ) / 1.0 ), 0 0 12px 1px rgb( var( --color-main ) / 1.0 ) inset; cursor: pointer; }
button.disabled, button:disabled { border: 1px solid rgb( var( --color-main ) / 0.2 ); color: rgb( var( --color-main ) / 0.4 ); text-shadow: none; background: rgb( var( --color-main ) / 0.1 ); box-shadow: none; cursor: default; }
button * { pointer-events: none; }

@keyframes aon-button-hover {
	  0% { transform: scale(  2.00 ) rotate( 60deg ); opacity: 0.0; }
	 20% { transform: scale( 10.00 ) rotate( 60deg ); opacity: 0.9; }
	 40% { transform: scale( 30.00 ) rotate( 60deg ); opacity: 0.4; }
	 80% { transform: scale( 45.00 ) rotate( 60deg ); opacity: 0.2; }
	100% { transform: scale( 50.00 ) rotate( 60deg ); opacity: 0.0; }
}

input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select { padding: 4px 9px; border: 1px solid rgb( var( --color-sub ) / 1.0 ); background: rgb( var( --color-sub ) / 0.2 ); box-shadow: 0 0 8px 1px rgb( var( --color-sub ) / 0.2 ) inset; outline: none; }

input[type="text"].focus, input[type="text"]:focus,
input[type="password"].focus, input[type="password"]:focus,
input[type="number"].focus, input[type="number"]:focus,
textarea.focus, textarea:focus,
select.focus, select:focus { outline: 2px dotted rgb( var( --color-accent ) / 1.0 ); }

input[type="text"].disabled, input[type="text"]:disabled,
input[type="password"].disabled, input[type="password"]:disabled,
input[type="number"].disabled, input[type="number"]:disabled,
textarea.disabled, textarea:disabled,
select.disabled, select:disabled { border: 1px solid rgb( var( --color-main ) / 0.2 ); color: rgb( var( --color-main ) / 0.4 ); background: rgb( var( --color-main ) / 0.1 ); box-shadow: none; }

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder { color: rgb( var( --color-main ) / 1.0 ); opacity: 0.5; }

input[type="checkbox"] { margin: 0 10px 0 0; accent-color: rgb( var( --color-accent ) / 1.0 ); appearance: checkbox; }

textarea { padding: 9px; }
select[multiple] { padding: 9px; }

.fa-solid { width: fit-content; height: fit-content; line-height: 1; letter-spacing: 0; }