/* f(x) - my style */
::selection { background: var(--lightgreen); color: var(--darkgreen); }

body {  background: #fff; font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000;  }

a { text-decoration: underline; text-underline-offset: 2px; color: #000;  }
a:hover { color: #000; background: var(--green); text-decoration: underline; text-underline-offset: 2px; font-style: italic;  }

strong {  background: var(--lightgreen);  }
i.darkgreen, i.darkgreen a { color: var(--darkgreen);  }
i.darkgreen a { text-decoration: none;  }
s { text-decoration: line-through; text-decoration-color: #f00; }
s.sdefault {  text-decoration-color: initial; }

ul {  margin: 0 3px 5px 0; padding-left: 20px; text-indent: 12px; list-style-type: none;  }

#left ul {  margin-bottom: 10px; }
#left li::before {  margin: 0 3px 0 -30px; content: url("/asset/777.gif"); }

li::before {  margin: 0 3px 0 -30px; content: url("/asset/112.gif"); }
li li::before {  margin: 0 3px 0 -37px; content: url("/asset/76.gif"); }


/* layout */
#top {  display: flex; position: absolute; top: 0; left: 0; padding: 0 0 3px 0; width: 100%; background-image: url("/asset/bluewave.gif"), linear-gradient(var(--darkgreen), var(--green)); background-blend-mode: color-dodge; border-bottom: 1px solid #aeff00; line-height: 16px; align-items: center; }

#container {  
  display: grid; grid-template-columns: 1fr 4fr; max-width: 1000px; margin: 7% auto 0; padding: 0 10px; padding-bottom: 3%;
  grid-template-areas:
    "nav nav"
    "sidebar entries"
    "sidebar postnav";
  }

.nav { grid-area: nav; display: flex; border-bottom: 1px dashed var(--pink); width: 100%; letter-spacing: 1px; align-items: flex-end;  }
#left { grid-area: sidebar; margin: 5px; background:#fff;  }
#right {  grid-area: entries; width: 100%; height: auto; border-left: 1px dashed var(--pink);  }
#right img {  max-width: 100%; }
#footer {  grid-area: postnav; margin: 10px; width: 100%; text-align: center; color: #aaa; letter-spacing: 1px; }

/* livejournal login */
#top, .log_in {  font-size: 11px; font-family: Arial, sans-serif;  }
#top img {  max-width: 43px; }

.login {  display: flex; flex-direction: column; margin-left: 5px; border-right: 1px solid var(--lightgreen);  }
.login_more {  display: flex; width: 260px; justify-content: space-between;  }
.statustext { margin-left: 10px; }

form { width: 300px;  }
input { width: 50px; border: 2px outset #777; font-size: 11px; }
.log_in { padding: 0; border-radius: 0;  }
.checkmark {  width: 10px; height: 10px;  }
label { color: #000;  }
.remember { font-size: 10px; }

.specialthankstodeez { position: absolute; top: -3px; right: 3px; font-size: 8px; font-family: "Silkscreen"; color: var(--lightgreen); text-transform: uppercase; user-select: none;  }
.specialthankstodeez a { text-decoration: none; color: var(--lightgreen);  }
.specialthankstodeez a:hover { background: none;  }

.nav div {  display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; top: 2px; }

/* nav link hover */
.navlink, .navlink_active span {  text-align: center;  }
.navlink_active span { letter-spacing: 2px; font-style: italic; min-width: 60px;   }
.nav:hover .navlink_active span { background: none; text-decoration: none; border-bottom: 2px solid transparent; letter-spacing: 1px;  }

.nav a, .navlink_active span {  padding: 5px; border-bottom: 2px solid transparent; text-decoration: none; }
.nav a:hover, .navlink_active span {  background: none; font-weight: normal; border-bottom: 2px solid var(--pink); text-decoration: none; }
.nav a:hover, .nav .navlink_active:hover span {  letter-spacing: 2px; border-bottom: 2px solid var(--pink); }

.nav img { max-width: 60px; }
.navlink img {  visibility: hidden; }
.navlink:hover img, .nav:hover .navlink_active img  {  visibility: visible; }
.nav:hover .navlink_active img { visibility: hidden;  }
.nav:hover .navlink_active:hover span > div img { visibility: visible; width: 60px; height: 44px;position: relative; top: -7px; right: 0px;  }

.navlink_active span > div { display: none;  }
.navlink_active:hover span > div { display: flex; margin-top: -50px;  }

.bw { filter:grayscale(100); opacity: 0.5;  }

/* sidebar */
.ribbon { display: block; width: 100%; max-width: 358px; }

.calendar { border-spacing: 2px; border: 1px solid white; width:100%;  }
#left .calendar { margin-bottom: 5px;  }
.monthYear {  text-align: center; letter-spacing: 1px; border: 1px solid white;  }
.calendar td {  padding: 4px 3px; width: 10px; border: 1px solid var(--green); text-align: center;  }
.calEntry {  background: var(--lightgreen);  }
.calEntry a {  color: var(--darkgreen); text-decoration: none;  }
.calEntry:hover {  background: var(--green);color: #fff;  }
.calEntry:hover a {  color: #fff;  }

.thankyou { display: none; float: left;  }
#left:hover .thankyou { display: block;  }

.clap { display: block;  }
.pleaseclap { margin: 10px 10%; padding: 5px; width: calc(80% - 10px); background: var(--lightgreen); text-align: center;  }
.pleaseclap img { width: 100%; }

/* entry */
.entry {
  display: grid; grid-template-columns: 1fr 5fr;
  grid-template-areas:
    "userpic header"
    "userpic content"
    "userpic footer";
}
.entry_content {  grid-area: content; padding: 10px; }
.entry_footer { grid-area: footer; padding: 10px 20px; text-transform: uppercase; font-size: 8px; letter-spacing: 1px;  }
.entry_footer img { vertical-align: middle; }

/* userpic & userhead */
.entry_userpic {  grid-area: userpic; background-color: #fff; background-image: url("/asset/777.jpg"); background-size: 100%; border-top: 2px solid var(--pink); }
.entry_userpic div {  margin: 10px 5px 5px; text-align: center; }
.entry_userpic span { visibility: hidden; }
.entry_userpic:hover span { visibility: visible; }

.userpic { width: 75%; min-width: 70px; max-width: 100px; padding: clamp(0.1875rem, 0.0125rem + 0.4vw, 0.3125rem); background: #fff; border: 2px dotted var(--green);  }
.entry:hover .userpic { background: var(--pink); border: 2px dotted var(--lightgreen);  }

.userhead, span.name img, .entry_userpic span img { margin: 1px; width: 11px; vertical-align: bottom;  }
.userhead { margin:none; }
.name img { margin: 0 1px 1px 0; width: 12px; }
span.name { display: inline-block;  }
span.name a { text-decoration: none;  }

/* entry header */
.entry_header { grid-area: header; padding: 10px; color: var(--darkgreen); font-size: 8px; letter-spacing: 3px; text-transform: uppercase; background: linear-gradient(to right, var(--lightgreen), #fff);  border-top: 2px solid var(--pink); border-bottom: 1px dashed var(--green);  }
.entry_title, .entry_title a {  text-decoration: none; font-size: 11px; color: var(--darkergreen);  }
.entry_title a:hover {  background: none; }

/* entry styling */
p { margin-top: 10px; margin-bottom: 10px; }

.spoiler {  display: inline; background: #000; color: #000;  }

blockquote, .mrsdarcy, .ppvid, .captionedImage { padding: 5px; background: var(--lightgreen); border: 1px solid var(--green);  }
blockquote { padding: 3px 5px; border: none; border-left: 3px solid var(--darkgreen); }

.collapse { cursor: pointer; display: inline-block; margin: 10px auto 5px auto; }
.collapse span {  text-decoration: underline; text-underline-offset: 2px; }
.collapse span:hover, .active span { color: #000; background: var(--green); font-style: italic;  }

.collapse::before, .active::before, .collapse::after, .active::after {  font-family: Verdana, Arial, sans-serif; font-size: 10px; }

.collapse::before, .active::before {  content: "( "; }
.collapse::after, .active::after {  content: " )"; }

.incognito {  display: inline; margin: 0;  }
.incognito::before, .incognito::after { content: none; }

.centered { text-align: center; margin: auto; }

.content {  display: none; overflow: hidden; }

.locked { margin: 10px; text-align: center; }

.videocontainer {  margin: auto; width: 80%;  }
.video {  position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; }
.videoframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;  }

.congratulations {  margin: 5px; width: 100%; background: #000;  }

.captionedImage { width: calc(100% - 12px); }
.imageWcaption div {  display: none; text-align: center;  }
.imageWcaption:hover div {  display: block;  }

.skype { width: 13px; mix-blend-mode: multiply; vertical-align: bottom;  }
.nooo { width: 100px; vertical-align: bottom;  }

figure.wiki { margin: auto; padding: 5px; width: 70%; max-width: 300px; background: #f8f9fa; border: 1px solid #c8ccd1; }
figure.wiki figcaption {  padding: 5px; font-size: 11px; font-family: Arial, Helvetica, sans-serif;  }

/* scrapbook */
blockquote.scrapbook {  background: linear-gradient(to right, #fff, var(--lightgreen));  border-left: 3px solid var(--green);  }
blockquote strong { line-height: 16px; background: var(--lightgreen); border-bottom: 2px dotted var(--pink); }

.scrapbook_film:hover .film_decades, .scrapbook_tv:hover .tv_decades, .scrapbook_music:hover .music_decades { display: block; }
blockquote.scrapbook_summary {  display: none; padding: 5px; background: linear-gradient(to left, #ffffff69, #ffdef9); border: 5px solid #fff; outline: 2px dotted var(--green); margin-left: 20px;  }
blockquote.scrapbook_summary li::before {  margin: 0 3px 0 -30px; content: url("/asset/16.gif"); }
.fractionsbynickiminaj  { display: flex; justify-content: center; margin: 2px 0; background: #fff; border: 1px solid #000000; border: 1px solid #fff; outline: 1px solid var(--pink);  }

.fractionsbynickiminaj span {  width: 10%; color: transparent; user-select: none;  }
.fractionsbynickiminaj span.one {  background: linear-gradient(to right, #ff8cea, #fb90df);  }
.fractionsbynickiminaj span.two {  background: linear-gradient(to right, #fb90dd, #f697ce);  }
.fractionsbynickiminaj span.three {  background: linear-gradient(to right, #f597cc, #f09fba);  }
.fractionsbynickiminaj span.four {  background: linear-gradient(to right, #efa0b8, #e8a8a3);  }
.fractionsbynickiminaj span.five {  background: linear-gradient(to right, #e7a9a0, #e0b28a);  }
.fractionsbynickiminaj span.six {  background: linear-gradient(to right, #e0b387, #d8bd70);  }
.fractionsbynickiminaj span.seven {  background: linear-gradient(to right, #d8be6e, #d1c659);  }
.fractionsbynickiminaj span.eight {  background: linear-gradient(to right, #d0c757, #cacf44);  }
.fractionsbynickiminaj span.nine {  background: linear-gradient(to right, #cad042, #c5d632);  }
.fractionsbynickiminaj span.ten {  background: linear-gradient(to right, #c4d631, #c1db26);  }

ul.lyrics li {  margin-left: -13px; text-indent: 26px; color: var(--darkgreen);  }

.new {  vertical-align: bottom; }

/* haul */
figure.wiki a {  background: none; text-decoration: none;  }
figure.wiki a.wiki_thumbnail::after {  float: right; margin: 2px 0 0 0; content: url("/asset/magnify-clip-ltr.png");  }

.haul { display: flex; margin: 20px auto; max-width: 580px; gap: 5px; flex-wrap: wrap; justify-content: center; align-items: flex-start;  }

.haul div { padding: 5px; width: 100px; border: 2px dotted var(--green); text-align: center;  }
.haul div:hover { background: var(--lightgreen);  }
.haul div:hover strong { background: var(--green);  }

.haul div.blank { border: 2px dotted transparent;  }

.haul div strong { display: block; margin-top: 3px;  }
.haul div i.darkgreen { display: none;  }
.haul div:hover i.darkgreen { display: inline;  }

/* pride & prejudice */
.ppvid {  margin: auto;  }
.mrsdarcy  { margin: auto; width: 80%; }
.mrsdarcy table { border-spacing: 0; border: 1px solid var(--darkgreen); }
.mrsdarcy td {  padding: 0; border: 1px solid var(--darkgreen); line-height: 0;  }
.script { margin: 10px auto; width: 300px; font-size: 11px; font-family: 'Courier New', Courier, monospace; }
.char { margin-left: 100px; }

/* entry footer */
#footer a { color: var(--green);  }
#footer a:hover { color: #fff;  }

.tags a, .music a { text-decoration: none;  }
.tags a:hover { border-radius: 3px; }
.tags a::before { visibility: hidden; content: '#';  }
.tags a:hover::before { visibility: visible;  }
.music a:hover {  text-decoration: underline;  }

.comments { margin-top: 5px; text-align: right; font-size: 11px; letter-spacing: 0px; }

@font-face {
  font-family: 'Silkscreen';
  src: url('/fonts/slkscr.ttf') format('truetype');
}

:root {
  --pink: #ff8cea;

  --lightgreen: #f0fbb4;
  --green: #c1dc25;
  --darkgreen: #798b0d;
  --darkergreen: #566500;
}

@media only screen and (max-width: 700px) {
  #top {  display: none;  }
  #container {  display: flex; flex-flow: column nowrap; margin: 0 10px; padding: 0; padding-bottom: 3%; }
  #left {  margin-top: 10px;  }
  #right {  border-top: 1px dashed var(--pink); border-left: none; }
  
  .ribbon { width: 50%; }
  #left .calendar { margin: auto; margin-bottom: 10px; width: 50%; }
  .visible_tags {float: left; margin-right: 20px;}
  .clap { text-align:right; }
  .pleaseclap { float: right; margin: 5px 0; padding: 5px; width: auto; }
  .pleaseclap { width: 30%; }  
}

@media only screen and (max-width: 550px) {
  .videocontainer, .mrsdarcy {  margin: auto; width: calc(100% - 12px);  }
  .ppvid {  margin: auto auto 10px auto;  }
  .scrapbook {  margin: 1em 0;  }
}