/* ---------------------------------------------- DEFAULT STYLING */

body {
    color:var(--text);
    font-size:var(--fontsize);
    font-family:undertale;
    letter-spacing:1px;
}
 
@font-face {
    font-family: "deltarune"; src: url("//floralcodes.github.io/resources/f/deltarune.ttf") format("truetype");
}

@font-face {
    font-family: "undertale"; src: url("//floralcodes.github.io/resources/f/8bitoperator.ttf") format("truetype");
}

#posts-inner .caption a,.info a,.tags a,#sidebar a,.reblog-list a {
    color:var(--accent);
    text-decoration:none;
    border-bottom:4px solid transparent;
}

.note-count:after {
    content:'/';
    margin-left:10px;
}

#posts-inner .caption a:hover,#sidebar a:hover,.reblog-list a:hover {
    color:var(--text);
    border-bottom:4px solid rgba(255,255,255,.25);
    cursor:pointer;
}

i {
    opacity:.6;
}

b {
    color:var(--accent2);
}

s {
    opacity:.6;
}

h1,h2 {
    font-size:30px;
    font-weight:normal;
    line-height:35px;
    font-family:deltarune;
}

h2 {
    font-family:undertale;
    font-size:20px;
}

.tippy-tooltip.custom-theme {
    display:block;
    z-index:999999999999999999999;
    word-wrap:break-word;
    padding:5px 10px 5px 10px;
    border:2px solid #fff;
    box-shadow: inset 0px 0px 0px 2px #9da2c4;
    background:#000;
    color:var(--text);
    font-size:10px;
    letter-spacing:2px;
    overflow:hidden;
    text-transform:capitalize;
}

::-webkit-scrollbar {
    width:20px;
    background:var(--background);
}

::-webkit-scrollbar-thumb {
    background:#fff;
    border-radius:30px;
    border:8px solid var(--background);
}

#notebox::-webkit-scrollbar,#description::-webkit-scrollbar {
    background:#000;
}

#notebox::-webkit-scrollbar-thumb,#description::-webkit-scrollbar-thumb {
    border:8px solid #000;
}

ul {
    list-style:none;
}

ul li:before {
    content:'*';
    margin-right:10px;
}

code,pre {
    line-height:inherit!important;
    word-wrap:break-word;
    white-space:pre-wrap;
    padding:15px;
    display:block;
    background:rgba(255,255,255,.15);
}

hr {
    border:none;
    position:relative;
    margin:8% auto 8% auto;
    width:40%;
    border-top:4px solid rgba(255,255,255,.15);
}

blockquote {
    border-left:4px solid rgba(255,255,255,.15);
    margin-left:0;
    padding-left:15px;
    max-width:100%;
}

/* ---------------------------------------------- TUMBLR CONTROLS */

iframe.tmblr-iframe {
    z-index:999999999!important;
    top:30px!important;
    right:20px!important;
    transform:scale(0.7);
    transform-origin:100% 0;
    -webkit-transform:scale(0.7);
    -webkit-transform-origin:100% 0;
    -o-transform:scale(0.7);
    -o-transform-origin:100% 0;
    -moz-transform:scale(0.7);
    -moz-transform-origin:100% 0;
    -ms-transform:scale(0.7);
    -ms-transform-origin:100% 0;
    opacity:.5;
    transition:all .4s ease;
}

iframe.tmblr-iframe:hover {
    opacity:1!important;
}

/* ---------------------------------------------- POST STYLING */

#content {
    width:70%;
    margin:0 auto;
    padding-top:200px;
    display:flex;
    justify-content:center;
}

#posts {
    width:calc(65% - 60px);
    max-width:700px;
    margin-left:35%;
}

.psquare {
    background:red;
    width:8px;
    height:8px;
    position:absolute;
    z-index:9999;
}

.topcorners,.bottomcorners {
    width:calc(100% + 24px);
    display:flex;
    margin-left:-12px;
    justify-content:space-between;
    position:relative;
}

.topcorners {
    margin-top:-12px;
}

