html {
  scroll-behavior: smooth;
}

body {
	text-rendering: optimizeLegibility;
    margin: 0;
    overflow: hidden;
    background-image: url('/shrines/obscuregames/img/bg.webp');
    background-size:auto;
}

::selection {
    background-color: #9ba15e !important;
    color: transparent !important;
}

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

* img {
    user-select:none;
}

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

*::-webkit-scrollbar-track {
    background: #9ba15e;
}

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

a {
	cursor: url('/shrines/obscuregames/img/link.gif'), auto;
}

a * {
	cursor: url('/shrines/obscuregames/img/link.gif'), auto;
}

.back {
    position: absolute;
    top:0;
    left:0;
    height: 100vh;
    width: 100%;
    z-index: -10;
}

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

.ivy {
    position: absolute;
    top:-120px;
    filter: hue-rotate(-10deg) contrast(130%) brightness(70%) drop-shadow(-8px 6px 5px #000000ab);
    pointer-events: none;
}

.pipes {
    height: 838px;
    position: absolute;
    top:0;
    pointer-events: none;
    filter: drop-shadow(-8px 6px 5px #000000ab);
}

@keyframes blue-me {
	28%{ background: #202020; }
  	30% { background:rgba(#202020,0.95);}
	33%{ background: #202020; }
	34% { background:rgba(#202020,0.9);}
	35%{ background: #202020; }
}
@keyframes blur {
  0%   { filter: blur(1px); opacity:0.8;}
  50% { filter: blur(1px); opacity:1; }
  100%{ filter: blur(1px); opacity:0.8; }
}
@keyframes flick {
  50% { left:2px; }
  51% { left:0; }
}
@keyframes jump {
  30% { top:10px; }
  31% { top:0; }
}
@keyframes track {

  40% { 	opacity:1; 
	  		top:0; 
	  		left:0;  
	  		transform:scale(1,1);  
	  		transform:skew(0,0);}
  41% { 	opacity:0.8; top:0px; left:-100px; 
	  		transform:scale(1,1.2);  
	  		transform:skew(50deg,0);}
  42% { 	opacity:0.8; 
	  		top:0px; 
	  		left:100px; 
	  		transform:scale(1,1.2);  
	  		transform:skew(-80deg,0);}
  43% { 
	  		opacity:1; 
	  		top:0; 
	  		left:0; 
	  		transform:scale(1,1);  
	  		transform:skew(0,0);}
}
@keyframes appear {
  0%   { filter: blur(5px); opacity: 0.85;}
  50% { filter: blur(3px); opacity: 0.85;}
  100%{ filter: blur(4px); opacity: 0.85;}
}
@keyframes big-jump {
	0% { top:0; }
 	10% { top: -100px; }
	12% { top:0; }
	54% { top:0; }
	55% { top: -300px; }
	56% { top:0; }
	86% { top:0; }
	87% { top: -600px; }
	88% { top:0; }
}
.tv {
    position: absolute;
    width: 302px;
    height: 318px;
    top:505px;
    right:398px;
    border-radius: 56px;
    z-index: -1;
	font-family: 'presstart';
	background: #202020;
    background-image: url('/shrines/obscuregames/img/tv.png');
    background-blend-mode: luminosity;
	overflow: hidden !important;
	animation: blue-me 5ms infinite;
    &:after {   
        box-shadow: inset 0 0 4em rgba(0,0,0,0.5);
        border-radius: 56px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        content: "";
        }
.vhs-message{
	animation: track 5ms infinite;
   position: relative;
	margin: 5.5em 1.25em;
}
h1{
	position: absolute;
    text-align: center;
	font-size: 2.4em;
    line-height: 1.4;
	left: 0;
	filter: blur(3px);
	color: #fff;
	color: #fff;
	text-shadow: 	1px 3px green, 
						-2px -3px red;
}

.vhs-message span{
  	animation: 	blur 30ms infinite, 
					flick 50ms infinite,
					jump 50ms infinite;
		
}
.screen-bottom{
	position: absolute;
	bottom: 0;
	width: 100%;
}

.line{
	width: 100%;
	height: 3px;
	position: relative;
	animation: 	appear 1s infinite, 
					flick 1s infinite,
					big-jump 5ms infinite;
	.white{
		background: white;
		position: relative;
		top:0;
		left: 0;
		height: 4px;
	}
	.red{
		background: red;
		position: relative;
		top:0;
		left: 0;
		height: 1px;
	}
	.green{
		background: green;
		position: relative;
		top:0;
		left: 0;
		height: 1px;
	}
}
}
@font-face {
font-family: 'presstart';
src: url('/fonts/presstart.ttf');
}

.knight {
    width:1192px;
    height: 647px;
    position: absolute;
    top:0;
    display: grid;
    grid-template-areas: 
    'main sidebar';
    grid-template-columns: 1fr auto;
    column-gap: 1.7em;
    z-index: -2;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", "Noto Sans CJK JP", TakaoPGothic, sans-serif;
}

main {
    grid-area: main;
    padding: 0.5em;
    margin: 2em;
  	border-width: 12px;
  	border-style: solid;
  	border-image: url("/shrines/obscuregames/img/bb1.gif") 12 fill round;
    border-image-outset: 12px;
    display: flex;
    flex-direction: row;
    column-gap: 4%;
    .shrine {
        width: 50%;
        height: fit-content;
        .cover {
            width: 100%;
            min-height: 190px;
            background-repeat: no-repeat;
            background-image: url('https://neocities.org/site_screenshots/23/85/howsoonisnow/shrines/obscuregames/drownedgod/index.html.540x405.webp');
            background-size: cover;
            border: 1px dashed #ebe4e1;
        }
        .title {
            padding: 0.75em 1em 1em;
            text-align: center;
            color: #ebe4e1;
        }
    }
    a {
        text-decoration: none;
        color:#ebe4e1;
    &:hover {
        filter: invert(100%) hue-rotate(180deg);
    }
    &:hover .title {
        filter: invert(100%) hue-rotate(180deg);
        text-shadow: -1px -1px 0 rgba(202, 0, 0, 1), 1px 1px 0 rgba(6, 173, 0, 1);
    }
    }
}

.sidebar {
    grid-area: sidebar;
    width: 378px;
    background-color: #cccdd2;
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 100px;
    color:#141b1e;
    padding: 8em 2em 2em 2em;
    text-align: right;
    font-size: 1.1rem;
    text-shadow: -1px -1px 0 rgba(202, 0, 0, 0.2), 1px 1px 0 rgba(6, 173, 0, 0.2);
    display: flex;
    flex-direction: column;
    row-gap: 0;
    nav {
        text-align: right;
        a:hover {
            filter: invert(100%);
        }
    }
}

@media (max-width: 1249px){
    .ivy, .tv, .pipes {
        display: none;
    }
    .knight {
        width: 100%;
        height: unset;
        position: unset;
        grid-template-areas:
        'sidebar'
        'main';
        column-gap: unset;
        row-gap: 1.7em;
        z-index: unset;
        padding: 4%;
        grid-template-columns: unset;
    }
    main {
        margin: unset;
    }
    .sidebar {
        width: 100%;
        padding: 2em;
        border-radius: 0;
        border: 4px ridge #cccdd2;
    }
}

@media (max-width: 768px){
main {
        flex-direction: column;
        column-gap: unset;
        row-gap: 4%;
        .shrine {
            width: 100%;
        }
}
}