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

.caption i,#desc i {
    opacity:.6;
    letter-spacing:1px;
}

b {
    opacity:.8;
    letter-spacing:.5px;
}

b a {
    color:var(--text);
}

p {
    line-height:30px;
}

h1 {
    font-family:accent;
    font-size:40px;
    color:var(--posts);
    text-shadow:-1px -1px 0 var(--accent), 1px -1px 0 var(--accent),-1px 1px 0 var(--accent),1px 1px 0 var(--accent);
    text-transform:lowercase;
    padding:0;
    margin:0;
    font-weight:normal;
}

h2 {
    padding:0;
    margin:0;
    font-weight:normal;
    font-size:22px;
}

.tippy-tooltip.custom-theme {
    display:block;
    z-index:999999999999999999999;
    word-wrap:break-word;
    padding:5px 10px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, .2),-1px -1px 0px rgba(255, 255, 255, .25);
    background:rgba(0,0,0,.5);
    border:1px solid rgba(0,0,0,.2);
    box-shadow:2px 2px 0px 0px rgba(0,0,0,.072);
    border-radius:30px;
    color:#fff;
    font-size:13px;
    letter-spacing:2px;
    overflow: hidden;
    transition:.5s;
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -o-transition:.5s;
    text-transform:capitalize;
}

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

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

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

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

code,pre {
    font-size:inherit!important;
    word-wrap:break-word;
    white-space:pre-wrap;
    padding:15px;
    display:block;
    background:rgba(0,0,0,.04);
    border-radius:15px;
    line-height:28px!important;
}

pre {
    letter-spacing:2px;
    font-size:12px;
}

code {
    background:#444;
    color:#eee;
    border-left:3px solid var(--accent);
    letter-spacing:1px;
}

ol,ul {
    line-height:28px;
}

li {
    list-style:square;
}

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

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

figcaption iframe {
    min-height:190px!important;
}

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

iframe.tmblr-iframe {
    z-index:999999999!important;
    top:20px!important;
    right:20px!important;
    padding-right:70px!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:0;
    transition:all .4s ease;
}

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

#controls,#scrolltop,#floral {
    border:3px solid var(--posts);
    filter: drop-shadow(2px 2px 0px var(--borders));
    box-shadow:0px 0px 0px 3px var(--borders);
    width:18px;
    height:18px;
    border-radius:100%;
    padding:8px;
    background:var(--posts);
    z-index:9999;
    position:fixed;
    transition:.4s ease-in-out;
}

#controls {
    top:20px;
    right:20px;
}

#scrolltop:hover,#floral:hover {
    background:var(--accent);
    transform:scale(1.05);
    border:3px solid var(--accent);
}

#floral {
    bottom:20px;
    right:20px;
}

#controls svg,#scrolltop svg {
    width:18px;
    height:18px;
    color:var(--text);
    transition:.4s ease-in-out;
}

#floral svg {
    width:25px;
    height:25px;
    margin-top:-3.5px;
    margin-left:-3.5px;
    transition:.4s ease-in-out;
    color:var(--text);
}

#scrolltop:hover svg,#floral:hover svg {
    color:var(--titles)!important;
}

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

#container {
    width:80%;
    margin: 0 auto;
    max-width:1500px;
}

#posts {
    width:calc(100% - 700px);
    max-width:600px;
    margin-left:700px;
}

.post {
    position:relative;  
    background:var(--posts);
    margin-top:100px;
    margin-bottom:200px;
    border:3px solid var(--borders); 
}

.title {
    width:100%;
    font-family:dosis;
    font-size:28px;
    font-weight:500;
    padding:20px;
    padding-top:0px;
    margin-left:-20px;
    margin-bottom:20px;
    text-align:center;
    border-bottom:3px dashed rgba(var(--rgbborders),.1);
    letter-spacing:1px;
}

.post::before,
.post::after {
  content: "";
  position: absolute;
  display: block;
}

.post::before {
  top: -43px;
  border: 20px var(--posts) solid;
  border-top-color: transparent;
  border-left-color: transparent;
  left: 0;
  box-shadow: 3px 3px 0px var(--borders);
  z-index: 9999;
}

.corner {
    width:60px;
    transform:rotate(-43deg);
    height:3px;
    background:var(--borders);
    position:absolute;
    z-index:99999;
    margin-top:-23.2px;
    border-radius:10px;
    margin-left:-10.7px;
}

.post-info {
    background:var(--posts);
    width: calc(100% - 40px);
    height:39px;
    position:absolute;
    margin-top:-39px;
    z-index:1;
    margin-left:40px;
}

.post::after {
    background: var(--posts);
    position: absolute;
    height: 37px;
    left:40px;
    width: calc(100% - 40px);
    top: -42px;
    border-top:3px solid var(--borders);
    border-right:3px solid var(--borders);
}

.caption {
    padding:20px;
    padding-top:0px;
    margin-top:-18px;
    z-index:999;
    position:relative;
    word-wrap:break-word;
}

#posts .post:hover .corner,#posts .post:hover::before {
    opacity:0;
}

#posts .post:hover::after {
    left:-3px;
    width:100%;
    border-left:3px solid var(--borders);
}

#posts .post:hover .post-info {
    padding-left:40px;
    margin-left:0px;
}

#posts .post:hover .shadow1,.post:hover .shadow2 {
    transform:translate(2px,2px);
}

#posts .post:hover .shadow3,.post:hover .shadow4 {
    transform:translate(5px,5px);
}

#posts .post:hover .shadow5 {
    transform:translate(8px,8px);
}

.post .shadow1 {        
    position:absolute;
    width:calc(100% + 5px);
    height:calc(100% + 25px);
    margin:-10px 0 0 10px; 
    border:3px solid var(--borders); 
    z-index:-99;  
    background-image: linear-gradient(var(--grid) .1em, transparent .1em), linear-gradient(90deg, var(--grid) .1em, transparent .1em);
    background-size: 1.50em 1.50em;
    background-position:-2px -2px;
    transition:.4s ease-in-out;
}