.bottomcorners {
    margin-left:-12px;
    margin-bottom:-12px;
    margin-top:-18px;
}

.caption {
    line-height:28px;
    padding:30px;
    padding-bottom:15px;
    word-wrap:break-word;
}

.post {
    width:100%;
    border:4px solid #fff;
    box-shadow: inset 0px 0px 0px 2px #9da2c4;
    background:#000;
    margin-bottom:70px;
}

.post img {
    max-width:100%;
    height:auto;
    display:block;
    text-align:center;
}

.post .media {
    width:calc(100% - 4px);
    margin-left:2px;
}

.post .media,.post video {
    text-align:center;
}

.post video {
    max-width:calc(100% - 20px);
}

.post .media img {
    cursor:zoom-in;
    margin:0 auto;
}

.title {
    font-size:35px;
    font-weight:bold;
    font-family:deltarune;
    line-height:35px;
    text-align:center;
    margin-bottom:30px;
    width:100%;
}

.tmblr-full img {
    display:block;
}

.tmblr-full {
    display:inline-block;
}

.tmblr-full a {
    border-bottom:0px;
}

.tmblr-full a:hover {
    border-bottom:0px;
}

.tmblr-attribution {
    padding:5px 10px 5px 10px;
    background:rgba(255,255,255,.15);
    font-size:10px;
    display:block;
}

.tmblr-attribution:after {
    content:'🡢';
    float:right;
    display:inline;
}

/* ---------------------------------------------- CAPTIONS */

.reblog-header {
    display:inline-block;
    font-size:10px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
}

.reblog-header img {
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:20px;
    margin-right:5px;
    border-radius:100%;
    margin-top:-3px;
}

.reblog-header a {
    border-bottom:0px;
    color:var(--text);
    display:inline-block;
}

.reblog-header a:hover {
    color:var(--accent);
    border-bottom:0px;
}

.deactivated:after {
   content:'deactivated';
   position:absolute;
   padding-left:8px;
   opacity:0;
}
.deactivated:hover:after {
   opacity:1;
}

.reblog-list {
    margin-top:-8px;
    margin-bottom:-3px;
}

/* ---------------------------------------------- POST INFO */

.post-info {
    padding:15px;
    border-bottom:4px solid #fff;
    width:calc(100% - 30px);
    margin-top:-18px;
}

.info {
    float:right;
    display:inline-block;
    padding-top:0px;
    font-size:12px;
    max-width:calc(100% - 70px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.info a:hover,.tags a:hover {
    color:var(--text);
    opacity:1;
}

.post-info svg {
    display:inline-block;
    opacity:.5;
}

.like-button:hover svg,.reblog-button:hover svg {
    opacity:1;
}

.like-button,.reblog-button {
    cursor:pointer;
}

.like-button .like_button iframe {
   position:absolute;
   z-index:2;
   opacity:0;
}

.like_button iframe {
    margin-left:-2px;
    margin-top:-2px;
    transform:scale(.9,.9);
}

a.like-button .liked + svg {
    opacity:1;
}

.tags {
    text-align:right;
    width:calc(100% - 60px);
    padding:30px;
    padding-top:15px;
    font-size:11px;
}

.tags a {
    margin-left:10px;
    word-wrap:break-word;
    white-space:no-wrap;
    opacity:.6;
    color:var(--text);
}

/* ---------------------------------------------- LIGHTBOX */

.vignette, #vignette {
    opacity:0;
}

.tmblr-lightbox, #tumblr_lightbox {
    background:rgba(0,0,0,.8)!important;
    z-index:9999!important;
}

.lightbox-image, #tumblr_lightbox img {
    border-radius:3px!important;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:15px!important;
    background:#000!important;
    box-shadow:none !important;
}

.lightbox-caption, #tumblr_lightbox_caption {
    visibility:hidden;
}

