html {
  scroll-behavior: smooth;
}

body {
    background-color: #363636;
	text-rendering: optimizeLegibility;
    margin: 0;
}

::selection {
    background-color: #000 !important;
    color: #ffffff !important;
}

* {
	box-sizing: border-box;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    scrollbar-color: #35a69b #e6ded5;
	cursor: url("/scrapbook/medialog/img/runescape.cur"), auto;
}

* img {
    user-select:none;
}

*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: #e6ded5;
}

*::-webkit-scrollbar-thumb {
    background-color: #35a69b;
}

a {
	cursor: url('/scrapbook/medialog/img/in.cur'), auto;
}

a * {
	cursor: url('/scrapbook/medialog/img/in.cur'), auto;
}

.header {
    margin: 3em auto auto auto;
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    height: 550px;
    position: relative;
    filter: drop-shadow(-20px 5px 2px #000000a2);
}

@keyframes pulseShadow {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(179, 130, 236, 0)) drop-shadow(-15px 0px 2px #00000050);
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(179, 130, 236, 1)) drop-shadow(-15px 0px 2px #00000050);
    }
}

.headerimg {
    img:hover {
        transform: rotate(4deg);
    }
    img.tv:hover + .channels {
        transform: rotate(4deg);
        top:120px;
        left:88px;
    }
.elf {
    position: absolute;
    left: 155px;
    z-index: 0;
    animation: pulseShadow 2s infinite ease-in-out;
}

.tv {
    position: absolute;
    left:65px;
    top:97px;
    transform: rotate(-10deg);
    z-index: -1;
}

.laptop {
    position: absolute;
    left:255px;
    top:85px;
    z-index: -1;
}

.channels {
    position: absolute;
    z-index: -2;
    top:124px;
    transform: rotate(-10deg);
    left:75px;
    image-rendering: pixelated;
    pointer-events: none;
}

.bookss {
    position: absolute;
    left:280px;
    top:358px;
    z-index: 1;
    filter: drop-shadow(-15px 0px 2px #00000071);
}

.cds {
    position: absolute;
    left:130px;
    top:471px;
    z-index: 1;
}

.controller {
    position: absolute;
    left:100px;
    top:355px;
    z-index: 1;
    transform: rotate(10deg);
    filter: drop-shadow(-15px 0px 2px #00000071);
}
}

.box {
	display: flex;
    position: absolute;
    left:-150px;
    top:200px;
    image-rendering: pixelated;
}

.box .inner {
	width: 400px;
	height: 200px;
	line-height: 200px;
	font-size: 3.5em;
	font-family: 'danger';
	font-weight: 100;
	white-space: nowrap;
	overflow: hidden;
    box-shadow: inset 0 0 3px #0000003f;
}

.box .inner:first-child {
	background-color: rgb(175, 132, 104);
	color: rgb(110, 61, 28);
	transform-origin: right;
	transform: perspective(100px) rotateY(-15deg);
&::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/scrapbook/medialog/img/cardboard1.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  z-index: -1;
}
}

.box .inner:last-child {
	background-color: rgb(204, 163, 139);
	color: rgb(255, 243, 227);
	transform-origin: left;
	transform: perspective(100px) rotateY(15deg);
&::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/scrapbook/medialog/img/cardboard2.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  z-index: -1;
}
}

.box .inner span {
	position: absolute;
	animation: marquee 5s linear infinite;
}

.box .inner:first-child span {
	animation-delay: 2.5s;
	left: -100%;
}

@keyframes marquee {
	from {
		left: 100%;
	}

	to {
		left: -100%;
	}
}

  @font-face {
  font-family: 'danger';
  src: url('/fonts/danger.ttf');
}

  @font-face {
  font-family: 'wobble';
 src: url('/fonts/wobble.otf');
}

.years {
    margin: 1em auto auto;
    font-size: 2rem;
    width: fit-content;
    text-align: center;
    color:#fff3e3;
    label {
        display: block;
        font-family: 'wobble';
        margin-bottom: -0.15em;
        text-shadow: 1px 1px #a770be;
    }
    select {
        font-size: 1.3rem;
        background-color: #dbc6e9;
        border: 4px ridge #fcf6f0;
        font-family: times;
        width: 100px;
        letter-spacing: 4px;
        font-family: monospace;
    }
}