.post .shadow2 {        
    position:absolute;
    margin:-10px 0 0 10px; 
    z-index:-999;
    width:calc(100% + 18px);
    height:calc(100% + 38px);
    background:var(--gradient1);
    background:linear-gradient(to right, var(--gradient1) 0%,var(--gradient2) 100%);
    transition:.4s ease-in-out;
}

.post .shadow3 {
    position:absolute;
    width:calc(100% + 10px);
    height:calc(100% + 25px);
    margin:10px 0 0 27px; 
    background: repeating-linear-gradient(
  -45deg,
  transparent,
  transparent 2px,
  var(--postback) 2px,
  var(--postback) 10px
);
    border:3px solid var(--borders);  
    z-index:-9999;
    transition:.4s ease-in-out;
}

.post .shadow4 {
    position:absolute;
    width:calc(100% + 15px);
    height:calc(100% + 27px);
    margin:12px 0 0 27px; 
    background:var(--gradient1);
    background:linear-gradient(to right, var(--gradient1) 0%,var(--gradient2) 100%);
    z-index:-99999;
    transition:.4s ease-in-out;
}

.shadow5 {
    position:absolute;
    width:calc(100% + 10px);
    height:calc(100% + 18px);
    margin:38px 0 0 48px; 
    z-index:-999999;
    background-image:
    radial-gradient(rgba(0,0,0,.35) 20%, transparent 0), 
    radial-gradient(rgba(0,0,0,.35) 20%, transparent 0);
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
    transition:.4s ease-in-out;
}

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

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

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

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

.tmblr-full img {
    display:block;
}

.tmblr-full {
    display:inline-block;
    float:center;
    left:50%;
    position: relative;
    transform:translateX(-50%);
}

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

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

.tmblr-attribution {
    padding:5px 15px 5px 15px;
    background:rgba(0,0,0,.04);
    border:1px solid rgba(0,0,0,.025);
    font-size:12px;
    display:block;
    color:var(--text);
}

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

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


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

.reblog-header {
    display:inline-block;
    padding:5px 15px 5px 5px;
    transition:.4s ease-in-out;
    border:2px solid var(--borders);
    background:var(--gradient1);
    background:linear-gradient(to right, var(--gradient1) 0%,var(--gradient2) 100%);
    color:var(--titles);
    letter-spacing:2px;
    font-family:dosis;
    font-weight:bold;
    border-radius:30px;
    font-size:15px;
    margin-bottom:5px;
    margin-top:10px;
    box-shadow:3px 3px 0px 0px rgba(0,0,0,.1);
}

.reblog-header:first-of-type {
    margin-top:0px;
}

.reblog-header:hover {
    box-shadow:4px 4px 0px 0px rgba(0,0,0,.1);
    transform:scale(1.01);
    box-shadow:4px 4px 0px 0px rgba(0,0,0,.1);
}

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

.deac {
    text-transform:lowercase;
    opacity:.5;
    margin-left:5px;
    font-size:11px;
}

.reblog-list {
    margin-top:30px;
}

.reblog-header img {
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:20px;
    margin-right:5px;
    border:2px solid var(--titles);
    transition:.4s ease-in-out;
    border-radius:100%;
}

.quote-post,.npf_quote {
    font-family:roboto mono!important;
    font-size:20px;
    text-align:center;
}

.npf_chat {
    font-family:roboto mono!important;
}

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

.vignette, #vignette {
    opacity:0;
}

.tmblr-lightbox, #tumblr_lightbox {
    background:var(--gradient1)!important;
    background:linear-gradient(to right, var(--gradient1) 0%,var(--gradient2) 100%)!important;
    z-index:9999!important;
}

.lightbox-image, #tumblr_lightbox img {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:15px!important;
    background:var(--posts)!important;
    box-shadow:none !important;
    border:3px solid var(--borders)!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:3px;
    overflow:hidden;
}

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

figure img {
    max-width:100%;
}

.npf_photoset {
    text-align:center;
    padding:10px;
}

.npf_photoset img {
    cursor:zoom-in;
}

.npf_photoset .tmblr-full {
    display:inline-block;
    float:center;
    left:0%;
    transform:translateX(0%);
}

