:root {
    --black: rgb(0, 0, 0);
    --dark: rgb(64, 64, 64);
    --gray: rgb(128, 128, 128);
    --white: rgb(255, 255, 255);
    --aqua: rgb(64, 192, 255);
    --red: rgb(192, 32, 32);
    --green: rgb(32, 192, 32);
    --blue: rgb(32, 32, 192);

    --margin-tiny: 6px;
    --margin-small: 12px;
    --margin-medium: 21px;
    --margin-big: 33px;

    --border-medium: 3px;
    --border-big: 5px;
    --border-giant: 9px;

    --round-border-tiny: 3px;
    --round-border-small: 4px;
    --round-border-medium: 6px;

    --padding-tiny: 3px;
    --padding-small: 6px;
    --padding-medium: 12px;
    --padding-big: 18px;
    --padding-giant: 32px;
}

html {
    font-family: 'Nanum Gothic Coding';
}

div.box {
    padding: var(--padding-medium);
    margin: var(--margin-small);
    border: solid var(--border-medium) var(--gray);
    background-color: var(--black);
}

div.trunc-height {
    max-height: 400px;
    max-width: 70%;
    overflow: auto;
}

div.header a {
    color: var(--white);
    text-decoration: none;
    margin: var(--margin-small);
}

div.header a:hover {
    border-bottom: var(--border-medium) solid var(--white);
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 48px;
    margin-bottom: 16px;
}

body {
    background-color: var(--dark);
    color: var(--white);
    font-size: 16px;
}

table {
    border-collapse: collapse;
    margin: var(--margin-big) var(--margin-medium);
}

table th {
    background-color: var(--gray);
    transition: padding 0.5s ease-out;
    border: var(--border-medium) solid var(--lightgray);
    font-size: 21px;
}

table tr th:first-child {
    border-left: var(--border-big) solid var(--gray);
}

table tr th:last-child {
    border-right: var(--border-big) solid var(--gray);
}

table tr:first-child th {
    border-top: var(--border-big) solid var(--gray);
}

table tr:last-child th {
    border-bottom: var(--border-big) solid var(--gray);
}

table td {
    padding: 15px;
}

table th {
    padding: 15px;
}

table tr:nth-last-child(odd) {
    background-color: var(--black);
}

table tr:nth-last-child(even) {
    background-color: var(--dark);
}

a:link {
    border-bottom: var(--border-medium) solid var(--aqua-trans);
    color: var(--aqua);
    text-decoration: none;
    transition: border 0.3s;
}

a:visited {
    color: var(--aqua);
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    border-bottom: var(--border-medium) solid var(--aqua);
}

a::selection {
    color: var(--aqua-compl);
}

pre {
    line-height: 0.9;
    max-height: 80%;
    overflow-x: auto;
}

img {
    max-width: 400px;
    max-height: 400px;
}

li {
    margin: var(--margin-small);
}

input {
    margin-bottom: var(--margin-tiny);
}

select {
    margin-bottom: var(--margin-tiny);
}

span.color-red {
    color: var(--red);
}

span.color-blue {
    color: var(--blue);
}

span.color-green {
    color: var(--green);
}

span.size-tiny {
    font-size: 0.619rem;
}

span.size-small {
    font-size: 0.762rem;
}

span.size-big {
    font-size: 1.19rem;
}

span.size-giant {
    font-size: 1.571rem;
}