* {
    font-family: "Victor Mono", monospace;
}

@font-face {
    font-family:    "Basscrw";
    src:            url("assets/basscrw/Basscrw.ttf") format("truetype");
    font-weight:    200;
    font-style:     thin;
}

@font-face {
    font-family:    "Symvola";
    src:            url("assets/Symvola_Duo.ttf") format("truetype");
    font-weight:    200;
    font-style:     thin;
}

.block {
    background-color: var(--bg-dark);
    padding: 4px;
    border-radius: 4px;
}

.centered {
    display: flex;
    justify-content: center;
}

:root {
    --bg-normal: #252525;
    --bg-dark: #383535;

    --font-color: #cccbcb;
    --bg-light: #505050;
    --note-color: #888888;

    --highlight-color-bg: #403030;
    --highlight-color-fg: #ccaaaa;

    --body-shadow-front: #443333;
    --body-shadow-back:  #453545;
}



.logo-text {
  /*font-family: "DM Mono", monospace;*/
  font-family: "Symvola", monospace;
  font-size: min(12vw, 6em);
  margin-bottom: -28px;
  margin-top: 12px;
}


html {
    background-color: #121212;
    color: var(--font-color);
    margin: 0;
    padding: 0;
}

h1,h2,h3,h4,h5,p,a {
    
}

span {
    background-color: var(--highlight-color-bg);
    color: var(--highlight-color-fg);
    border-radius: 4px;
}

div {
    margin-bottom: 24px;
}

hr {
    color: var(--logo-color);
}

.note {
    color: var(--note-color);
}

body {
    background-color: #252525;
    width: 70vw;
    min-width: 450px;
    max-width: 700px;
    margin: 0 auto;
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 8px;
    padding-left: 1em;
    box-shadow: 
                6px   6px 0px var(--body-shadow-back),
                5px   5px 0px var(--body-shadow-back),
                4px   4px 0px var(--body-shadow-back),
                3px   3px 0px var(--body-shadow-back),
                2px   2px 0px var(--body-shadow-back),
                1px   1px 0px var(--body-shadow-back),
                -1px -1px 0px var(--body-shadow-front);
                -2px -2px 0px var(--body-shadow-front),
}



.textdiv_p {
    opacity: 1;
    background-color: var(--bg-dark);
    /*margin-left: auto;*/
    margin-right: auto;
    height: 4px;
    width: 25vw;
    max-width: 100%;
    transition: opacity height background-color;
    transition-duration: .6s;
    overflow: hidden;
}

.downdiv_p  {
    background-color: var(--fire-1);
    color: var(--font-color);
    appearance: none;
    margin: 0;
    margin-bottom: 4px;
    width: 25vw;
    max-width: 100%;
}

a {
    padding: 4px;
    color: var(--font-color);
    text-decoration: none;
}

.hidediv_p  {
  opacity: 1;
  margin: 4px;
}


#posts::after {
	content: '> Post(s)';
}

#artwork::after {
	content: '> Artwork';
}

.website-version {
    border: 0;
    color: var(--font-color);
    border-radius: 4px;
}

.bottom-bar {
    display: flex;
    align-items: center;
    align-content: center;
    margin: -10px;
    margin-bottom: -8px;
    margin-left: -16px;
    padding-left: 2em;
    padding: 8px;
    height: 24px;
    background-color: var(--body-shadow-back);
}

.downdiv_p::after {
    display: flex;
	width: 25vw;
    max-width: 100%;
	font-size: 1.5em;
	vertical-align: middle;
	text-align: center;
    background-color: var(--bg-dark);
    transition: opacity height background-color;
    transition-duration: .6s;
}

.downdiv_p:checked {
	background-color: var(--darker);
}

.downdiv_p:checked + .textdiv_p  {
    background-color: var(--darker);
    height: 25em;
    width: 100%;
    border-radius: 4px;
    border: 3px solid var(--bg-normal);
    overflow: auto;
}