@-webkit-keyframes fade { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fade { from {  opacity:0; } to { opacity:1; } }
@keyframes fade { from {  opacity:0; } to { opacity:1; } }

/* ---------------------------------------------- PHOTOSET POSTS */

[photoset-layout] {
    grid-gap:2px;
    overflow:hidden;
}

[photoset-layout] img:hover {
    cursor:zoom-in;
}

figure img {
    max-width:100%;
}

.npf_photoset {
    text-align:center;
}

.npf_photoset img {
    cursor:zoom-in;
}

/* ---------------------------------------------- VIDEO POSTS */

.videoWrapper {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
}

.videoWrapper iframe{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}

video {
    max-width:100%;
    height:auto!important;
}

.embed_iframe {
    max-width:100%;
}

/* ---------------------------------------------- AUDIO POSTS */

.audio {
    padding:10px;
    padding-top:0px;
    width:100%;
    margin-left:-10px;
    display:flex;
    height:150px;
}

.audio-image {
    vertical-align:top;
    min-width:140px;
    max-width:140px;
    min-height:140px;
    max-height:140px;
    margin-right:5px;
    position: relative;
    border:4px solid #fff;
    box-shadow: 0px 0px 0px 2px #9da2c4;
}

.audio-image img {
    width:100%;
    height:100%;
}

.audio-info {
    vertical-align:middle;
    width:100%;
    white-space:nowrap;
    overflow:hidden;
    padding:10px;
    height:130px;
    margin-left:5px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.error_icon svg {
	stroke:var(--text);
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.audio_player .seekbar {
	width:calc(100% - 30px);
	margin-left:5px;
	height:0.5em;
	background:rgba(255,255,255,.3);
	border-radius:30px;
	cursor:pointer;
	margin-left:15px;
	margin-top:15px;
    
}

.audio_player .seekbar_progress {
	width:0;
	height:100%;
	background:#00a2e8;
	border-radius:30px;
}

.current_time {
    float:left;
    opacity:.5;
    font-size:9px;
    padding-top:5px;
    padding-left:15px;
    font-weight:bold;
}

.time_left {
    float:right;
    opacity:.5;
    font-size:9px;
    padding-top:5px;
    font-weight:bold;
    padding-right:15px;
}

.audio-artist {
    text-align:center;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.audio-track {
    text-align:center;
    margin-top:5px;
    font-size:16px;
    opacity:.8;
    letter-spacing:2px;
    white-space:nowrap;
    overflow:hidden;
    font-family:deltarune;
    text-overflow:ellipsis;
}

.audio-buttons {
    text-align:center;
}

.audio-buttons .feather {
    width:15px;
    height:15px;
    padding-bottom:5px;
}

.audio-buttons svg {
    fill:var(--text);
}

.audio-button {
    cursor:pointer;
    border-radius:100%;
    vertical-align:top;
}

.audio-button:hover .feather {
    color:var(--accent);
}

.audio-buttons span {
    display:inline-block;
    margin-left:10px;
    padding:6px;
    width:12px;
    height:12px;
}

.audio-buttons span:first-of-type {
    display:inline-block;
    margin-left:0px;
}

.tumblr_audio_player {
    height:85px;
    width:100%;
}

.soundcloud_audio_player {
     width:100%;
}

.spotify_audio_player {
    width:100%;
}

/* ---------------------------------------------- LINK POSTS */

.link-thumbnail {
    padding:5px;
}

.link-post .title {
    display:inline-block;
    text-align:left;
}

/* ---------------------------------------------- CHAT POSTS */

.chat-line {
    padding:5px 10px 5px 10px;
    margin-top:10px;
}

.chat-label {
    font-weight:bold;
    letter-spacing:1px;
}

.chat-line:first-of-type {
    margin-top:0px;
}

/* ---------------------------------------------- QUOTE POSTS */

.quote-post {
    font-size:15px;
    text-align:center;
    line-height:30px;
}

.quote-source {
    text-transform:uppercase;
    letter-spacing:1px;
    opacity:.75;
    font-size:9px;
    margin-top:15px;
    font-weight:bold;
}

/* ---------------------------------------------- ANSWER POSTS */

.asker-port {
    width:75px!important;
    height:75px!important;
    border-radius:100%!important; 
    border:5px solid rgba(0,0,0,.4);
    display:inline-block;
}

.asker-port img {
    width:100%;
    height:100%;
    border-radius:100%!important; 
}

.ask-bubble {
    background:rgba(255,255,255,.15);
    padding:15px;
}

.ask-bubble:first-of-type {
    margin-bottom:15px;
}

.asker-label {
    display:inline-block;
    transform:translateY(-30px);
    margin-left:15px;
}

.asker-label a {
    color:var(--text);
}

.asker-label a:hover {
    border-bottom:0px;
    color:var(--accent);
}

/* ---------------------------------------------- PERMALINK PAGE */

#notebox {
    max-height:300px;
    width:calc(100% - 30px);
    margin-bottom:10px;
    overflow:auto;
    padding:15px;
    margin-top:5px;
    border-top:4px solid #fff;
}

#notebox blockquote {
    border-left:0px transparent;
}

#notebox a {
    color:var(--text)!important;
    border-bottom:0px;
    font-weight:bold;
    text-decoration:none;
}

#notebox a:hover {
    color:var(--accent)!important;
}