/* ---------------------------------------------- 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 {
    width:100%;
    height:auto;
    display:flex;
}

.audio-buttons {
    position:absolute;
    background:var(--posts);
    padding:9px;
    width:15px;
    height:15px;
    border-radius:100%;
    border:2px solid var(--borders);
    margin-left:-45px;
    margin-top:-25px;
    box-shadow:3px 2px 0px 0px var(--gradient2);
    z-index:9999;
    transition:all .4s ease-in-out;
}

.audio-buttons:hover {
    transform:scale(1.025);
}

.audio-image {
    vertical-align:top;
    min-width:120px;
    max-width:120px;
    min-height:120px;
    max-height:120px;
    margin-right:15px;
    position:relative;
    padding:5px;
    background:var(--gradient1);
    background:linear-gradient(to right, var(--gradient1) 0%,var(--gradient2) 100%);
    border:3px solid var(--borders);
    box-shadow:3px 3px 0px 0px rgba(0,0,0,.1);
    border-radius:100%;
}

.audio-image svg {
    position:absolute;
    color:var(--titles);
    stroke-width:2.5;
    margin-top:45px;
    margin-left:40px;
    width:35px;
    height:35px;
    filter: drop-shadow(3px 3px 0px var(--borders));
}

.audio-image img {
    width:100%;
    border-radius:100%;
    height:100%;
    z-index:999;
    position:relative;
}

.audio-info {
    vertical-align:middle;
    width:100%;
    white-space:nowrap;
    max-height:150px;
    margin-left:5px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

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

.audio_player .seekbar_progress {
	width:0;
	height:100%;
    background:var(--gradient1);
    background:linear-gradient(to right, var(--gradient1) 0%,var(--gradient2) 100%);
    border-radius:30px;
}

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

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

.audio-artist {
    text-align:center;
    font-size:12px;
    letter-spacing:1px;
    color:var(--text);
    opacity:.8;
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:10px;
}

.audio-track {
    text-align:center;
    font-size:16px;
    font-family:dosis;
    font-weight:bold;
    color:var(--text);
    letter-spacing:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

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

.soundcloud_audio_player {
     width:100%;
     height:116px;
}

.spotify_audio_player {
    width:100%;
}

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

.ask-bubble {
    width:100%;
}

.ask-content {
    border-radius:30px;
    border:3px solid var(--borders);
    padding:20px;
    word-wrap:break-word;
}

.asker-label {
    display:inline-block;
    padding:5px 15px 5px 5px;
    transition:.4s ease-in-out;
    border:2px solid var(--borders);
    background:var(--gradient1);
    background:linear-gradient(to right, var(--gradient1) 0%,var(--gradient2) 100%);
    color:var(--titles);
    letter-spacing:2px;
    font-family:dosis;
    font-weight:bold;
    border-radius:30px;
    font-size:17px;
    box-shadow:3px 2px 0px 0px rgba(0,0,0,.1);
    text-transform:lowercase;
    margin-left:20px;
    margin-right:20px;
    word-wrap:break-word;
    margin-bottom:-30px;
    transform:translateY(10px);
}

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

.asker-label img {
    display:inline-block;
    vertical-align:middle;
    width:25px;
    height:25px;
    margin-right:10px;
    border:2px solid var(--titles);
    transition:.4s ease-in-out;
    border-radius:100%;
}

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

#notebox {
    width:calc(100% + 40px);
    margin-left:-20px;
    margin-top:30px;
    line-height:initial;
    border-top:3px dashed rgba(var(--rgbborders),.1);
}

#perma {
    line-height:35px;
    padding:20px;
    border-top:3px dashed rgba(var(--rgbborders),.1);
}

#notebox::-webkit-scrollbar {
    width:12px;
    background-color:transparent;
}

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

#notebox a {
    font-weight:bold;
    border-bottom:0px;
}

#notebox a:hover {
    color:var(--accent);
    border-bottom:0px;
}

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

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

#notebox ol li:nth-child(odd) {
    background:rgba(0,0,0,0);
}

#notebox img {
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:20px;
    margin-right:15px;
    border:2px solid var(--borders);
    background:var(--posts);
    padding:3px;
    box-shadow:3px 3px 0px 0px rgba(0,0,0,.1);
    border-radius:100%;
    background:var(--gradient1);
    background:linear-gradient(to right, var(--gradient1) 0%,var(--gradient2) 100%);
}

.more_notes_link {
    text-align:center;
    font-size:12px;
    font-weight:bold;
}

#perma svg {
    width:16px;
    height:16px;
    vertical-align:middle;
    margin-right:10px;
    opacity:.8;
}

/* ---------------------------------------------- CONTENT */

#gradient {
    background:var(--gradient1);
    background:linear-gradient(135deg, var(--gradient1) 0%,var(--gradient2) 100%);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-99999;
}


.post-foot {
    width:calc(100% - 40px);
    padding:0px 20px;
    cursor:default;
    font-size:14px;
    letter-spacing:2px;
    font-weight:600;
    font-family:dosis;
    white-space:nowrap;
    overflow:hidden;
    border-top:3px dashed rgba(var(--rgbborders),.1);
    padding-top:25px;
    padding-bottom:25px;
}

.info-tags {
    padding:15px;
    margin-top:-15px;
    width:100%;
    display:block;
    line-height:35px;
    word-wrap:break-word;
}

.info-tags a,.permatag a {
    padding:5px 8px 7px 8px;
    border-radius:6px;
    color:var(--text);
    letter-spacing:1px;
    display:inline-block;
    margin-right:10px;
    opacity:.75;
    font-size:12px;
    background:rgba(0,0,0,.05);
    line-height:normal;
    border-bottom:0px;
    font-weight:500!important;
}

.info-tags a:hover,.permatag a:hover {
    background:rgba(0,0,0,.1);
}

.post-info1 {
    display:inline-block;
    background:var(--posts);
}

.post-info2 {
    margin-bottom:-11px;
    float:right;
    display:inline-block;
    background:var(--posts);
}

.post-info2 svg {
    width:15px!important;
    height:15px!important;
}

.post-foot a {
    color:var(--headers);
    border-bottom:0px;
}

.post-foot a:first-of-type {
    padding-left:0px;
}

.post-foot i {
    color:var(--text);
    opacity:1;
    transition:all .4s ease-in-out;
    padding-left:5px;
}

.post-foot a:hover {
    border-bottom:0px;
}

.post-foot a:hover .feather, .post-foot a:hover i {
    color:var(--accent);
}

.post-foot svg {
    width:15px;
    height:15px;
    color:var(--text);
    vertical-align:middle;
    display:inline-block;
    margin-right:6px;
    margin-top:-3px;
    transition:all .4s ease-in-out;
    margin-left:10px;
    stroke-width:2.5;
}

.post-info2 svg:last-of-type {
    margin-right:0px;
}

.post-foot svg:first-of-type {
    margin-left:0px;
}

.reblog-button {
    float:right;
    margin-left:10px;
    margin-right:25px;
}

.permalink-button {
    float:right;
}


.shape {
    display: inline-block;
    -webkit-mask-size:90%!important;
    mask-size:90%!important;
    z-index:-9999;
}

.circle {
    -webkit-mask:url(data:image/svg+xml;base64,PHN2Zw0KICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogIHdpZHRoPSIyNCINCiAgaGVpZ2h0PSIyNCINCiAgdmlld0JveD0iMCAwIDI4IDI4Ig0KICBmaWxsPSJub25lIg0KICBzdHJva2U9ImN1cnJlbnRDb2xvciINCiAgc3Ryb2tlLXdpZHRoPSIzIg0KICBzdHJva2UtbGluZWNhcD0icm91bmQiDQogIHN0cm9rZS1saW5lam9pbj0icm91bmQiDQo+DQogIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIiAvPg0KPC9zdmc+) no-repeat 50% 50%;
    mask:url(data:image/svg+xml;base64,PHN2Zw0KICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogIHdpZHRoPSIyNCINCiAgaGVpZ2h0PSIyNCINCiAgdmlld0JveD0iMCAwIDI4IDI4Ig0KICBmaWxsPSJub25lIg0KICBzdHJva2U9ImN1cnJlbnRDb2xvciINCiAgc3Ryb2tlLXdpZHRoPSIzIg0KICBzdHJva2UtbGluZWNhcD0icm91bmQiDQogIHN0cm9rZS1saW5lam9pbj0icm91bmQiDQo+DQogIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIiAvPg0KPC9zdmc+) no-repeat 50% 50%;
    width:25px;
    height:25px;
}