.nav {
    text-align: center;
    margin: auto;
    color:#fff3e3;
    letter-spacing: 0.1rem;
    font-size: 1.2rem;
    padding: 2em;
    span {
        display: inline-block;
        padding: 0 4px;
        margin: 2px 0;
        background-color: #0000007a;
        border: 1px ridge #fff3e36e;
        &:hover {
            filter: invert(100%);
        }
    }
    a {
        color: #fff3e3;
        text-shadow: 1px 1px #000;
        text-decoration: none;
        letter-spacing: 2px;
        span:hover {
            color: rgb(223, 231, 152);
        }
    }
}

.navico {
    vertical-align: -2px;
}

.knight {
    display: grid;
    grid-template-areas:
    'sidebar content';
    grid-template-columns: auto 1fr;
    column-gap: 1em;
}

.knight > .sidebar {
    grid-area: sidebar;
    background-color: rgb(77, 77, 77);
    background-image: url('https://static.vecteezy.com/system/resources/previews/041/168/787/large_2x/bubble-wrap-texture-free-photo.jpg');
    background-blend-mode: screen;
    border-width: 8px;
    border-style: solid;
    border-image: url("/scrapbook/medialog/img/mus.gif") 8 fill round;
    border-top-width: 0;
    border-left-width: 0;
    border-bottom-width: 0;
    border-image-outset: 4px;
    display: flex;
    flex-direction: column;
    max-width: 480px;
}

.knight > .queen {
    display: none;
    grid-area: content;
    overflow: auto;
    height: 100vh;
    h1 {
        margin: 0;
    }
    .inner {
    border-width: 8px;
    border-style: solid;
    border-image: url("/scrapbook/medialog/img/bigly.gif") 8 fill round;
    border-image-outset: 3px;
    margin: 1em 1em 1em 0.2em;
    gap: 0.5em;
    display: grid;
    &.one {
    grid-template-areas:
    'gamelog bookshelf'
    'gamelog filmtv';
	grid-template-columns: 1fr 1fr;
        .gamelog {
        border-top: none;
        border-left: none;
        }
    }
    &.two {
    grid-template-areas:
    'bookshelf gamelog'
    'filmtv gamelog';
	grid-template-columns: 1fr 1fr;
        .gamelog {
        border-top: none;
        border-right: none;
        }
    }
    &.three {
    grid-template-areas:
    'gamelog bookshelf'
    'filmtv filmtv';
	grid-template-columns: 1fr 1fr;
        .gamelog {
        border-top: none;
        border-left: none;
        }
    }
    &.four {
    grid-template-areas:
    'bookshelf gamelog'
    'filmtv filmtv';
	grid-template-columns: 1fr 1fr;
        .gamelog {
        border-top: none;
        border-right: none;
        }
    }
    &.five {
    grid-template-areas:
    'gamelog gamelog'
    'bookshelf filmtv';
	grid-template-columns: 1fr 1fr;
        .gamelog {
        border-top: none;
        border-right: none;
        border-left: none;
        }
    }
    }
    .inner:last-of-type {
    margin-bottom: 0;
    }
}

.queen.active {
  display: block;
}

.gamelog {
    grid-area: gamelog;
    background-color: #1b1b1b;
    border:1px dashed #fff;
    color:#fff;
    padding: 1em 1.3em;
    margin:-4px;
    font-family: monospace;
    pre {
        margin: auto auto 2em;
        overflow: auto;
        text-align: center;
        &:hover {
            color:#17fe00;
        }
    }
}

h2 {
    margin: 2px 0 0;
    font-weight: 100;
    font-size: 1.2rem;
    text-align: center;
}

h3 {
    margin: 0.5em 0 0 0.5em;
    font-weight: 100;
    font-size:1.1rem;
}

.games {
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
}