#notebox ol {
    margin-top:0;
    margin-bottom:0;
    margin-left:-40px;
}

#notebox ol li {
    list-style:none;
    padding:6px;
    word-wrap:break-word;
    letter-spacing:1px;
    margin-left:0px;
    margin-top:5px;
    font-size:11px;
}

#notebox ol li:first-of-type {
    margin-top:0px;
}

#notebox img {
    display:inline-block;
    vertical-align:middle;
    width:18px;
    height:18px;
    margin-right:10px;
    border-radius:100%;
}

.more_notes_link {
    text-align:center;
    font-size:9px;
    font-weight:bold;
    color:var(--text);
}

#perma {
    font-size:13px;
    line-height:28px;
}

#perma .caption {
    padding-top:25px;
    padding-bottom:25px;
}

#perma a {
    color:var(--accent);
}

.permatag {
    margin-top:15px;
    line-height:30px;
}

/* ---------------------------------------------- TOP BAR / NAVIGATION */

#bar {
    background:var(--topbar);
    padding:30px;
    width:calc(100% - 60px);
    position:fixed;
    z-index:9999;
    top:0;
    left:0;
    height:50px;
    display:flex;
}

#menu {
    display:flex;
    max-width:520px;
    padding-left:8px;
    width:50%;
    margin:0 auto;
    justify-content:space-between;
}

#menu-title {
    margin-top:5px;
    margin-right:50px;
    margin-left:-115px;
}

.home-title {
    width:70px;
    height:36px;
    opacity:0;
    position:absolute;
}

.talk-title {
    width:70px;
    height:36px;
    opacity:0;
    position:absolute;
}

.links-title {
    width:70px;
    height:36px;
    opacity:0;
    position:absolute;
}

.archive-title {
    width:70px;
    height:36px;
    opacity:0;
    position:absolute;
}

#link-menu,#nav-menu {
    display:none;
}

#link-menu .caption,#nav-menu .caption {
    padding-top:30px!important;
    padding-bottom:30px!important;
}

#back-link {
    font-family:undertale;
    font-size:16px;
    border:2px solid var(--navicons);
    color:var(--navicons);
    width:15px;
    height:15px;
    margin-top:6px;
    padding-bottom:15px;
    padding-left:11px;
    padding-right:7px;
    padding-top:2px;
    cursor:pointer;
    display:none;
}

#back-link:hover {
    border:2px solid var(--naviconhover);
    color:var(--naviconhover);
}

.link {
    display:inline-block;
    width:calc(50% - 35px);
    padding-left:30px;
    margin-bottom:20px;
    font-size:14px;
}

.link .mheart {
    margin-left:-20px;
    margin-right:10px;
    margin-bottom:-2px;
    opacity:0;
}

.link:hover .mheart {
    opacity:1;
}

a .link {
    color:var(--text);
}

#pagination {
    position:absolute;
    left:50px;
    top:50%;
    transform:translateY(-50%);
    font-family:deltarune;
    font-size:25px;
}

#pagination a {
    color:var(--navtext);
    text-decoration:none;
    margin:5px;
}

