html,body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
    filter: contrast(1.01);
}

html {
  scroll-behavior: smooth;
}

body {
    background-image: url('/shrines/obscuregames/drownedgod/img/leather2.jpg'), url('/shrines/obscuregames/drownedgod/img/leather.jpg');
    background-repeat: repeat, no-repeat;
	background-attachment: fixed, fixed;
    background-position: right bottom, right bottom;
    background-blend-mode: lighten;
	text-rendering: geometricPrecision;
    background-color: #000;
}

::selection {
    background-color: #2d0517 !important;
    color: #fefc79 !important;
}

* {
	box-sizing: border-box;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    scrollbar-color: #921433 transparent;
	cursor: url("/shrines/obscuregames/drownedgod/img/cur.cur"), auto;
}

* img {
    user-select:none;
}

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

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

*::-webkit-scrollbar-thumb {
    background-color: transparent;
}

a {
	cursor: url('/shrines/obscuregames/drownedgod/img/pyramid.cur'), auto;
    color:#6d0f26 !important;
    &:hover {
        text-decoration: underline !important;
        text-decoration-color: #6d0f26 !important;
    }
    &:focus {
        outline-color: #6d0f26 !important;
    }
}

a * {
	cursor: url('/shrines/obscuregames/drownedgod/img/pyramid.cur'), auto;
}

.external-icon {
    margin-left:2px !important;
    display: inline;
}

.scroll-hug {
  width: 100%;
  display: flex;
  justify-content: center;
}

.knight {
	grid-area: knight;
	margin: 4% auto 4% 75px;
	column-gap: 2em;
	row-gap: 2em;
	display: grid;
    width: 972px;
	grid-template-areas:
		'header header'
        'sidebar content'
		'sidebar content';
    grid-template-columns: auto 1fr;
}

header {
    grid-area: header;
    position: relative;
    background-color: #2c2c2c;
    height: 400px;
    background-image: url('/shrines/obscuregames/drownedgod/img/headerbg.gif');
    background-size: cover;
    border: 2px ridge #6a1027;
    .halo {
        filter: drop-shadow(6px 4px 1px #0000007e) drop-shadow(0 0 10px #ff9532be);
    }
    .ayy {
        height: 396px;
        overflow: hidden;
        position: absolute;
        right:258px;
    }
    .logo {
        position: absolute;
        bottom:-23px;
        right:35px;
        filter: drop-shadow(6px 4px 1px #0000007e);
    }
    .subtitle {
        position: absolute;
        z-index: 1;
        bottom:20px;
        right:152px;
        filter: drop-shadow(0 0 1px #000) drop-shadow(6px 4px 1px #0000007e);
    }
    .map2 {
        filter: drop-shadow(6px 4px 1px #0000007e) drop-shadow(0 0 30px #ff9532be);
    }
    .map {
        position: absolute;
        top:-65px;
        right:292px;
        animation: spin 60s linear infinite;
    }
    .eye {
        position: absolute;
        top:103px;
        right:459px;
        z-index: 1;
        filter: drop-shadow(0 0 1px #000000) drop-shadow(0 0 3px #5f2e0b);
    }
    .moon {
        position: absolute;
        top:-65px;
        right:292px;
        --start: 0deg;
        animation: spin2 50s linear infinite;
    }
    .planet1 {
        position: absolute;
        top:-65px;
        right:292px;
        --start: 72deg;
        animation: spin2 25s linear infinite;
    }
    .planet2 {
        position: absolute;
        top:-65px;
        right:292px;
        --start: 144deg;
        animation: spin2 20s linear infinite;
    }
    .planet3 {
        position: absolute;
        top:-65px;
        right:292px;
        --start: 216deg;
        animation: spin2 30s linear infinite;
    }
    .planet4 {
        position: absolute;
        top:-65px;
        right:292px;
        --start: 288deg;
        animation: spin2 15s linear infinite;
    }
    .music {
        width: 420px;
        height: 67px;
        background-image: url('/shrines/obscuregames/drownedgod/img/music.gif');
        background-repeat: no-repeat;
        position: absolute;
        bottom: -20px;
        left:-30px;
#title {
    position: absolute;
    top: 25px;
    left: 159px;
    color: #fdeb7c;
    width: 158px;
    height: 19px;
    line-height: 19px;
    font-family: "Pixelated MS Sans Serif", Arial;
    font-size: 11px;
    font-weight: 100;
    overflow: hidden;
    white-space: nowrap;
    text-shadow: 1px 1px 0 #000;
}

#title span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 10s linear infinite;
}
        #play {
            position: absolute;
            border: none;
            background-color: unset;
            font-size: 1.4rem;
            top:18px;
            left:100px;
            background-image: url("/shrines/obscuregames/drownedgod/img/musplay.gif");
            background-repeat: repeat;
            background-position: center;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            cursor: url('/shrines/obscuregames/drownedgod/img/pyramid.cur'), auto;
        }
        #prev, #next {
            top:20px;
            position: absolute;
            cursor: url('/shrines/obscuregames/drownedgod/img/pyramid.cur'), auto;
            width: 13px;
            height: 30px;
            background-repeat: no-repeat;
            border: none;
            background-color: unset;
        }
        #prev {
            left:135px;
            background-image: url('/shrines/obscuregames/drownedgod/img/musicarrow1.gif');
        }
        #next {
            background-image: url('/shrines/obscuregames/drownedgod/img/musicarrow2.gif');
            right:77px;
        }
    }
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin2 {
  from {
    transform: rotate(var(--start));
  }
  to {
    transform: rotate(calc(var(--start) - 360deg));
  }
}