.star {
    -webkit-mask:url(data:image/svg+xml;base64,PHN2Zw0KICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogIHdpZHRoPSIyNCINCiAgaGVpZ2h0PSIyNCINCiAgdmlld0JveD0iMCAwIDI4IDI4Ig0KICBmaWxsPSJub25lIg0KICBzdHJva2U9ImN1cnJlbnRDb2xvciINCiAgc3Ryb2tlLXdpZHRoPSIzIg0KICBzdHJva2UtbGluZWNhcD0icm91bmQiDQogIHN0cm9rZS1saW5lam9pbj0icm91bmQiDQo+DQogIDxwb2x5Z29uIHBvaW50cz0iMTIgMiAxNS4wOSA4LjI2IDIyIDkuMjcgMTcgMTQuMTQgMTguMTggMjEuMDIgMTIgMTcuNzcgNS44MiAyMS4wMiA3IDE0LjE0IDIgOS4yNyA4LjkxIDguMjYgMTIgMiIgLz4NCjwvc3ZnPg==) no-repeat 50% 50%;
    mask:url(data:image/svg+xml;base64,PHN2Zw0KICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogIHdpZHRoPSIyNCINCiAgaGVpZ2h0PSIyNCINCiAgdmlld0JveD0iMCAwIDI4IDI4Ig0KICBmaWxsPSJub25lIg0KICBzdHJva2U9ImN1cnJlbnRDb2xvciINCiAgc3Ryb2tlLXdpZHRoPSIzIg0KICBzdHJva2UtbGluZWNhcD0icm91bmQiDQogIHN0cm9rZS1saW5lam9pbj0icm91bmQiDQo+DQogIDxwb2x5Z29uIHBvaW50cz0iMTIgMiAxNS4wOSA4LjI2IDIyIDkuMjcgMTcgMTQuMTQgMTguMTggMjEuMDIgMTIgMTcuNzcgNS44MiAyMS4wMiA3IDE0LjE0IDIgOS4yNyA4LjkxIDguMjYgMTIgMiIgLz4NCjwvc3ZnPg==) no-repeat 50% 50%;
    width:25px;
    height:25px;
}

.square {
  -webkit-mask: url(data:image/svg+xml;base64,PHN2Zw0KICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogIHdpZHRoPSIyNCINCiAgaGVpZ2h0PSIyNCINCiAgdmlld0JveD0iMCAwIDI4IDI4Ig0KICBmaWxsPSJub25lIg0KICBzdHJva2U9ImN1cnJlbnRDb2xvciINCiAgc3Ryb2tlLXdpZHRoPSIzIg0KICBzdHJva2UtbGluZWNhcD0icm91bmQiDQogIHN0cm9rZS1saW5lam9pbj0icm91bmQiDQo+DQogIDxyZWN0IHg9IjMiIHk9IjMiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIiAvPg0KPC9zdmc+) no-repeat 50% 50%;
  mask:url(data:image/svg+xml;base64,PHN2Zw0KICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogIHdpZHRoPSIyNCINCiAgaGVpZ2h0PSIyNCINCiAgdmlld0JveD0iMCAwIDI4IDI4Ig0KICBmaWxsPSJub25lIg0KICBzdHJva2U9ImN1cnJlbnRDb2xvciINCiAgc3Ryb2tlLXdpZHRoPSIzIg0KICBzdHJva2UtbGluZWNhcD0icm91bmQiDQogIHN0cm9rZS1saW5lam9pbj0icm91bmQiDQo+DQogIDxyZWN0IHg9IjMiIHk9IjMiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIiAvPg0KPC9zdmc+) no-repeat 50% 50%;
    width:25px;
    height:25px;
}

.triangle {
  -webkit-mask:url(data:image/svg+xml;base64,PHN2Zw0KICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogIHdpZHRoPSIyNCINCiAgaGVpZ2h0PSIyNCINCiAgdmlld0JveD0iMCAwIDI4IDI4Ig0KICBmaWxsPSJub25lIg0KICBzdHJva2U9ImN1cnJlbnRDb2xvciINCiAgc3Ryb2tlLXdpZHRoPSIzIg0KICBzdHJva2UtbGluZWNhcD0icm91bmQiDQogIHN0cm9rZS1saW5lam9pbj0icm91bmQiDQo+DQogIDxwYXRoIGQ9Ik0xMC4yOSAzLjg2TDEuODIgMThhMiAyIDAgMCAwIDEuNzEgM2gxNi45NGEyIDIgMCAwIDAgMS43MS0zTDEzLjcxIDMuODZhMiAyIDAgMCAwLTMuNDIgMHoiIC8+DQo8L3N2Zz4=) no-repeat 50% 50%;
    mask:url(data:image/svg+xml;base64,PHN2Zw0KICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogIHdpZHRoPSIyNCINCiAgaGVpZ2h0PSIyNCINCiAgdmlld0JveD0iMCAwIDI4IDI4Ig0KICBmaWxsPSJub25lIg0KICBzdHJva2U9ImN1cnJlbnRDb2xvciINCiAgc3Ryb2tlLXdpZHRoPSIzIg0KICBzdHJva2UtbGluZWNhcD0icm91bmQiDQogIHN0cm9rZS1saW5lam9pbj0icm91bmQiDQo+DQogIDxwYXRoIGQ9Ik0xMC4yOSAzLjg2TDEuODIgMThhMiAyIDAgMCAwIDEuNzEgM2gxNi45NGEyIDIgMCAwIDAgMS43MS0zTDEzLjcxIDMuODZhMiAyIDAgMCAwLTMuNDIgMHoiIC8+DQo8L3N2Zz4=) no-repeat 50% 50%;
    width:25px;
    height:25px;
}