#pagination a:hover {
    color:var(--accent);
}

.current_page {
    margin:5px;
    color:var(--accent);
}

.sprite {
    width:66px;
    height:48px;
    border:2px solid var(--navicons);
    display:inline-block;
    box-sizing: border-box;
    cursor:pointer;
}

.sprite .mheart {
    position:absolute;
    margin-top:16px;
    margin-left:6px;
    opacity:0;
}

.sprite:hover .mheart {
    opacity:1;
}

.sprite:hover {
    border:2px solid var(--naviconhover);
}

.home-cont {
    width:22px;
    height:28px;
    margin-right:9px;
    margin-top:8px;
    float:right;
    background:rgba(255,255,255,.0);
}

.sprite:hover .h1,.sprite:hover .h2,.sprite:hover .h3,.sprite:hover .h4,.sprite:hover .h5,.sprite:hover .h6,.sprite:hover .h7,.sprite:hover .h8,.sprite:hover .h9,.sprite:hover .h10,.sprite:hover .h11,.sprite:hover .h12,.sprite:hover .h13,.sprite:hover .t1,.sprite:hover .t2,.sprite:hover .t3,.sprite:hover .t4,.sprite:hover .t5,.sprite:hover .t6,.sprite:hover .t7,.sprite:hover .t8,.sprite:hover .t9,.sprite:hover .t10,.sprite:hover .t11,.sprite:hover .t12,.sprite:hover .t13,.sprite:hover .t14,.sprite:hover .t15,.sprite:hover .t16,.sprite:hover .t17,.sprite:hover .t18,.sprite:hover .t19,.sprite:hover .t20,.sprite:hover .t21,.sprite:hover .l1,.sprite:hover .l2,.sprite:hover .l3,.sprite:hover .l4,.sprite:hover .l5,.sprite:hover .l6,.sprite:hover .l7,.sprite:hover .l8,.sprite:hover .l9,.sprite:hover .l10,.sprite:hover .l11,.sprite:hover .l12,.sprite:hover .l13,.sprite:hover .l14,.sprite:hover .l15,.sprite:hover .l16,.sprite:hover .l17,.sprite:hover .a1,.sprite:hover .a2,.sprite:hover .a3,.sprite:hover .a4,.sprite:hover .a5,.sprite:hover .a6,.sprite:hover .a7,.sprite:hover .a8,.sprite:hover .a9,.sprite:hover .a10,.sprite:hover .a11,.sprite:hover .a12,.sprite:hover .a13,.sprite:hover .a14,.sprite:hover .a15,.sprite:hover .a16,.sprite:hover .a17,.sprite:hover .a18,.sprite:hover .a19,.sprite:hover .a20,.sprite:hover .a21,.sprite:hover .a22 {
    background:var(--naviconhover);
}
.sprite:hover .links-cont {
    border:2px solid var(--naviconhover);
}

.h1 {
    margin-left:11px;
    margin-top:0px;
    width:2px;
    height:2px;
    background:var(--navicons);
}

.h2 {
    margin-left:9px;
    margin-top:0px;
    width:6px;
    height:2px;
    background:var(--navicons);
}

.h3 {
    margin-left:7px;
    margin-top:0px;
    width:10px;
    height:2px;
    background:var(--navicons);
}

.h4 {
    margin-left:3px;
    margin-top:0px;
    width:16px;
    height:2px;
    background:var(--navicons);
}

.h5 {
    margin-left:3px;
    margin-top:-6px;
    width:2px;
    height:4px;
    background:var(--navicons);
    position:absolute;
}

.h6 {
    margin-left:3px;
    margin-top:0px;
    width:20px;
    height:2px;
    background:var(--navicons);
}

.h7 {
    margin-left:1px;
    margin-top:0px;
    width:10px;
    height:2px;
    background:var(--navicons);
}

.h8 {
    margin-left:3px;
    margin-top:2px;
    width:8px;
    height:6px;
    background:var(--navicons);
}

.h9 {
    margin-left:13px;
    margin-top:-8px;
    width:8px;
    height:4px;
    background:var(--navicons);
}