.vh {
    vertical-align: -3px;
    margin-right: 3px;
}

.nmb {
    margin-bottom: 0;
}

.sidebar.win98 {
    summary:hover {
        color:#e0a23b;
        cursor: url('/shrines/obscuregames/drownedgod/img/pyramid.cur'), auto;
    }
    li:hover {
        cursor: url('/shrines/obscuregames/drownedgod/img/pyramid.cur'), auto;
        color:#6d0f26;
        text-decoration: underline !important;
        text-decoration-color: #6d0f26 !important;
    }
    li.no:hover {
        color: unset;
        cursor: url("/shrines/obscuregames/drownedgod/img/cur.cur"), auto;
        text-decoration: unset !important;
        text-decoration-color: unset !important;
    }
    li.no a:hover {
        color: #6d0f26 !important;
    }
    a {
        color:#000 !important;
        &:focus {
            background-color: unset !important;
            outline: unset !important;
        }
    }
    .external-icon {
        display: none;
    }
    span {
        color:#808080;
    }
    .status-bar-field .navtext {
        color:#000;
    }
}

.sidebar.win98, .content.win98 {
    .title-bar {
        background: linear-gradient(to right, #2e0618, #e0a23b);
    }
    hr {
        color: transparent;
        margin-top: 0;
    }
    .navico {
    position: absolute;
    margin-top: -2px;
    }
    .navtext {
        padding-left: 20px;
        color: #fff;
    }
    .transfer {
        text-align: center;
        width: fit-content;
        margin:auto
    }
    .winzip {
        float:left;
        margin-right: 6px;
        margin-top: 2px;
    }
    .op {
        margin-left: -1px;
    }
    .po {
        margin-left: 1px;
    }
    
     & table > tbody > tr.highlighted {
        background-color: #6e3c23 !important;
     }
}

.sidebar {
    grid-area: sidebar;
    width:260px;
}

.pages {
    height: 100%;
}

.page {
  display: none;
  height: auto;
}

.page.active {
  display: block;
}

.content {
    grid-area: content;
    &.win98 {
        .window {
            height: 100%;
        }
        .window-body {
            height: 100%;
        }
        .ff.field-border-disabled {
            height: 100%;
        }
    }
    .tagline {
        font-family: georgia; display: block; text-align: center; font-size: 1.3rem; font-style: italic;
        color:#69e4c7;
        text-shadow: 1px 1px 0 #05775c;
        letter-spacing: 2px;
    }
    .demoframe {
        width: 100%;
        height: 482px;
    }
    #vidcontainer {
        height: 358px;
        width: 100%;
        background-color: #000;
        text-align: center;
        background-image: url('/shrines/obscuregames/drownedgod/img/tarot/placeholder.png');
        background-repeat: no-repeat;
        background-position: 8px center;
        video {
            pointer-events: none;
            margin-top: 8px;
        }
    }

    .controls {
        padding: 16px 10px 8px !important;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 8px auto 0;
        width: 100%;
        column-gap: 24px;
        background-color: #cfcee4 !important;
        background-image: url('/scrapbook/medialog/img/dither2.png'), url('/shrines/obscuregames/drownedgod/img/bg.png') !important;
        background-repeat: repeat, repeat !important;
        background-position: center, center !important;
    }

#div1, #div1 * {
}

