@import url("../../fonts/OpenSans/variable/opensans_variable.css");
@import url("../../fonts/Anton/anton.css");
@import url("../../fonts/LeMans/lemans_static.css");
@import url("../../fonts/material-symbols-variable/material-symbols-variable.css");

:root {
	--col_a:limegreen;
	--col_a_hover:white;
}
* {
    box-sizing:border-box;
    margin:0px;
    padding:0px;
}
body {
    font-family:"Open Sans", Verdana, Arial, sans-serif;
    padding:1em;
}

.ta {
    border:1px solid orange;
    border-left-width:5px;
    background-color:#ffc;
    padding:0.2em 1em;
    margin:0.5em 0px;
    font-size:0.9rem;
    font-family:"Courier New",monospace;
}

.code {
    font-family:"Courier New",monospace;
    font-size:0.8em;
    border-left:0.2em solid steelblue;
    color:#333;
    background-color:#eee;
    padding:0.2em 0.5em;
    border-radius:0.2em;
}

.info {
    border-left:5px solid orange;
    padding:0.5em 1em;
    border-radius:0.5em;
    margin:0.5em 0px;
    font-style:italic;
}

.error {
    border-left:5px solid red;
    padding:0.5em 1em;
    border-radius:0.5em;
    margin:0.5em 0px;
    font-weight:bold;
}
.success {
    border-left:5px solid green;
    padding:0.5em 1em;
    border-radius:0.5em;
    margin:0.5em 0px;
    font-style:italic;

}

.array {
    margin:1em auto;
    display:table;
    border-collapse:separate;
    border-spacing:0.1em;
    padding:0.2em;
    border-radius:0.2em;
    border:2px solid orange;
    background-color:white;
}
.array > * {
    display:table-row;
}
.array > :not(:first-of-type) > * {
    display:table-cell;
    padding:0.2em 0.5em;
    border-radius:0.1em;
    border:1px solid #eee;
}
.array > :first-of-type > * {
    
}

.array > :first-of-type {
    border:none;
    display:table-caption;
    font-size:0.8em;
    margin-bottom:0.5em;
    white-space:nowrap;
}
.array > :first-of-type strong {
    margin-right:0.5em;
}
.array > :nth-of-type(2) > * {
    font-weight:bold;
    text-align:center;
    border:1px solid #eee;
}
.array > :not(:nth-of-type(1)):not(:nth-of-type(2)) > * {
    background-color:steelblue;
    color:white;
}

form {
    width:fit-content;
    padding:1em;
    border:2px solid limegreen;
    border-radius:0.2em;
    margin:auto;
    margin-bottom:0.8em;
}

fieldset {
    border-radius:0.5em;
    padding:0.5em;
}
legend {
    padding:0.2em 1em;
    border-radius:0.2em;
    font-weight:bold;
    background-color:white;
}
label {
    display:block;
    margin-bottom:0.5em;
}
label > * {
    margin-right:1em;
}
label .code {
    margin-top:0.2em;
}
input,
textarea,
select {
    padding:0.2em 1em;
    border-radius:0.2em;
    border:1px solid #999;
}

input {
    display:inline-block;
}

input:not([type=radio]):not([type=checkbox]):not([type=time]):not([type=color]):not([type=date]) {
        min-width:15em;
        padding:0.5em 0.8em;
}
input[type=submit] {
    display:block;
    margin:1em auto;
}

output {
    width:auto;
    margin-right:0px;
}


table.data {
	border:2px solid steelblue;
	margin:auto;
    margin-top:0px;
    margin-bottom:0.8em;
	border-collapse:separate;
	border-radius:0.2em;
	padding:0.2em;
}
table.data caption {
    font-style:italic;
    font-size:0.8rem;
    text-align:right;
    margin-bottom:0.2em;
    margin-right:0.2rem;
    color:#666;
}

table.data tr > * {
	padding:0.2em 0.5em;
	border-right:1px solid #eee;
	border-bottom:1px solid #eee;
}
table.data tr > :last-of-type {
	border-right:none;
}
table.data tbody tr:last-of-type > * {
	border-bottom:none;
}
table.data thead th {
	border-bottom-width:2px;
}
table.data .primary {
    background-color:hsl(200,20%,70%);
}

.flexbox {
    width:fit-content;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:1em;
}