.game {
  flex: 1 1 calc(25% - 1%);
  box-sizing: border-box;
  border: 1px solid #fff;
  background-color: #1b1b1b;
  margin-bottom: 1%;
    &:hover {
        filter: invert(100%);
        border: 1px solid #000;
    }
    &:hover .logo {
        filter: invert(100%) !important;
    }
    &.up:hover::before {
        content: "";
        width: 32px;
        height: 31px;
        filter: invert(100%);
        background-image: url('/scrapbook/medialog/img/thumbsup.gif');
        position: absolute;
        transform: rotate(-10deg);
        top:-10px;
        left:-5px;
        z-index: 1;
    }
    &.down:hover::before {
        content: "";
        width: 32px;
        height: 31px;
        filter: invert(100%);
        background-image: url('/scrapbook/medialog/img/thumbsdown.gif');
        position: absolute;
        transform: rotate(-10deg);
        top:-10px;
        left:-5px;
        z-index: 1;
    }
    .logo {
        width: 100%;
        filter: grayscale(100%);
        max-height: 215px;
        aspect-ratio: 20 / 9;
        object-fit: cover;
        overflow: hidden;
        border-bottom: 1px dotted #ffffff59;
    }
    &:hover .logo {
        filter: unset;
    }
    &:hover .steam, &:hover .deck, &:hover .windows, &:hover .pirate, &:hover .emulate {
        filter: grayscale(0) invert(100%);
    }
    .stars {
        display: block;
        text-align: center;
        margin: 0.2em 0 -0.5em 0;
        span {
        color:yellow;
        }
    }

    .review {
        padding: 0.4em;
        border: 1px dashed #fff;
        margin: 0.4em;
        height:70px;
        overflow: hidden;
        line-height: 11px;
        position: relative;
        .external-icon {
            fill:#b5c3ac;
            margin-right: -4px;
            position: absolute;
            top: 53px;
            right: 10px;
        }
        a {
            color:#b5c3ac;
            &:hover {
                color:greenyellow;
            }
        }
.fade-out {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #1b1b1b56 30%, #1b1b1bd7 70%, #1b1b1b 100%);  pointer-events: none;
}
.read-more {
    display: inline-block;
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: #1b1b1b;
    padding: 0 2px;
    border-radius: 4px;
}
    }
    .reviewimg:hover {
        filter: hue-rotate(90deg) saturate(300%);
        cursor: url('/scrapbook/medialog/img/in.cur'), auto;
    }
}

.no .external-icon {
    display: none;
}

.icon {
    content: "";
    position: relative;
    top:0;
    left:0;
    display: inline-block;
    &:hover .tooltip {
        visibility: visible;
        opacity: 1;
        }
    &.steam {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    background-image: url('/scrapbook/medialog/img/steam.gif');
    }
    &.deck {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    background-image: url('/scrapbook/medialog/img/deck.gif');
    }
    &.windows {
    width: 16px;
    height: 16px;
    vertical-align: -4px;
    background-image: url('/scrapbook/medialog/img/windows.gif');
    }
    &.playstation {
    width: 20px;
    height: 15px;
    vertical-align: -4px;
    background-image: url('/scrapbook/medialog/img/playstation.png');
    }
    &.pirate {
    width: 16px;
    height: 16px;
    vertical-align: -4px;
    background-image: url('/scrapbook/medialog/img/pirate.gif');
    }
    &.emulate {
    width: 16px;
    height: 16px;
    vertical-align: -4px;
    background-image: url('/scrapbook/medialog/img/emulate.gif');
    }
    &.kindle {
    position: relative;
    right:15px;
    top:-140px;
    left: unset;
    width: 20px;
    height: 20px;
    font-family: monospace;
    vertical-align: -4px;
    background-image: url('/scrapbook/medialog/img/kindle.png');
    }
    &.physical {
    position: relative;
    right:15px;
    top:-140px;
    left: unset;
    width: 20px;
    height: 20px;
    font-family: monospace;
    vertical-align: -4px;
    background-image: url('/scrapbook/medialog/img/book.png');
    }
}

.tooltip {
  visibility: hidden;
  background-color: #333;
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
  &.steamtip::after {
    content: "played on steam";
  }
  &.windowstip::after {
    content: "windows 11";
  }
  &.decktip::after {
    content: "played on steam deck";
  }
  &.playstationtip::after {
    content: "played on playstation";
  }
  &.piratetip::after {
    content: "pirated";
  }
  &.emulatetip::after {
    content: "emulated";
  }
  &.kindletip::after {
    content: "read on kindle";
  }
  &.physicaltip::after {
    content: "read physically";
  }
}

