/* 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-hidden: #4f4f4f;
    --color-alt: #be1858;

    --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;
    --color-files: #46cf7d;
    --color-files-dark: #359c5e;

    --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)}
table.files a:link,      a.files:link {      color: var(--color-files)}
table.files a:visited,   a.files:visited {   color: var(--color-files-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 <"; }
.button-files:after {           content:"files"; color: var(--color-files); }
.button-files:hover:after {     content:"> files <"; }

/* 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: 30px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
}

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

h4 {
    color: var(--color-main);
    font-size: 16px;
    margin-top: 30px;
    margin-bottom: 16px;
    text-align: center;
    font-weight: bold;
}

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

.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-nav, .buttons-nav a {
    color: var(--color-accent);
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
}

.buttons-links, .buttons-links a {
    color: var(--color-accent);
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
}

.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;
    font-size: 15px;
    margin-left: auto;
    margin-right: auto;
}

td { color: var(--color-hidden); }
td:nth-child(2) { 
    color: var(--color-accent);
    text-align: right;
}

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

pre {
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 3px;
    padding-right: 3px;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

pre.writing { color: var(--color-writing-dark); }
pre.journal { color: var(--color-journal-dark); }
pre.files { color: var(--color-files-dark); }

.updated {
    color: var(--color-hidden);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 20px;
}

.clock {
    color: var(--color-main);
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    margin-top: 4px;
    margin-bottom: 12px;
}

.clock-status {
    color: var(--color-main);
    font-size: 16px;
    text-align: center;
    margin-top: 0px;
}

.button-clock, .button-clock a {
    color: var(--color-accent);
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 0px;
    text-align: center;
    cursor: pointer;
}

/** toggles */

.toggle-container {
    text-align: center;
    margin-bottom: 20px;
    user-select: none;
}

.toggle-container input {
    cursor: pointer;
    appearance: none;
    width: 24px;
    height: 24px;
    background-color: var(--color-bg);
    border: 2px solid var(--color-accent);
    border-radius: 0px;
    position: relative;

    &:checked::before {
        content: "";
        position: absolute;
        inset: 4px;
        background-color: var(--color-accent);
    }
}

.toggle-container input:hover {
    filter: brightness(60%);
}

#toggle-videos {
    border-color: var(--color-videos);
    &:checked::before { background-color: var(--color-videos); }
}
#toggle-music {
    border-color: var(--color-music);
    &:checked::before { background-color: var(--color-music); }
}
#toggle-photos {
    border-color: var(--color-photos);
    &:checked::before { background-color: var(--color-photos); }
}
#toggle-writing {
    border-color: var(--color-writing);
    &:checked::before { background-color: var(--color-writing); }
}
#toggle-journal {
    border-color: var(--color-journal);
    &:checked::before { background-color: var(--color-journal); }
}
#toggle-files {
    border-color: var(--color-files);
    &:checked::before { background-color: var(--color-files); }
}