.plus {
  -webkit-mask:url(data:image/svg+xml;base64,PHN2Zw0KICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogIHdpZHRoPSIyNCINCiAgaGVpZ2h0PSIyNCINCiAgdmlld0JveD0iMCAwIDI4IDI4Ig0KICBmaWxsPSJub25lIg0KICBzdHJva2U9ImN1cnJlbnRDb2xvciINCiAgc3Ryb2tlLXdpZHRoPSIzIg0KICBzdHJva2UtbGluZWNhcD0icm91bmQiDQogIHN0cm9rZS1saW5lam9pbj0icm91bmQiDQo+DQogIDxsaW5lIHgxPSIxMiIgeTE9IjUiIHgyPSIxMiIgeTI9IjE5IiAvPg0KICA8bGluZSB4MT0iNSIgeTE9IjEyIiB4Mj0iMTkiIHkyPSIxMiIgLz4NCjwvc3ZnPg==) no-repeat 50% 50%;
    mask:url(data:image/svg+xml;base64,PHN2Zw0KICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogIHdpZHRoPSIyNCINCiAgaGVpZ2h0PSIyNCINCiAgdmlld0JveD0iMCAwIDI4IDI4Ig0KICBmaWxsPSJub25lIg0KICBzdHJva2U9ImN1cnJlbnRDb2xvciINCiAgc3Ryb2tlLXdpZHRoPSIzIg0KICBzdHJva2UtbGluZWNhcD0icm91bmQiDQogIHN0cm9rZS1saW5lam9pbj0icm91bmQiDQo+DQogIDxsaW5lIHgxPSIxMiIgeTE9IjUiIHgyPSIxMiIgeTI9IjE5IiAvPg0KICA8bGluZSB4MT0iNSIgeTE9IjEyIiB4Mj0iMTkiIHkyPSIxMiIgLz4NCjwvc3ZnPg==) no-repeat 50% 50%;
    width:25px;
    height:25px;
}

.zap {
  -webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItemFwIj48cG9seWdvbiBwb2ludHM9IjEzIDIgMyAxNCAxMiAxNCAxMSAyMiAyMSAxMCAxMiAxMCAxMyAyIj48L3BvbHlnb24+PC9zdmc+) no-repeat 50% 50%;
    mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItemFwIj48cG9seWdvbiBwb2ludHM9IjEzIDIgMyAxNCAxMiAxNCAxMSAyMiAyMSAxMCAxMiAxMCAxMyAyIj48L3BvbHlnb24+PC9zdmc+) no-repeat 50% 50%;
    width:25px;
    height:25px;
}

.sun {
  -webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItc3VuIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI1Ij48L2NpcmNsZT48bGluZSB4MT0iMTIiIHkxPSIxIiB4Mj0iMTIiIHkyPSIzIj48L2xpbmU+PGxpbmUgeDE9IjEyIiB5MT0iMjEiIHgyPSIxMiIgeTI9IjIzIj48L2xpbmU+PGxpbmUgeDE9IjQuMjIiIHkxPSI0LjIyIiB4Mj0iNS42NCIgeTI9IjUuNjQiPjwvbGluZT48bGluZSB4MT0iMTguMzYiIHkxPSIxOC4zNiIgeDI9IjE5Ljc4IiB5Mj0iMTkuNzgiPjwvbGluZT48bGluZSB4MT0iMSIgeTE9IjEyIiB4Mj0iMyIgeTI9IjEyIj48L2xpbmU+PGxpbmUgeDE9IjIxIiB5MT0iMTIiIHgyPSIyMyIgeTI9IjEyIj48L2xpbmU+PGxpbmUgeDE9IjQuMjIiIHkxPSIxOS43OCIgeDI9IjUuNjQiIHkyPSIxOC4zNiI+PC9saW5lPjxsaW5lIHgxPSIxOC4zNiIgeTE9IjUuNjQiIHgyPSIxOS43OCIgeTI9IjQuMjIiPjwvbGluZT48L3N2Zz4=) no-repeat 50% 50%;
    mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItc3VuIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI1Ij48L2NpcmNsZT48bGluZSB4MT0iMTIiIHkxPSIxIiB4Mj0iMTIiIHkyPSIzIj48L2xpbmU+PGxpbmUgeDE9IjEyIiB5MT0iMjEiIHgyPSIxMiIgeTI9IjIzIj48L2xpbmU+PGxpbmUgeDE9IjQuMjIiIHkxPSI0LjIyIiB4Mj0iNS42NCIgeTI9IjUuNjQiPjwvbGluZT48bGluZSB4MT0iMTguMzYiIHkxPSIxOC4zNiIgeDI9IjE5Ljc4IiB5Mj0iMTkuNzgiPjwvbGluZT48bGluZSB4MT0iMSIgeTE9IjEyIiB4Mj0iMyIgeTI9IjEyIj48L2xpbmU+PGxpbmUgeDE9IjIxIiB5MT0iMTIiIHgyPSIyMyIgeTI9IjEyIj48L2xpbmU+PGxpbmUgeDE9IjQuMjIiIHkxPSIxOS43OCIgeDI9IjUuNjQiIHkyPSIxOC4zNiI+PC9saW5lPjxsaW5lIHgxPSIxOC4zNiIgeTE9IjUuNjQiIHgyPSIxOS43OCIgeTI9IjQuMjIiPjwvbGluZT48L3N2Zz4=) no-repeat 50% 50%;
    width:25px;
    height:25px;
}