#div1.active-cursor:hover, #div1.active-cursor:hover * {
  cursor: url("/shrines/obscuregames/drownedgod/img/item.cur"), auto;
  filter: brightness(115%);
}

    #div1 {
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: right;
        img {
            margin-top: -4px;
            width: 39px;
            height: 56px;
        }
    }
        #children {
            display: grid;
            grid-template-columns: repeat(11, 1fr);
            column-gap: 18px;
            row-gap: 8px;
    }
    .child, .child * {
        cursor: url("/shrines/obscuregames/drownedgod/img/item.cur"), auto;
    }
    .child.selected {
        filter: brightness(130%);
    }
    .box {
        float:left;
        margin-right: 8px;
    }
    .box2 {
        float:right;
        margin-left: 8px;
    }
    .phot {
        filter: drop-shadow(2px 2px 1px #000);
    }
    .center {
        text-align: center !important;
        clear: both;
    }
.wrap {
  margin: auto;
  overflow: hidden;
  position: relative;
  display: flex;
.col1,
.col2 {
  text-align: justify;
  width: calc(50% + 220px);
}
p {
  padding: 5px;
  margin: 0 0 1em;
}
.col1:before,
.col2:before {
  float: right;
  width: 1px;
  height: 110px;
  content: " ";
}
.col2:before {
  float: left;
}
.img {
  float: right;
  clear: right;
  margin: 20px 0 20px 20px;
  border-radius: 50%;
  shape-outside: circle(50%);
  opacity: 1;
  width: 200px;
  height: 200px;
}
.col2 .img {
  float: left;
  margin: 20px 20px 20px 0;
  clear: left;
}
.col1 .inner {
  margin-right: 115px;
}
.col2 .inner {
  margin-left: 115px;
}
.col2 {
  margin-left: -200px;
}
}
.landing {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap:8px;
    align-items: center;
    margin-bottom: 8px;
}
.ogsite {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:8px;
    justify-content: center;
    margin-bottom: 8px;
    img {
        width: 48%;
    }
}
#pics .window-body {
    img {
        width: 100%;
    }
}
}

#dos {
    .external-icon {
        display: none;
    }
}