.h10 {
    margin-left:17px;
    margin-top:0px;
    width:4px;
    height:4px;
    background:var(--navicons);
}

.h11 {
    margin-left:13px;
    margin-top:-2px;
    width:2px;
    height:2px;
    background:var(--navicons);
}

.h12 {
    margin-left:3px;
    margin-top:2px;
    width:8px;
    height:6px;
    background:var(--navicons);
}

.h13 {
    margin-left:13px;
    margin-top:-6px;
    width:8px;
    height:6px;
    background:var(--navicons);
}

.talk-cont {
    width:26px;
    height:32px;
    margin-right:8px;
    margin-top:6px;
    float:right;
    background:rgba(255,255,255,.0);
}

.t1 {
    width:2px;
    height:2px;
    margin-left:0px;
    margin-top:8px;
    background:var(--navicons);
}

.t2 {
    width:2px;
    height:2px;
    margin-left:2px;
    margin-top:0px;
    background:var(--navicons);
}

.t3 {
    width:2px;
    height:8px;
    margin-left:4px;
    margin-top:0px;
    background:var(--navicons);
}

.t4 {
    width:2px;
    height:2px;
    margin-left:2px;
    margin-top:0px;
    background:var(--navicons);
}

.t5 {
    width:2px;
    height:2px;
    margin-left:0px;
    margin-top:0px;
    background:var(--navicons);
}

.t6 {
    width:2px;
    height:2px;
    margin-left:8px;
    margin-top:-20px;
    background:var(--navicons);
}

.t7 {
    width:2px;
    height:2px;
    margin-left:10px;
    background:var(--navicons);
}

.t8 {
    width:2px;
    height:4px;
    margin-left:12px;
    margin-top:0px;
    background:var(--navicons);
}

.t9 {
    width:2px;
    height:8px;
    margin-left:14px;
    margin-top:0px;
    background:var(--navicons);
}

.t10 {
    width:2px;
    height:4px;
    margin-left:12px;
    margin-top:0px;
    background:var(--navicons);
}

.t11 {
    width:2px;
    height:2px;
    margin-left:10px;
    margin-top:0px;
    background:var(--navicons);
}

.t12 {
    width:2px;
    height:2px;
    margin-left:8px;
    margin-top:0px;
    background:var(--navicons);
}

.t13 {
    width:2px;
    height:2px;
    margin-left:16px;
    margin-top:-28px;
    background:var(--navicons);
}

.t14 {
    width:2px;
    height:2px;
    margin-left:18px;
    margin-top:0px;
    background:var(--navicons);
}

.t15 {
    width:2px;
    height:2px;
    margin-left:20px;
    margin-top:0px;
    background:var(--navicons);
}

.t16 {
    width:2px;
    height:4px;
    margin-left:22px;
    margin-top:0px;
    background:var(--navicons);
}

.t17 {
    width:2px;
    height:12px;
    margin-left:24px;
    margin-top:0px;
    background:var(--navicons);
}

.t18 {
    width:2px;
    height:4px;
    margin-left:22px;
    margin-top:0px;
    background:var(--navicons);
}

.t19 {
    width:2px;
    height:2px;
    margin-left:20px;
    margin-top:0px;
    background:var(--navicons);
}

.t20 {
    width:2px;
    height:2px;
    margin-left:18px;
    margin-top:0px;
    background:var(--navicons);
}

.t21 {
    width:2px;
    height:2px;
    margin-left:16px;
    margin-top:0px;
    background:var(--navicons);
}

.links-cont {
    width:26px;
    height:34px;
    margin-right:8px;
    margin-top:6px;
    float:right;
    background:rgba(255,255,255,.0);
    border:2px solid var(--navicons);
    box-sizing: border-box;
}

.l1 {
    width:2px;
    height:4px;
    margin-left:8px;
    margin-top:0px;
    background:var(--navicons);
}

.l2 {
    width:4px;
    height:4px;
    margin-left:14px;
    margin-top:-4px;
    background:var(--navicons);
}