.smile {
  -webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItc21pbGUiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIj48L2NpcmNsZT48cGF0aCBkPSJNOCAxNHMxLjUgMiA0IDIgNC0yIDQtMiI+PC9wYXRoPjxsaW5lIHgxPSI5IiB5MT0iOSIgeDI9IjkuMDEiIHkyPSI5Ij48L2xpbmU+PGxpbmUgeDE9IjE1IiB5MT0iOSIgeDI9IjE1LjAxIiB5Mj0iOSI+PC9saW5lPjwvc3ZnPg==) no-repeat 50% 50%;
    mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItc21pbGUiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIj48L2NpcmNsZT48cGF0aCBkPSJNOCAxNHMxLjUgMiA0IDIgNC0yIDQtMiI+PC9wYXRoPjxsaW5lIHgxPSI5IiB5MT0iOSIgeDI9IjkuMDEiIHkyPSI5Ij48L2xpbmU+PGxpbmUgeDE9IjE1IiB5MT0iOSIgeDI9IjE1LjAxIiB5Mj0iOSI+PC9saW5lPjwvc3ZnPg==) no-repeat 50% 50%;
    width:25px;
    height:25px;
}

.music {
  -webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItbXVzaWMiPjxwYXRoIGQ9Ik05IDE4VjVsMTItMnYxMyI+PC9wYXRoPjxjaXJjbGUgY3g9IjYiIGN5PSIxOCIgcj0iMyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTgiIGN5PSIxNiIgcj0iMyI+PC9jaXJjbGU+PC9zdmc+) no-repeat 50% 50%;
    mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItbXVzaWMiPjxwYXRoIGQ9Ik05IDE4VjVsMTItMnYxMyI+PC9wYXRoPjxjaXJjbGUgY3g9IjYiIGN5PSIxOCIgcj0iMyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTgiIGN5PSIxNiIgcj0iMyI+PC9jaXJjbGU+PC9zdmc+) no-repeat 50% 50%;
    width:25px;
    height:25px;
}

.moon {
  -webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItbW9vbiI+PHBhdGggZD0iTTIxIDEyLjc5QTkgOSAwIDEgMSAxMS4yMSAzIDcgNyAwIDAgMCAyMSAxMi43OXoiPjwvcGF0aD48L3N2Zz4=) no-repeat 50% 50%;
    mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItbW9vbiI+PHBhdGggZD0iTTIxIDEyLjc5QTkgOSAwIDEgMSAxMS4yMSAzIDcgNyAwIDAgMCAyMSAxMi43OXoiPjwvcGF0aD48L3N2Zz4=) no-repeat 50% 50%;
    width:25px;
    height:25px;
}

.hexagon {
  -webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItaGV4YWdvbiI+PHBhdGggZD0iTTIxIDE2VjhhMiAyIDAgMCAwLTEtMS43M2wtNy00YTIgMiAwIDAgMC0yIDBsLTcgNEEyIDIgMCAwIDAgMyA4djhhMiAyIDAgMCAwIDEgMS43M2w3IDRhMiAyIDAgMCAwIDIgMGw3LTRBMiAyIDAgMCAwIDIxIDE2eiI+PC9wYXRoPjwvc3ZnPg==) no-repeat 50% 50%;
    mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItaGV4YWdvbiI+PHBhdGggZD0iTTIxIDE2VjhhMiAyIDAgMCAwLTEtMS43M2wtNy00YTIgMiAwIDAgMC0yIDBsLTcgNEEyIDIgMCAwIDAgMyA4djhhMiAyIDAgMCAwIDEgMS43M2w3IDRhMiAyIDAgMCAwIDIgMGw3LTRBMiAyIDAgMCAwIDIxIDE2eiI+PC9wYXRoPjwvc3ZnPg==) no-repeat 50% 50%;
    width:25px;
    height:25px;
}

.heart {
  -webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItaGVhcnQiPjxwYXRoIGQ9Ik0yMC44NCA0LjYxYTUuNSA1LjUgMCAwIDAtNy43OCAwTDEyIDUuNjdsLTEuMDYtMS4wNmE1LjUgNS41IDAgMCAwLTcuNzggNy43OGwxLjA2IDEuMDZMMTIgMjEuMjNsNy43OC03Ljc4IDEuMDYtMS4wNmE1LjUgNS41IDAgMCAwIDAtNy43OHoiPjwvcGF0aD48L3N2Zz4=) no-repeat 50% 50%;
    mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItaGVhcnQiPjxwYXRoIGQ9Ik0yMC44NCA0LjYxYTUuNSA1LjUgMCAwIDAtNy43OCAwTDEyIDUuNjdsLTEuMDYtMS4wNmE1LjUgNS41IDAgMCAwLTcuNzggNy43OGwxLjA2IDEuMDZMMTIgMjEuMjNsNy43OC03Ljc4IDEuMDYtMS4wNmE1LjUgNS41IDAgMCAwIDAtNy43OHoiPjwvcGF0aD48L3N2Zz4=) no-repeat 50% 50%;
    width:25px;
    height:25px;
}

.eye {
  -webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZXllIj48cGF0aCBkPSJNMSAxMnM0LTggMTEtOCAxMSA4IDExIDgtNCA4LTExIDgtMTEtOC0xMS04eiI+PC9wYXRoPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiPjwvY2lyY2xlPjwvc3ZnPg==) no-repeat 50% 50%;
    mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZXllIj48cGF0aCBkPSJNMSAxMnM0LTggMTEtOCAxMSA4IDExIDgtNCA4LTExIDgtMTEtOC0xMS04eiI+PC9wYXRoPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiPjwvY2lyY2xlPjwvc3ZnPg==) no-repeat 50% 50%;
    width:25px;
    height:25px;
}

.eye {
  -webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZXllIj48cGF0aCBkPSJNMSAxMnM0LTggMTEtOCAxMSA4IDExIDgtNCA4LTExIDgtMTEtOC0xMS04eiI+PC9wYXRoPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiPjwvY2lyY2xlPjwvc3ZnPg==) no-repeat 50% 50%;
    mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZXllIj48cGF0aCBkPSJNMSAxMnM0LTggMTEtOCAxMSA4IDExIDgtNCA4LTExIDgtMTEtOC0xMS04eiI+PC9wYXRoPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiPjwvY2lyY2xlPjwvc3ZnPg==) no-repeat 50% 50%;
    width:25px;
    height:25px;
}