ul.timeline{list-style-type:none;padding-left:1rem;margin-bottom:-2em}ul.timeline li{position:relative;margin:0;padding-bottom:2rem;padding-left:2rem}ul.timeline li:after{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23FFF' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E");position:absolute;left:0;top:2px;width:16px;height:16px}ul.timeline li:before{background-color:#ffffff;width:2px;content:"";position:absolute;top:0;bottom:0;left:7px}ul.timeline li:first-child:before{top:12px}ul.timeline li:last-child:before{height:6px}

#ransomizer-cwo3cghy {

  .ts, .tw, .tc {
    display: inline-block;
  }

  .ts {
    line-height: normal;
    word-spacing:0.3em;
  }

.ts {
  word-spacing: 0.7em;
}

.ts .tw .tc div::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.tcyerp {
    min-height: 77px;
    filter: drop-shadow(4px 3px 0 #ffffffe0) drop-shadow(0 0 3px #0000009f);
.tc.mlvx-0 div::before  { background-image: url('/scrapbook/medialog/img/bvd1.png'); background-position: left top }
.tc.mlvx-0 div { background-color: #803f1d;color: #ffffff; font-family: 'Rye', serif; rotate: -3deg; top: 0.03em; clip-path: polygon(7% 1%,96% 7%,100% 40%,96% 94%,3% 96%,0 70%); font-size: 100%; font-weight: bold; text-transform: lowercase; margin: 0.1em; padding: 0.2em; text-shadow: -0.03em -0.03em #1a1a1a; -webkit-text-stroke: 0.09em #1a1a1a; paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-1  { filter: drop-shadow(1px -1px 1px #666) }
.tc.mlvx-1 div::before  { background-image: url('/scrapbook/medialog/img/bvd2.png'); background-position: center top }
.tc.mlvx-1 div { background-color: #717732;color: #ffffff; font-family: 'Crimson Pro', serif; rotate: 3deg; top: -0.01em; clip-path: polygon(2% 7%,98% 4%,100% 71%,100% 94%,4% 98%,0 31%); font-size: 110%; text-transform: lowercase; margin: 0.1em; padding: 0.2em; -webkit-text-stroke: 0.03em #1a1a1a; paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-2 div::before  { background-image: url('/scrapbook/medialog/img/bvd3.png'); background-position: center bottom }
.tc.mlvx-2 div { background-color: #ce1126;color: #ffffff; font-family: 'Rubik', serif; rotate: -2deg; top: 0.02em; clip-path: polygon(0 4%,100% 7%,100% 65%,97% 98%,1% 99%,0 58%); font-size: 110%; text-transform: lowercase; margin: 0.1em; padding: 0.2em;  paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-3  { filter: drop-shadow(-1px -1px 1px #666) }
.tc.mlvx-3 div::before  { background-image: url('/scrapbook/medialog/img/bvd3.png'); background-position: left top }
.tc.mlvx-3 div { background-color: #803f1d;color: #ffffff; font-family: 'Alfa Slab One', serif; rotate: -1deg; clip-path: polygon(0 7%,98% 0,100% 32%,100% 97%,7% 97%,0 41%); font-size: 110%; font-weight: bold; text-transform: uppercase; margin: 0.1em; padding: 0.1em;  paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-4  { filter: drop-shadow(-1px 1px 1px #666) }
.tc.mlvx-4 div::before  { background-image: url('/scrapbook/medialog/img/bvd4.png'); background-position: right center }
.tc.mlvx-4 div { background-color: #006847;color: #ceffef; font-family: 'Germania One', serif; rotate: 1deg; top: -0.02em; clip-path: polygon(7% 2%,95% 4%,100% 55%,97% 99%,2% 95%,0 28%); font-size: 100%; font-weight: bold; text-transform: uppercase; margin: 0.1em; padding: 0.1em; -webkit-text-stroke: 0.03em #000201; paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-5  { filter: drop-shadow(1px -1px 1px #666) }
.tc.mlvx-5 div::before  { background-image: url('/scrapbook/medialog/img/bvd1.png'); background-position: left bottom }
.tc.mlvx-5 div { background-color: #d2a567;color: #000000; font-family: 'Rye', serif; rotate: -2deg; clip-path: polygon(0 7%,94% 1%,100% 96%,100% 96%,3% 99%,0 55%); font-size: 100%; font-weight: lighter; text-transform: uppercase; margin: 0.1em; padding: 0.1em; text-shadow: -0.03em -0.03em #e6e6e6;  paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-6  { filter: drop-shadow(-1px 1px 1px #666) }
.tc.mlvx-6 div::before  { background-image: url('/scrapbook/medialog/img/bvd6.png'); background-position: center center }
.tc.mlvx-6 div { background-color: #f8c83c;color: #000000; font-family: 'Abril Fatface', serif; rotate: -1deg; top: -0.01em; clip-path: polygon(1% 1%,93% 7%,100% 71%,98% 94%,3% 96%,0 56%); font-size: 110%; text-transform: lowercase; margin: 0.1em; padding: 0.2em;  paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-7  { filter: drop-shadow(-1px -1px 1px #666) }
.tc.mlvx-7 div::before  { background-image: url('/scrapbook/medialog/img/bvd2.png'); background-position: right top }
.tc.mlvx-7 div { background-color: #ce1126;color: #ffffff; font-family: 'Germania One', serif; rotate: 3deg; top: -0.04em; clip-path: polygon(3% 7%,93% 2%,100% 59%,95% 96%,5% 93%,0 58%); font-size: 110%; font-weight: bold; font-style: italic; margin: 0.1em; padding: 0.2em;  paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-8  { filter: drop-shadow(1px -1px 1px #666) }
.tc.mlvx-8 div::before  { background-image: url('/scrapbook/medialog/img/bvd5.png'); background-position: center bottom }
.tc.mlvx-8 div { background-color: #0c8489;color: #fbffff; font-family: 'Courier Prime', serif; rotate: 1deg; top: 0.04em; clip-path: polygon(6% 7%,97% 3%,100% 73%,94% 96%,3% 97%,0 62%); font-size: 110%; font-weight: bold; text-transform: uppercase; margin: 0.1em; padding: 0.1em;  paint-order: stroke fill; line-height: 75% ; position: relative; }
&:hover {
.tc.mlvx-0  { filter: drop-shadow(-1px -1px 1px #666) }
.tc.mlvx-0 div::before  { background-image: url('/scrapbook/medialog/img/bvd7.png'); background-position: right top }
.tc.mlvx-0 div { background-color: #006847;color: #ceffef; font-family: 'Crimson Pro', serif; rotate: 3deg; top: 0.02em; clip-path: polygon(6% 1%,99% 1%,100% 15%,96% 100%,2% 100%,0 60%); font-size: 110%; font-weight: bolder; text-transform: lowercase; margin: 0.1em; padding: 0.2em;  paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-1  { filter: drop-shadow(1px 1px 1px #666) }
.tc.mlvx-1 div::before  { background-image: url('/scrapbook/medialog/img/bvd2.png'); background-position: right bottom }
.tc.mlvx-1 div { background-color: #f9aa51;color: #000000; font-family: 'Rubik', serif; rotate: 2deg; top: 0.03em; clip-path: polygon(4% 3%,94% 6%,100% 91%,98% 99%,0 97%,0 91%); font-size: 100%; font-weight: bolder; text-transform: uppercase; margin: 0.1em; padding: 0.2em; paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-2  { filter: drop-shadow(1px -1px 1px #666) }
.tc.mlvx-2 div::before  { background-image: url('/scrapbook/medialog/img/bvd8.png'); background-position: left center }
.tc.mlvx-2 div { background-color: #f15770;color: #000000; font-family: 'Alfa Slab One', serif; rotate: 1deg; top: 0.03em; clip-path: polygon(1% 5%,93% 5%,100% 3%,93% 93%,4% 99%,0 95%); font-size: 110%; font-weight: lighter; margin: 0.1em; padding: 0.2em;  paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-3  { filter: drop-shadow(-1px 1px 1px #666) }
.tc.mlvx-3 div::before  { background-image: url('/scrapbook/medialog/img/bvd2.png'); background-position: left center }
.tc.mlvx-3 div { background-color: #717732;color: #ffffff; font-family: 'Courier Prime', serif; rotate: 2deg; top: -0.01em; clip-path: polygon(6% 3%,100% 1%,100% 74%,98% 97%,7% 94%,0 83%); font-size: 110%; font-weight: bold; margin: 0.1em; padding: 0.1em; text-shadow: 0.03em -0.03em #1a1a1a; -webkit-text-stroke: 0.03em #1a1a1a; paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-4  { filter: drop-shadow(1px -1px 1px #666) }
.tc.mlvx-4 div::before  { background-image: url('/scrapbook/medialog/img/bvd5.png'); background-position: right bottom }
.tc.mlvx-4 div { background-color: #ce1126;color: #ffffff; font-family: 'Rye', serif; rotate: 1deg; top: -0.02em; clip-path: polygon(0 5%,97% 6%,100% 41%,99% 93%,2% 98%,0 28%); font-size: 110%; font-weight: bold; font-style: italic; text-transform: uppercase; margin: 0.1em; padding: 0.1em; text-shadow: 0.03em -0.03em #1a1a1a;  paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-5  { filter: drop-shadow(1px 1px 1px #666) }
.tc.mlvx-5 div::before  { background-image: url('/scrapbook/medialog/img/bvd3.png'); background-position: right top }
.tc.mlvx-5 div { background-color: #0c8489;color: #fbffff; font-family: 'Germania One', serif; rotate: -1deg; top: 0.01em; clip-path: polygon(6% 7%,94% 5%,100% 83%,100% 93%,3% 96%,0 23%); font-size: 100%; font-weight: bold; text-transform: lowercase; margin: 0.1em; padding: 0.1em;  paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-6  { filter: drop-shadow(1px -1px 1px #666) }
.tc.mlvx-6 div::before  { background-image: url('/scrapbook/medialog/img/bvd9.png'); background-position: center center }
.tc.mlvx-6 div { background-color: #f8c83c;color: #000000; font-family: 'Berkshire Swash', serif; rotate: 3deg; top: 0.01em; clip-path: polygon(5% 3%,98% 1%,100% 53%,95% 100%,7% 99%,0 34%); font-size: 100%; font-weight: bold; text-transform: lowercase; margin: 0.1em; padding: 0.1em; text-shadow: 0.03em -0.03em #e6e6e6; -webkit-text-stroke: 0.06em #e6e6e6; paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-7  { filter: drop-shadow(1px 1px 1px #666) }
.tc.mlvx-7 div::before  { background-image: url('/scrapbook/medialog/img/bvd10.png'); background-position: left center }
.tc.mlvx-7 div { background-color: #717732;color: #ffffff; font-family: 'Rubik', serif; rotate: -3deg; top: -0.02em; clip-path: polygon(5% 2%,93% 0,100% 97%,99% 94%,3% 99%,0 63%); font-size: 110%; font-weight: lighter; text-transform: lowercase; margin: 0.1em; padding: 0.1em; text-shadow: 0.03em 0.03em #1a1a1a;  paint-order: stroke fill; line-height: 75% ; position: relative; }
.tc.mlvx-8 div::before  { background-image: url('/scrapbook/medialog/img/bvd2.png'); background-position: center bottom }
.tc.mlvx-8 div { background-color: #f15770;color: #000000; font-family: 'Pacifico', serif; rotate: -3deg; top: 0.02em; clip-path: polygon(6% 7%,93% 7%,100% 7%,97% 95%,1% 96%,0 52%); font-size: 100%; text-transform: uppercase; margin: 0.1em; padding: 0.1em;  paint-order: stroke fill; line-height: 75% ; position: relative; }
}
}


  --global-font-size: 3rem;
  --global-text-align: center;
}

.bookshelf {
    grid-area:bookshelf;
    padding: 1em 0.5em 1.5em;
.shelf-wrap {
  left: 10%;
  right: 10%;
  height: 44px;
  box-shadow: 0px 7px 0px 0px rgba(141, 112, 86, 0.8);
  filter: drop-shadow(0 0 20px #000000de);
}
.book {
  width: 100px;
  box-shadow: 0px 0px 3px #666666;
  filter: drop-shadow(0 0 1px #000000d5);
  &[data-book] {
    cursor: url('/scrapbook/medialog/img/in.cur'), auto;
    &:hover {
        filter: drop-shadow(0 0 1px #000000d5) sepia(100%);
    }
    }
  &.only[data-book] {
    cursor: unset;
    &:hover {
        filter: drop-shadow(0 0 1px #000000d5);
    }
    }
  }
.books {
  width: 100%;
  text-align: center;
  position: relative;
  top: 30px;
  z-index: 1;
}
.shelf {
    height: 44px;
    background: -webkit-linear-gradient(top,  #8a6d54 0%,rgb(209, 180, 155) 100%), url('/scrapbook/medialog/img/dither.png');
    background-blend-mode: hard-light;
    image-rendering: pixelated;
    transform: perspective(100px) rotateX(15deg);
    transform-origin: 50% 100% 0;
}
.merp {
    margin-top: 0.1em;
}
.spoiler {
    background-color: #1b1b1b;
    transition: background-color 0.2s ease;
    &:hover {
        background-color: unset;
    }
}
    table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
    margin: 2em auto auto;
    font-size: 0.8rem;
    table-layout: auto;
    word-wrap: break-word;
    color:#1b1b1b;
    }
    td {
    padding: 0.3em;
    border: 1px solid #000000;
    word-break: break-word;
    }
    th {
        font-size: 0.86rem;
    }
td:hover {
    background-color: #0000001c;
}
.started, .finished {
    width: 72px;
}
.stars {
    width:64px;
}
.year {
    width: 40px;
}
}

.table-container table {
	display: none;
}

.table-container .active {
	display: table;
}

  .tvfilmtitle {
    width: fit-content;
    color: #e7e7db;
    font-family: 'lasenter';
    font-size: 4rem;
    margin-left:-0.3em;
    margin-bottom: -0.5em;
    transform: rotate(-5deg);
    z-index: 1;
    position: relative;
    text-shadow: 
    .1vw 0vw .25vw #e7e7db, .2vw 0vw .25vw #e7e7db, .4vw 0vw .25vw #e7e7db, 
    .1vw 0vw .1vw #464644, .2vw 0vw 0vw #464644, .4vw 0vw 0vw #464644,
    .1vw 0vw .1vw #464644, .2vw 0vw .1vw #464644, .4vw 0vw 0vw #464644,
    .1vw 0vw .8vw #464644, .2vw 0vw .8vw #464644, .4vw 0vw .8vw #464644, .2vw 0vw .5vw #464644,
    .1vw 0vw .5vw #464644, .2vw 0vw .5vw #464644, .4vw 0vw .5vw #464644, 
    .1vw 0vw 10vw #464644, .2vw 0vw 10vw #464644, .4vw 0vw 10vw #464644;
    &:hover {
        filter: hue-rotate(160deg) saturate(400%);
    }
  }

  @font-face {
  font-family: lasenter;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/lasenter.ttf);
}

.filmtv {
    grid-area:filmtv;
    background-color: #ffffffd8;
    margin:1em;
    min-height: 150px;
    box-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
    border-radius: 4px;
    .external-icon {
        display: none;
    }
}

.filmtvinner {
    margin: 1em;
    box-shadow: inset 0 0 10px #0000004d;
    border-radius: 30px;
    background-image: url('/scrapbook/medialog/img/dither2.png');
}

.latest-movie {
    display: inline-flex;
    margin: 0 0 2em 1.5em;
    background-color: #0000001e;
    box-shadow: 4px 3px 0 #00000077;
    color:#1b1b1b;
    border-radius: 20px;
    padding: 0.77em 1em 0.5em 0;
    position: relative;
    flex-direction: row;
    &::before {
        content:"PULLED FROM LETTERBOXD";
        bottom:-18px;
        right:12px;
        position: absolute;
        font-family: monospace;
        font-size: 11px;
        margin: 2px 4px 0 0;
        color:#000000ad;
        text-shadow: 1px 1px #ffffffb4;
    }
}

.latest-movie > div {
  display: contents;
}

.latest {
    display: inline-flex;
    margin: 3em 1em 2em 0;
    color:#1b1b1b;
    .progress {
        position: relative;
    &::before {
        content:"in progress";
        position: absolute;
        font-family: monospace;
        color:#2040bb;
        font-family: monospace;
        text-shadow: 1px 1px #b9d8fb;
        font-size: 10px;
        width: 61px;
        top:14px;
    }
    }
}

.movie-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 125px;
  margin-left: 1em;
  margin-top: 4px;
}

.movie-poster {
  width: 125px;
  aspect-ratio: 2 / 3;
  margin: auto auto 0.5em;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 1px 1px 1px 1px #000000bb;
  display: block;
}

.movie-info {
  text-align: center;
}

.movie-title {
    font-size: 0.87rem;
    letter-spacing: 1px;
  text-align: center;
  text-shadow: 1px 1px #ffffff83;
}

.movie-stars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;
  font-family: monospace;
  text-shadow: 1px 1px #ffffff83;
  img {
  filter: drop-shadow(1px 1px 0 #ffffff83);
  }
}

.star {
  margin-top: -1px;
  margin-right: 1px;
}

.rewatch {
  font-size: 0.75em;
  color: #6a9fb5;
  margin-left: 5px;
}

.whole {
    margin-top:1em;
    margin-right:1em;
    padding: 1em 0 1em 1em;
}

/* ---------------------- *//* ---------------------- */

.july2025 {
    background-color: rgba(183, 255, 237, 0.856);
        background-image: url('/scrapbook/medialog/img/july2025.gif');
        background-position: 0 300px;
        background-blend-mode: luminosity;
    border: 4px ridge #ffe15d;
    > div {
        background-color: rgb(254, 255, 198);
        background-image: url('/scrapbook/medialog/img/july2025_2.gif');
        background-attachment: fixed;
        background-position: center;
        background-blend-mode: luminosity;
    }
    h1 {
    padding: 1em 0 0;
    text-align: center;
        img {
        height: 90px;
        filter: drop-shadow(0 0 2px #000);
        &:hover {
            filter: drop-shadow(0 0 6px #fff) invert(100%);
        }
        }
    }
    .yerp {
        background-color: #ffffffd8;
    }
    th {
        color: #effff5;
    }
    .palm {
        image-rendering: pixelated;
        filter: drop-shadow(0 0 2px #000) hue-rotate(-50deg) brightness(120%);
    }
    .reviewimg {
        float: left;
        padding: 2px 0.2em 0 0;
    }
    .filmtvinner {
    background-color: #83844b33;
    }
}

/* ---------------------- *//* ---------------------- */
/* ---------------------- *//* ---------------------- */

.august2025 {
    background-color: rgba(255, 209, 172, 0.856);
        background-image: url('/scrapbook/medialog/img/august2025.gif');
        background-position: 0 300px;
        background-blend-mode: luminosity;
    border: 4px ridge #fff7f0;
    > div {
        background-color: rgb(164, 201, 255);
        background-image: url('/scrapbook/medialog/img/august2025_2.gif');
        background-attachment: fixed;
        background-position: center;
        background-blend-mode: luminosity;
    }
    h1 {
    padding: 1em 0 0;
    text-align: center;
        img {
        height: 90px;
        filter: drop-shadow(0 0 2px #000);
        &:hover {
            filter: drop-shadow(0 0 6px #fff) invert(100%);
        }
        }
    }
    .yerp {
        background-color: #ffffffd8;
    }
    th {
        color: #effff5;
    }
    .palm {
        image-rendering: pixelated;
    }
    .reviewimg {
        float: left;
        padding: 2px 0.2em 0 0;
    }
    .filmtvinner {
    background-color: #8bafe433;
    }
}

/* ---------------------- *//* ---------------------- */

@media (min-width: 769px) and (max-width: 1500px) {
  .started, .finished, .author, .title, .year, .stars {
    width: unset !important;
  }
}
@media (max-width: 768px) {
.header {
    width: 100%;
}
.knight {
    grid-template-areas:
    'sidebar'
    'content';
    grid-template-columns: unset;
    grid-template-rows: auto 1fr;
    column-gap: unset;
    row-gap: unset;
    overflow-x: hidden !important;
}
.knight > .queen {
    overflow: unset;
    height: unset;
    .inner {
    border-width: 8px;
    border-style: solid;
    border-image: url("/scrapbook/medialog/img/bigly.gif") 8 fill round;
    border-image-outset: 3px;
    margin: 0.2em 0.2em 0.2em 0;
    gap: 2em;
    display: grid;
    &.one {
    grid-template-areas:
    'gamelog'
    'bookshelf'
    'filmtv';
	grid-template-columns: auto;
    }
    &.two {
    grid-template-areas:
    'bookshelf'
    'gamelog'
    'filmtv';
	grid-template-columns: auto;
    }
    &.three {
    grid-template-areas:
    'gamelog'
    'bookshelf'
    'filmtv';
	grid-template-columns: auto;
    }
    &.four {
    grid-template-areas:
    'bookshelf'
    'gamelog'
    'filmtv';
	grid-template-columns: auto;
    }
    &.five {
    grid-template-areas:
    'gamelog'
    'bookshelf'
    'filmtv';
	grid-template-columns: auto;
    }
    }
    .inner:last-of-type {
    margin-bottom: 0;
    }
}
#ransomizer-cwo3cghy {
    --global-font-size: 2rem;
}
.tcyerp {
    min-height: unset !important;
    height: 50px !important;
}
.bookshelf {
    padding: 0em 0.25em 0;
}
table {
    font-size: 0.9rem !important;
}
.started, .finished, .author, .title, .year, .stars {
    width: unset !important;
}
.filmtv {
    margin: 0.5em;
    text-align: center;
    padding-bottom: 2em;
}
.tvfilmtitle {
    margin: -0.3em auto 0.5em -0.2em;
    text-align: center;
}
.latest-movie {
  display: inline-flex;
  margin: auto;
  background-color: #0000001e;
  color: #1b1b1b;
  padding: 1em 1em 1em 0;
  position: relative;
  flex-direction: row;
}
.latest {
    margin: 0.5em 0 1em 0;
    width: fit-content;
}
.header {
    margin-left: -30px;
    max-width: unset !important;
}
.sidebar {
    border: none !important;
    max-width: unset !important;
}
.whole {
    margin-right: unset;
    padding: 1em 0.25em 1em 0.4em;
}
}