.l3 {
    width:22px;
    height:2px;
    margin-left:0px;
    margin-top:0px;
    background:var(--navicons);
}

.l4 {
    width:4px;
    height:2px;
    margin-left:2px;
    margin-top:4px;
    background:var(--navicons);
}

.l5 {
    width:6px;
    height:2px;
    margin-left:8px;
    margin-top:-2px;
    background:var(--navicons);
}

.l6 {
    width:4px;
    height:2px;
    margin-left:16px;
    margin-top:-2px;
    background:var(--navicons);
}

.l7 {
    width:2px;
    height:2px;
    margin-left:2px;
    margin-top:2px;
    background:var(--navicons);
}

.l8 {
    width:2px;
    height:2px;
    margin-left:6px;
    margin-top:-2px;
    background:var(--navicons);
}

.l9 {
    width:2px;
    height:2px;
    margin-left:10px;
    margin-top:-2px;
    background:var(--navicons);
}

.l10 {
    width:4px;
    height:2px;
    margin-left:14px;
    margin-top:-2px;
    background:var(--navicons);
}

.l11 {
    width:4px;
    height:2px;
    margin-left:2px;
    margin-top:2px;
    background:var(--navicons);
}

.l12 {
    width:6px;
    height:2px;
    margin-left:8px;
    margin-top:-2px;
    background:var(--navicons);
}

.l13 {
    width:4px;
    height:2px;
    margin-left:16px;
    margin-top:-2px;
    background:var(--navicons);
}

.l14 {
    width:2px;
    height:2px;
    margin-left:8px;
    margin-top:2px;
    background:var(--navicons);
}

.l15 {
    width:2px;
    height:2px;
    margin-left:12px;
    margin-top:-2px;
    background:var(--navicons);
}

.l16 {
    width:6px;
    height:2px;
    margin-left:8px;
    margin-top:0px;
    background:var(--navicons);
}

.l17 {
    width:2px;
    height:2px;
    margin-left:10px;
    margin-top:0px;
    background:var(--navicons);
}

.archive-cont {
    width:26px;
    height:32px;
    margin-right:8px;
    margin-top:6px;
    float:right;
    background:rgba(255,255,255,.0);
}

.a1 {
    width:8px;
    height:2px;
    margin-left:4px;
    margin-top:0px;
    background:var(--navicons);
}

.a2 {
    width:2px;
    height:2px;
    margin-left:4px;
    margin-top:0px;
    background:var(--navicons);
}

.a3 {
    width:12px;
    height:2px;
    margin-left:12px;
    margin-top:-2px;
    background:var(--navicons);
}

.a4 {
    width:2px;
    height:2px;
    margin-left:22px;
    margin-top:0px;
    background:var(--navicons);
}

.a5 {
    width:2px;
    height:6px;
    margin-left:2px;
    margin-top:-2px;
    background:var(--navicons);
}

.a6 {
    width:8px;
    height:2px;
    margin-left:6px;
    margin-top:-4px;
    background:var(--navicons);
}

.a7 {
    width:4px;
    height:2px;
    margin-left:14px;
    margin-top:0px;
    background:var(--navicons);
}

.a8 {
    width:2px;
    height:6px;
    margin-left:20px;
    margin-top:-4px;
    background:var(--navicons);
}

.a9 {
    width:2px;
    height:18px;
    margin-left:0px;
    margin-top:-2px;
    background:var(--navicons);
}

.a10 {
    width:4px;
    height:2px;
    margin-left:4px;
    margin-top:-18px;
    background:var(--navicons);
}

.a11 {
    width:4px;
    height:2px;
    margin-left:10px;
    margin-top:0px;
    background:var(--navicons);
}

.a12 {
    width:2px;
    height:2px;
    margin-left:14px;
    margin-top:0px;
    background:var(--navicons);
}

.a13 {
    width:4px;
    height:2px;
    margin-left:4px;
    margin-top:0px;
    background:var(--navicons);
}

.a14 {
    width:4px;
    height:2px;
    margin-left:10px;
    margin-top:0px;
    background:var(--navicons);
}