.color1 {
    background-color:var(--c1);
    opacity:.8;
}

.color2 {
    background-color:var(--c2);
}

.color3 {
    background-color:var(--c3);
}

.color4 {
    background-color:var(--c4);
}

#sidebar-container {
    position:fixed;
    height:auto;
    width:560px;
}

#sidebar-container .shadow3,#sidebar-container .shadow4 {
    margin:5px 0 0 -20px;     
}

#sidebar-container .shadow2,#sidebar-container .shadow1 {
    margin:-15px 0 0 10px; 
}

#sidebar-container .shadow5 {
    margin:30px 0 0 5px;  
}

#sticky {
    position:absolute;
    z-index:999;
    margin-top:50px;
    margin-left:195px;
    transform:rotate(-3deg);
}

#sidebar-container .post {
    width:250px;
    height:300px;
}

#sidebar-container svg {
    width:100%;
    height:auto;
    position:absolute;
}

pattern circle {
    fill:rgba(0,0,0,.35);
}

#sidebar svg {
    color:var(--posts);
    fill:var(--posts);
}

#portrait {
    width:120px;
    height:120px;
    border-radius:100%;
    position:absolute;
    z-index:99;
    background:var(--gradient1);
    background:linear-gradient(to right, var(--gradient1) 0%,var(--gradient2) 100%);
    padding:10px;
    border:3px solid var(--posts);
    filter: drop-shadow(4px 4px 0px var(--borders));
    box-shadow:0px 0px 0px 3px var(--borders);
    margin-top:150px;
    margin-left:-20px;
}

#portrait img {
    width:120px;
    height:120px;
    border-radius:100%;
    border:5px solid var(--posts);
    margin-top:-5px;
    margin-left:-5px;
}

#title {
    font-size:50px; 
    font-family:dosis;
    position:absolute; 
    text-shadow: 
   -1px -1px 0 var(--posts),  
    1px -1px 0 var(--posts),
    -1px 1px 0 var(--posts),
     1px 1px 0 var(--posts),
    4px 5px var(--gradient1), 
    6px 7px var(--gradient2);
    z-index:9999;
    font-weight:800;
    transform:rotate(-20deg);
    word-wrap:break-word;
    max-width:300px;
    text-align:center;
    letter-spacing:4px;
    color:var(--title);
    margin-top:-10px;
    width:100%;
}

#title1 {
    width:250px;
    height:80px;
    margin-top:20px;
    margin-left:25px;
    background:var(--c3);
    z-index:999;
    transform:rotate(-15deg) skew(20deg);
    position:absolute;
    box-shadow:-5px 5px 0px 0px var(--c1);
    z-index:999;
}

#title2 {
    width:0;
    height:0;
    position:absolute; 
    border-style:solid;
    border-width:0 150px 150px 180px;
    border-color:transparent transparent var(--gradient2) transparent;
    transform:rotate(185deg) skew(5deg);
    margin-left:-20px;
    margin-top:20px;
    z-index:99;
    box-shadow:0px 4px 0px 0px var(--c1);
}

#title3 {
    width:250px;
    height:80px;
    margin-top:0px;
    margin-left:40px;
    z-index:999;
    transform:rotate(-15deg);
    position:absolute;
    background-image:
    radial-gradient(rgba(0,0,0,.45) 20%, transparent 0), 
    radial-gradient(rgba(0,0,0,.45) 20%, transparent 0);
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
    z-index:99;
}

#title4 {
    position:absolute;
    transform:rotate(-45deg);
    margin-top:20px;
    margin-left:10px;
    width:90px;
    height:150px;
    border:3px solid var(--borders); 
    background-image: linear-gradient(var(--grid) .1em, transparent .1em), linear-gradient(90deg, var(--grid) .1em, transparent .1em);
    background-size: 1.50em 1.50em;
    background-position:-2px -2px;
    transition:.4s ease-in-out;
    z-index:9;
}

#title5 {
    position:absolute;
    transform:rotate(-40deg);
    margin-top:22px;
    margin-left:9px;
    width:100px;
    height:160px;
    background:var(--gradient1);
    background:linear-gradient(to right, var(--gradient1) 0%,var(--gradient2) 100%);
    transition:.4s ease-in-out;
    z-index:8;
}

#half-circle {
    width: 100px;
    height: 50px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 3px dotted var(--borders);
    border-bottom: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position:absolute;
    margin-top:246px;
    margin-left:80px;
    z-index:99;
    transform:rotate(75deg);
}

#lineone {
    width:200px;
    height:5px;
    margin-left:-15px;
    margin-top:30px;
    background:var(--postback);
    border-radius:30px;
    position:absolute;
    transform:rotate(120deg);
    z-index:99;
}

#linetwo {
    width:180px;
    height:5px;
    margin-left:-10px;
    margin-top:70px;
    background:var(--postback);
    border-radius:30px;
    position:absolute;
    transform:rotate(120deg);
    z-index:99;
}

#linethree {
    width:20px;
    height:5px;
    margin-left:125px;
    margin-top:-23px;
    background:var(--postback);
    border-radius:30px;
    position:absolute;
    transform:rotate(120deg);
    z-index:99;
}

#linefour {
    width:60px;
    height:5px;
    margin-left:40px;
    margin-top:20px;
    background:var(--postback);
    border-radius:30px;
    position:absolute;
    transform:rotate(120deg);
    z-index:99;
}

#linefive {
    width:5px;
    height:5px;
    margin-left:86px;
    margin-top:-12px;
    background:var(--postback);
    border-radius:30px;
    position:absolute;
    transform:rotate(120deg);
    z-index:99;
}

.navi {
    border:3px solid var(--posts);
    filter: drop-shadow(2px 2px 0px var(--borders));
    box-shadow:0px 0px 0px 3px var(--borders);
    position:absolute;
    width:18px;
    height:18px;
    border-radius:100%;
    padding:8px;
    z-index:9999;
    background:var(--posts);
    transition:all .4s ease-in-out;
}

