/* fonts */

@font-face {
    font-family: 'Consolas';
    src: url('/fonts/consolas.woff2') format('woff2'),
         url('/fonts/consolas.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Consolas';
    src: url('/fonts/consolas-bold.woff2') format('woff2'),
         url('/fonts/consolas-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* global variables */

:root{
    --color-bg: #0c0c0c;
    --color-main: #ffffff;
    --color-accent: #898989;
    --color-dark: #171717;

    --color-videos: #ff203e;
    --color-videos-dark: #bd1a30;
    --color-music: #ff30c8;
    --color-music-dark: #b82390;
    --color-photos: #af77ff;
    --color-photos-dark: #8259bd;
    --color-writing: #2da1ff;
    --color-writing-dark: #2077bf;
    --color-journal: #27dddd;
    --color-journal-dark: #1ea8a8;

    --table-column-width: 350px;
}

/* links */

a { text-decoration: none; }
a:hover { text-decoration: underline; }

table.videos a:link,     a.videos:link {     color: var(--color-videos) }
table.videos a:visited,  a.videos:visited {  color: var(--color-videos-dark) }
table.music a:link,      a.music:link {      color: var(--color-music) }
table.music a:visited,   a.music:visited {   color: var(--color-music-dark) }
table.photos a:link,     a.photos:link {     color: var(--color-photos) }
table.photos a:visited,  a.photos:visited {  color: var(--color-photos-dark) }
table.writing a:link,    a.writing:link {    color: var(--color-writing) }
table.writing a:visited, a.writing:visited { color: var(--color-writing-dark) }
table.journal a:link,    a.journal:link {    color: var(--color-journal)}
table.journal a:visited, a.journal:visited { color: var(--color-journal-dark)}

/* index page buttons */

.button-videos:after {          content:"video"; color: var(--color-videos); }
.button-videos:hover:after {    content:"> video <"; }
.button-music:after {           content:"music"; color: var(--color-music); }
.button-music:hover:after {     content:"> music <"; }
.button-photos:after {          content:"photo"; color: var(--color-photos); }
.button-photos:hover:after {    content:"> photo <"; }
.button-writing:after {         content:"write"; color: var(--color-writing); }
.button-writing:hover:after {   content:"> write <"; }
.button-journal:after {         content:"jrnal"; color: var(--color-journal); }
.button-journal:hover:after {   content:"> jrnal <"; }

/* general */

body {
    background-color: var(--color-bg);
    font-family: 'Consolas', monospace;
}

h1 {
    color: var(--color-main);
    font-size: 48px;
    margin-top: 56px;
    margin-bottom: 5px;
    text-align: center;
    font-weight: bold;
}

h2 {
    color: var(--color-main);
    font-size: 36px;
    margin-top: 40px;
    text-align: center;
    font-weight: bold;
}

h3 {
    color: var(--color-main);
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}

.buttons-generic, .buttons-generic a {
    color: var(--color-accent);
    font-size: 24px;
    margin-right: 7px;
    margin-left: 7px;
    line-height: 1.5;
    text-align: center;
}

.buttons-index, .buttons-index a {
    font-size: 36px;
    line-height: 1.5;
    text-align: center;
    text-decoration-line: none;
}

.column-width {
    width: var(--table-column-width);
}

table, tr, td {
    border: 2px solid var(--color-dark);
    border-collapse: collapse;
    padding: 2.8px;
    border-left: none;
    border-right: none;
    line-height: 1.4;
    vertical-align: top;
    color: var(--color-accent);
    font-size: 15px;
    margin-left: auto;
    margin-right: auto;
}

.year {
    color: var(--color-main);
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
}

.text {
    color: var(--color-accent);
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
}