.a15 {
    width:16px;
    height:2px;
    margin-left:2px;
    margin-top:6px;
    background:var(--navicons);
}

.a16 {
    width:4px;
    height:2px;
    margin-left:4px;
    margin-top:-6px;
    background:var(--navicons);
}

.a17 {
    width:2px;
    height:2px;
    margin-left:10px;
    margin-top:-2px;
    background:var(--navicons);
}

.a18 {
    width:2px;
    height:14px;
    margin-left:18px;
    margin-top:-12px;
    background:var(--navicons);
}

.a19 {
    width:2px;
    height:12px;
    margin-left:24px;
    margin-top:-18px;
    background:var(--navicons);
}

.a20 {
    width:2px;
    height:8px;
    margin-left:22px;
    margin-top:0px;
    background:var(--navicons);
}

.a21 {
    width:2px;
    height:2px;
    margin-left:20px;
    margin-top:0px;
    background:var(--navicons);
}

.a22 {
    width:12px;
    height:2px;
    margin-left:10px;
    margin-top:0px;
    background:var(--navicons);
}

.mheart {
    width:14px;
    height:14px;
    display:inline-block;
}

.mh1 {
    width:4px;
    height:2px;
    margin-left:2px;
    margin-top:0px;
    background:var(--heart);
}

.mh2 {
    width:4px;
    height:2px;
    margin-left:8px;
    margin-top:-2px;
    background:var(--heart);
}

.mh3 {
    width:14px;
    height:6px;
    margin-left:0px;
    margin-top:0px;
    background:var(--heart);
}

.mh4 {
    width:10px;
    height:2px;
    margin-left:2px;
    margin-top:0px;
    background:var(--heart);
}

.mh5 {
    width:6px;
    height:2px;
    margin-left:4px;
    margin-top:0px;
    background:var(--heart);
}

.mh6 {
    width:2px;
    height:2px;
    margin-left:6px;
    margin-top:0px;
    background:var(--heart);
}

/* ---------------------------------------------- CREDIT / SCROLL */

#credit {
    color:var(--text);
    position:fixed;
    bottom:20px;
    right:20px;
    border:2px solid #fff;
    box-shadow: inset 0px 0px 0px 2px #9da2c4;
    background:#000;
    font-family:deltarune;
    font-size:60px;
    padding:12px 11px 0px 18px;
    height:34px;
    width:18px;
    opacity:.75;
}

#credit a {
    border-bottom:0px;
    text-decoration:none;
    color:var(--accent);
}

#scrolltop {
    color:var(--text);
    position:fixed;
    bottom:80px;
    right:20px;
    border:2px solid #fff;
    box-shadow: inset 0px 0px 0px 2px #9da2c4;
    background:#000;
    font-family:deltarune;
    font-size:40px;
    padding:7px 12px 3px 17px;
    height:36px;
    width:18px;
    cursor:pointer;
    opacity:.75;
}

#scrolltop:hover,#credit:hover {
    opacity:1;
}

/* ---------------------------------------------- SIDEBAR */

#sidebar {
    width:calc(25% - 60px);
    height:50px;
    position:fixed;
    max-width:400px;
    margin-left:-50%;
}

#sidebar .post {
    position:relative;
}

#searchbar {
    width:100%;
    border-top:4px solid #fff;
}

#searchbar input {
    background:transparent;
    outline:0;
    border:0;
    font-family:undertale;
    color:var(--text);
    font-size:12px;
    padding-left:10px;
    padding-bottom:5px;
    letter-spacing:1px;
    width:calc(100% - 65px);
    transform:translateY(-6px);
}

#search::placeholder {
    opacity:.6;
}

#search:focus::placeholder {
    opacity:1;
}

#searchbar button {
    background:transparent;
    font-family:deltarune;
    border:0;
    outline:0;
    color:var(--text);
    font-size:30px;
    border-left:4px solid #fff;
    padding-left:20px;
    padding-top:12px;
    transform:translateX(-10px);
    cursor:pointer;
}

#searchbar button:hover {
    color:var(--accent);
}