.navi:hover {
    background:var(--accent);
    border:3px solid var(--accent);
    transform:scale(1.05) rotate(5deg);
    color:var(--titles);
}

.navi:hover svg {
    color:var(--titles);
}

.navi svg {
    width:18px!important;
    height:18px!important;
    filter:none!important;
    color:var(--text);
    stroke-width:2!important;
    transition:.4s ease-in-out;
}

.navi svg path {
    stroke-width:2!important;
}

#home {
    margin-left:400px;
    margin-top:20px;
}

#inbox {
    margin-left:459px;
    margin-top:69px;
}

#navi {
    margin-left:490px;
    margin-top:137px;
}

#desc {
    word-wrap:break-word;
    text-align:center;
    overflow:auto;
    width:calc(100% - 40px);
    height:calc(100% - 100px);
    padding:20px;
}

#search {
    width:calc(100% - 40px);
    border:0px;
    border-top:3px dashed rgba(var(--rgbborders),.075);
    outline:0;
    position:absolute;
    padding:20px 20px 0px 20px;
}

#sticky input {
    outline:0;
    background:transparent;
    font-family:roboto mono;
    color:var(--text)!important;
}

::placeholder {
    font-family:roboto mono;
    color:var(--text)!important;
    opacity:.75;
}

.link-icon {
    transition:all .4s ease-in-out;
    position:absolute;
    margin-top:-20px;
    transform:translateX(-2px);
}

#music-player:hover {
    color:var(--text);
}

#play:hover .equalizer {
    opacity:0;
}

#button .feather {
    width:13px;
    height:13px;
    color:var(--text);
}

#button .pause {
    display:none;
    position:absolute;
    margin-left:-1px;
}

#play:hover #button {
    opacity:1;
}

#music {
    display:inline-block;
    position:relative;
    width:20px;
    transition:all .4s ease-in-out;
}

#music .feather {
    width:14px;
    height:14px;
    position:absolute;
    display:inline-block;
    margin-left:3px;
    margin-top:7px;
    color:var(--text);
}

#play:hover #music {
    opacity:0;
}

#play:hover svg {
    color:var(--titles)!important;
}

#equalizer {
    display:none;
    margin-top:18px;
    margin-left:10px;
}

.equalizer {
    display:inline-block;
    background-color:transparent;
    border:0;
    position:relative;
    transition:all .4s ease-in-out;
}

.equalizer span {
    display:inline-block;
    width:2px;
    background-color:var(--text);
    position:absolute;
    bottom:0;
    border-radius:5px;
    transition:all .4s ease-in-out;
    margin-left:-2px;
}

@keyframes shorteq {
    0% {height:9px}
    50% {height:4px}
    100% {height:9px}
}
@-webkit-keyframes shorteq {
    0% {height:9px}
    50% {height:4px}
    100% {height:9px}
}

@keyframes talleq {
    0% {height:10px}
    50% {height:6px}
    100% {height:11px}
}
@-webkit-keyframes talleq {
    0% {height:11px}
    50% {height:6px}
    100% {height:11px}
}

.eq1 {
    height:10px;
    left:0;
    animation-name:shorteq;
    animation-duration:0.6s;
    animation-iteration-count:infinite;
    animation-delay:0s;
    -webkit-animation-name:shorteq;
    -webkit-animation-duration:0.6s;
    -webkit-animation-iteration-count:infinite;
    animation-delay:0s;
}

.eq2 {
    height:12px;
    left:4px;
    animation-name:talleq;
    animation-duration:0.6s;
    animation-iteration-count:infinite;
    animation-delay:0.17s;
    -webkit-animation-name:talleq;
    -webkit-animation-duration:0.6s;
    -webkit-animation-iteration-count:infinite;
    animation-delay:0.17s;
}

.eq3 {
    height:10px;
    left:8px;
    animation-name:shorteq;
    animation-duration:0.6s;
    animation-iteration-count:infinite;
    animation-delay:0.34s;
    -webkit-animation-name:shorteq;
    -webkit-animation-duration:0.6s;
    -webkit-animation-iteration-count:infinite;
    animation-delay:0.34s;
}

#pagination {
    text-align:center;
    width:100%;
    margin-bottom:100px;
    margin-top:-50px;
}

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

#pagination a {
    width:20px;
    display:inline-block;
    height:20px;
    border-radius:100%;
    padding:8px;
    background:var(--posts);
    color:var(--borders);
    font-weight:600;
    margin-left:10px;
    border:3px solid var(--posts);
    filter: drop-shadow(2px 2px 0px var(--borders));
    box-shadow:0px 0px 0px 3px var(--borders);
}

.current_page,#pagination a:hover {
    width:20px;
    display:inline-block;
    height:20px;
    border-radius:100%;
    padding:8px;
    background:var(--accent);
    color:var(--text);
    font-weight:600;
    margin-left:10px;
    border:3px solid var(--accent);
    filter: drop-shadow(2px 2px 0px var(--borders));
    box-shadow:0px 0px 0px 3px var(--borders);
}

#pagination svg {
    width:20px;
    height:20px;
    stroke-width:2;
    color:var(--text);
    transition:.4s ease-in-out;
}

#navi-inner {
    display:none;
    text-align:left;
    overflow:hidden;
}

#navi-inner a {
    display:block;
    border-bottom:0px;
    color:var(--text);
    font-weight:600;
    font-family:dosis;
    margin-bottom:8px;
    margin-top:15px;
    font-size:18px;
    letter-spacing:1px;
}

#navi-inner a:nth-of-type(even):hover {
    color:var(--gradient2);
}

#navi-inner a:nth-of-type(odd):hover {
    color:var(--gradient1);
}

#navi-inner a:after {  
    content:'';
  display:inline-block;
  width:calc(100% - 10px); 
  height:100%;
  margin-right:-100%;
  transform:translateY(-4px);
  margin-left:10px;
  border-bottom:3px dashed rgba(var(--rgbborders),.075);
}