svg {
  display: block;
}
.link {
    fill: none;
    stroke: #0fdab5;
    stroke-width: 2px;
}
.tree circle {
    fill: #0fdab5 !important;
}
.tree text {
    fill: #14fdce;
}
.canvas {
    width: calc(var(--pyramid-width) * 1vmin);
    height: calc(var(--pyramid-height) * 1vmin);
    perspective: 100vmin;
    overflow: hidden;
  }

  .pyramid {
    --number-of-lines: 5;
    --pyramid-width: 12;
    --pyramid-height: 12;
    --border-color: #14fdce;
    --anim-dur: 12s;
    --anim-play: running;

    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    animation: rotateY var(--anim-dur) linear infinite,
               rotateX calc(var(--anim-dur) / 2) ease-in-out infinite alternate;
    animation-play-state: var(--anim-play);
    animation-composition: add;
  }

  @keyframes rotateY {
    to { transform: rotateY(1turn); }
  }

  @keyframes rotateX {
    from { transform: rotateX(-10deg); }
    to   { transform: rotateX(10deg); }
  }

  .triangle {
    --p: calc(var(--i) / round(down, var(--number-of-lines) / 2) - 1);
    --triangle-width: var(--pyramid-width);
    --base: calc(var(--triangle-width) / 2);
    --angle: atan2(var(--base) * var(--p), var(--pyramid-height));
    --triangle-height: hypot(var(--base) * var(--p), var(--pyramid-height));
    --triangle-side-length: hypot(var(--base), var(--triangle-height));
    --triangle-side-angle: atan2(var(--base), var(--triangle-height));

    display: grid;
    place-items: center;
    grid-area: 1/1;
    width: calc(var(--triangle-width) * 1vmin);
    height: calc(var(--triangle-height) * 1vmin);
    border-bottom: solid 1px currentColor;
    color: var(--border-color);
    transform: translateZ(calc(var(--p, 0) * var(--base) / 2 * 1vmin))
               rotateX(var(--angle));
  }

  .triangle-rotated {
    transform: translateX(calc(var(--p, 0) * var(--base) / 2 * 1vmin))
               rotateY(90deg)
               rotateX(var(--angle));
  }

  .triangle::before,
  .triangle::after {
    content: "";
    display: block;
    grid-area: 1/1;
    width: 1px;
    height: calc(var(--triangle-side-length) * 1vmin);
    transform-origin: top;
  }

  .triangle::before {
    border-left: solid 1px currentColor;
    transform: rotate(var(--triangle-side-angle));
  }

  .triangle::after {
    border-right: solid 1px currentColor;
    transform: rotate(calc(0deg - var(--triangle-side-angle)));
  }

  .line {
    --p: calc((var(--i) + 1) / var(--number-of-lines));
    grid-area: 1/1;
    width: calc(var(--pyramid-width) * var(--p) * 1vmin);
    height: calc(var(--pyramid-width) * var(--p) * 1vmin);
    border: solid 1px currentColor;
    color: var(--border-color);
    transform: translateY(
                calc((var(--pyramid-height) * var(--p)) * 1vmin - 
                     (var(--pyramid-height) / 2 * 1vmin))
              )
              rotateX(90deg);
  }

  .skip-button {
  background: #14fdce;
  color: #031e11;
  padding: 0.3em 0.6em;
  font-family: monospace;
  border-radius: 0.6em;
  cursor: url('/shrines/obscuregames/drownedgod/img/pyramid.cur'), auto;
  user-select: none;
}
.skip-button:hover {
  background: #0fdab5;
}
.enter-text {
    margin-top: 1rem;
    display: block;
    text-decoration: underline;
    cursor: url('/shrines/obscuregames/drownedgod/img/pyramid.cur'), auto !important;
    &:hover {
        color: #0fdab5;
    }
}
    #terminal {
      box-sizing: border-box;
      font-family: "PT Mono", "Courier New", Courier, monospace;
      font-size: 16px;
      line-height: 1.5;
      width: 100%;
    }

    #terminal *,
    #terminal *::before,
    #terminal *::after {
      box-sizing: inherit;
    }

    .terminal {
      width: 100%;
      height: 500px;
      background: #1e1e1e;
      box-shadow: inset 0 0 1em 0 #181818;
    }

    .screen {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 1em;
      color: #14fdce;
      background: #031e11;
      border-radius: 1em;
      box-shadow: inset 0 0 1em 0 #02160c;
    }

    .innerscreen {
        overflow-y: auto;
        width: 101.5%;
        height: 100%;
        padding: 0 0.75em 0 0;
      scrollbar-color: #0fdab5 transparent !important;
::-webkit-scrollbar-track {
    background: #0fdab5;
}

::-webkit-scrollbar-thumb {
    background-color: transparent;
}
    }

    .screen::before,
    .screen::after {
      content: "";
      position: absolute;
      z-index: 2;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      pointer-events: none;
    }

    .screen::before {
      background: linear-gradient(
        to bottom,
        rgba(30, 30, 30, 0.2),
        rgba(30, 30, 30, 0.2) 50%,
        rgba(30, 30, 30, 0.4) 50%,
        rgba(30, 30, 30, 0.4)
      );
      background-size: 100% 2px;
    }

    .screen::after {
      opacity: 0;
      background: rgba(18, 16, 16, 0.1);
      animation: flicker 0.2s infinite;
    }

    @keyframes flicker {
      0%   { opacity: 0.2; }
      10%  { opacity: 0.4; }
      20%  { opacity: 0.1; }
      30%  { opacity: 0.3; }
      40%  { opacity: 0.5; }
      50%  { opacity: 0.2; }
      60%  { opacity: 0.35; }
      70%  { opacity: 0.15; }
      80%  { opacity: 0.4; }
      90%  { opacity: 0.25; }
      100% { opacity: 0.3; }
    }

