/*colors*/
:root
{
 --bg:       #202020;
 --blue:     #0000ff;
 --darkgrey: #373737;
 --fg:       #ffffff;
 --green:    #00ff00;
 --grey:     #404040;
 --purple:   #800080;
 --red:      #ff0000;
 --yellow:   #ffff00;
}

/*fonts*/
/*
@font-face
{
 font-family: font;
 src:         url(file.ttf)
}
*/

/*styles*/
a:link {color: var(--blue);}
a:visited {color: var(--purple);}

dialog, iframe, input, select {border: none;}
address, dialog {padding: 1px;}

blockquote
{
 border-left:   8px solid var(--grey);
 margin-bottom: 0px;
 margin-left:   2em;
 margin-right:  2em;
 margin-top:    0px;
 padding:       8px;
}

body {font-family: sans-serif;}

dd {margin-left: 2em;}

figure, picture
{
 border: 8px solid var(--fg);
 margin: 0px;
}

hr
{
 border-top:    1px dotted var(--fg);
 border-bottom: none;
}

kbd
{
 border:        1px solid var(--fg);
 border-radius: 4px;
}

menu {padding-inline-start: 2em;}

ol, ul {padding-left: 2em;}

table {border-collapse: collapse;}
tr:nth-child(even) {background-color: var(--darkgrey);}

u
{
 text-decoration-color: var(--red);
 text-decoration-line:  underline;
 text-decoration-style: wavy;
}

/*classes*/
.center {text-align: center;}

.bbFg {border-bottom: 1px dotted var(--fg);}

.borderFg {border: 1px dotted var(--fg);}

.bgBg       {background-color: var(--bg);}
.bgBlue     {background-color: var(--blue);}
.bgDarkGrey {background-color: var(--darkgrey);}
.bgFg       {background-color: var(--fg);}
.bgGreen    {background-color: var(--green);}
.bgGrey     {background-color: var(--grey);}
.bgPurple   {background-color: var(--purple);}
.bgRed      {background-color: var(--red);}
.bgYellow   {background-color: var(--yellow);}

.fgBg       {color: var(--bg);}
.fgBlue     {color: var(--blue);}
.fgDarkGrey {color: var(--darkgrey);}
.fgFg       {color: var(--fg);}
.fgGreen    {color: var(--green);}
.fgGrey     {color: var(--grey);}
.fgPurple   {color: var(--purple);}
.fgRed      {color: var(--red);}
.fgYellow   {color: var(--yellow);}

.ib {display: inline-block;}

.meterVertical {transform: rotate(-90deg);}

.right {text-align: right;}

.table
{
 display:         table;
 border-collapse: collapse;
}

.tr {display: table-row;}

.td
{
 display:        table-cell;
 padding:        1px;
 vertical-align: top;
 white-space:    nowrap;
}

.tableBorder th {border: 1px dotted var(--fg);}
.tableBorder td {border: 1px dotted var(--fg);}

/*IDs*/
#flexbox
{
 display:        flex;
 flex-direction: column;
/*align-items:   center;*/
}