@font-face {
    font-family: Yuki-CC;
    src: url('res/fonts/Yuki-CCMarianChurchlandJournal.ttf');
}

html {
    background-color: #111;
}
body {
    margin: 0;
    font-family: Yuki-CC;
}

a {
    text-decoration: none;
    color: inherit;
}

header {
    background-image: url("res/backgrounds/night.png");
    position: relative;
    background-size: cover;
    background-position: 50% 20%;
    padding: 1em 2em;
    z-index: 10;
}
header::before {
    content: "";
    background: linear-gradient(90deg,
        #0bd calc(var(--coloroffset) - 50%),
        #f69 var(--coloroffset), 
        #0bd var(--coloroffset));
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    top: 2px;
    clip-path: polygon(0% 95%, 0% 100%, 100% 100%, 100% 95%);
    transition: 0.2s background-color;
}
.master header::before {
    background: linear-gradient(90deg, 
    #f69 calc(var(--coloroffset) - 50%),
    #0bd var(--coloroffset),
    #f69 var(--coloroffset));
}
#logo {
    height: 2.5em;
}
#blogtitle {
color: #FFF;
    font-weight: bold;
    text-shadow: 0 2px #000;
    font-size: 3em;
    position: relative;
}

main {
    margin: clamp(1vw, 3em, 5vw);
}
main>h1 {
    color: white;
    text-align: center;
}

footer {
    text-align: center;
    color: #666;
}

#backhome {
    color: #444;
    display: inline-block;
    font-size: 1.1em;
    font-weight: 900;
    transition: 0.2s color;
    margin-left: 1.9em;
    margin-top: -2em;
    margin-bottom: 0.5em;
}
#backhome:hover {
    color: #AAA;
}

#backhome span {
    color: #ff6699;
}

#nptitle {
    margin: .25em 0em;
    font-size: 2.5em;
    font-family: "Yuki-CC";
    color: #fff;
    background-color: #0000;
    border: 0;
}
#npcontent {
    color: #fff;
    background-color: #0000;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 8em;
}
#nptag, #nptagcolor, #nptheme, #npauthor {
    color: #fff;
    background-color: #0000;
    border: 0;
    font-family: "Yuki-CC";
    font-size: 1.25em;
    margin-bottom: 0.5em;
}

.entry {
    --color: #00bbdd;
    border-radius: 1em;
    background: #222;
    padding: 1em;
    border-top: .25em solid var(--color);
    margin: 1em;
    font-size: 1.15em;
}

.entry .header h1 {
    color: #FFF;
    font-size: 2.5em;
}

.tags {
    margin-left: 0.625em;
    margin-bottom: 0.25em;
}

.tag {
    display: inline-block;
    background: var(--color);
    padding: 0.1em 1.5em;
    margin-right: 0.25em;
    transition: 0.2s;
}
.tag.important {
    text-decoration: underline;
    text-transform: uppercase;
}
.tag.faketag {
    border: 2px dashed var(--color);
    background-color: #0000;
    color: #fff;
}

.tag:first-child {
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    border-top-right-radius: 0em;
    border-bottom-right-radius: 0em;
}
.tag:last-child {
    border-top-left-radius: 0em;
    border-bottom-left-radius: 0em;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
}
.tag:first-child:last-child {
    border-radius: 1em;
}

.tag:hover {
    padding: 0.1em 2em;
}
.tag:active {
    padding: 0.1em 2.5em;
    color: var(--color) !important;
    transition: 0s color, 0s background-color;
}

.entry .content {
    background: #0C0C0C;
    padding: 2em 2em;
    border-radius: 1em;
    color: #CCC;
    position: relative;
    clear: right;
}
.entry .content p {
    font-size: 1.1em;
    line-height: 1.4em;
    margin: 0;
    margin-bottom: 1em;
    text-align: justify;
}
.entry .content p:last-child {
    margin-bottom: 0;
}
.entry .content h1 {
    font-size: 2em;
    border-bottom: 1px solid #333;
    margin: 0;
    color: #FFF;
}
.entry .content h2 {
    font-size: 1.75em;
    border-bottom: 1px solid #333;
    margin: 0;
    color: #EEE;
}
.entry .content h3 {
    font-size: 1.5em;
    margin: 0;
    color: #DDD;
}
.entry .content h4 {
    font-size: 1.15em;
    margin: 0;
}
.entry .content h5 {
    font-size: 1em;
    margin: 0;
}
.entry .content h6 {
    font-size: 0.9em;
    margin: 0;
    color: #888;
}

.entry .content hr {
    border: none;
    height: 1px;
    background-color: #333;
}

.entry .content b {
    font-weight: 900;
}
.entry .content i {
    font-style: italic;
}
.entry .content a {
    text-decoration: underline dashed;
    color: hsla(245, 100%, 75%, 1);
    transition: 0.2s color;
}
.entry .content a:hover {
    color: hsla(245, 100%, 90%, 1);
}
.entry .content a:active {
    color: hsla(245, 100%, 60%, 1);
    transition: 0s color;
}

.entry .content ol, .entry .content ul {
	margin: 0;
}
.entry .content li {
	margin: 0;
	margin-bottom: 0.5em;
	color: #CCC;
}
.entry .content img {
	max-width: 100%;
}

.footer {
    margin-top: 0.5em;
    margin-bottom: -1em;
}

.footer p {
    display: inline-block;
    color: #888;
    font-size: 1em;
}
.footer p .author {
    color: var(--color)
}

.footer .hearts {
    -moz-user-select: none;
    user-select: none;
    display: inline-block;
    background-color: #444;
    color: #aaa;
    padding: 0.25em 1em;
    margin-right: 0.5em;
    border-radius: 1em;
    transition: 0.2s color, 0.5s background-color, 0.5s filter, 0.5s transform;
}
.footer .hearts:hover {
	color: var(--color);
}
.footer .hearts:active {
	filter: brightness(0.5);
	transition: 0.2s color, 0.5s background-color, 0s filter;
}

.footer .hearts.hearted {
    background-color: var(--color);
}

.footer .hearts .heartcount {
    font-weight: 900;
    margin-left: 0.15em;
    font-size: 1.1em;
}

.footer .hearts.hearted .heartcount {
    color: #444;
}
.footer .hearts.hearted .heart {
    color: #444;
}

.footer .heartParticle {
    position: absolute;
    animation: HeartParticleScale 2s;
}

@keyframes HeartParticleScale {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(10);
    }
}

.footer .del {
	color: var(--color);
	padding: 0.5em 2em;
	font-weight: 900;
	pointer-events: none;
	display: none;
	transition: 0.2s color, 0.2s opacity;
}

.master .footer .del {
    display: inline-block;
    pointer-events: all;
}