@media screen and (max-width: 800px) {
  .wrap {
    display: block !important;
  }
  .col1:before, .col2:before {
    display: none !important;
  }
  .col1,
  .col2,
  .col1 .inner,
  .col2 .inner {
    margin: auto !important;
    display: inline !important;
    text-align: unset !important;
    width: 100% !important;
  }
  .col2 .img {
    display: none !important;
  }
  .img {
  float: unset !important;
  clear: unset !important;
  }
  .imgmob {
    margin: auto;
    width: fit-content;
  }
}

@media (max-width: 1080px) {
    .knight {
        margin: 4% auto !important;
    }
}

@media (max-width: 768px) {
    .knight {
        margin: auto !important;
column-gap: unset;
  row-gap: 1em;
  display: grid;
  width: 100%;
  grid-template-areas:
'header' 
'sidebar' 
'content';
  grid-template-columns: unset;
  overflow: hidden !important;
    }
    .sidebar {
        width: 100%;
        margin-top:9em;
    }
    header {
        display: flex;
        justify-content: center;
    }
    .ayy {
        height: 396px;
        overflow: hidden;
        position: relative;
        right:unset !important;
    }
    .logo {
        position: absolute;
        bottom:-73px !important;
        right:unset !important;
        filter: drop-shadow(6px 4px 1px #0000007e);
    }
    .subtitle {
        position: absolute;
        z-index: 1;
        bottom:-30px !important;
        right:unset !important;
        filter: drop-shadow(0 0 1px #000) drop-shadow(6px 4px 1px #0000007e);
    }
    .map2 {
        filter: drop-shadow(6px 4px 1px #0000007e) drop-shadow(0 0 30px #ff9532be);
    }
    .map {
        position: absolute;
        top:-65px;
        right:unset !important;
        margin-left: -190px;
        animation: spin 60s linear infinite;
    }
    .eye {
        position: absolute;
        top:103px;
        right:unset !important;
        margin-left: -25px;
        z-index: 1;
        filter: drop-shadow(0 0 1px #000000) drop-shadow(0 0 3px #5f2e0b);
    }
    .moon {
        position: absolute;
        top:-65px;
        right:unset !important;
        margin-left: -190px;
        --start: 0deg;
        animation: spin2 50s linear infinite;
    }
    .planet1 {
        position: absolute;
        top:-65px;
        right:unset !important;
        margin-left: -190px;
        --start: 72deg;
        animation: spin2 25s linear infinite;
    }
    .planet2 {
        position: absolute;
        top:-65px;
        right:unset !important;
        margin-left: -190px;
        --start: 144deg;
        animation: spin2 20s linear infinite;
    }
    .planet3 {
        position: absolute;
        top:-65px;
        right:unset !important;
        margin-left: -190px;
        --start: 216deg;
        animation: spin2 30s linear infinite;
    }
    .planet4 {
        position: absolute;
        top:-65px;
        right:unset !important;
        margin-left: -190px;
        --start: 288deg;
        animation: spin2 15s linear infinite;
    }
    .music {
        width: 420px;
        height: 67px;
        background-image: url('/shrines/obscuregames/drownedgod/img/music.gif');
        background-repeat: no-repeat;
        position: absolute;
        bottom: -20px;
        left:unset !important;
        margin-bottom: -129px;
}
.mob {
    display: none;
}
#demo {
    display: none;
}
#whatis table {
    display: none;
}
#archive {
    .ogsite {
        flex-direction: column;
        align-content: center;
        img {
            width: 100%;
        }
    }
iframe {
    display: none;
}
}
[data-target="demo"] {
    display: none;
}
.landing {
    grid-template-columns: auto !important;
    justify-items: center;
    >p {
        margin-top: 0;
    }
}
#children {
    display: flex !important;
    flex-wrap: wrap;
}
#vidcontainer {
    background-size: contain !important;
    background-position: center !important;
    height: unset !important;
    min-height: 200px;
    video {
        width: 100%;
    }
}
.terminal {
    height: unset !important;
}
}