html {
  scroll-behavior: smooth;
}

body {
    background-image: url('/shrines/obscuregames/sheepraider/img/bg.png');
	background-attachment: fixed;
	background-position: center;
	text-rendering: optimizeLegibility;
    margin: 0;
}

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

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

* img {
    user-select:none;
}

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

*::-webkit-scrollbar-track {
    background: transparent;
}

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

a {
	cursor: url('/shrines/obscuregames/sheepraider/img/link.cur'), auto;
    text-decoration: unset;
    color: rgb(255, 101, 101);
    font-weight: 1000;
    &:hover {
        text-decoration: underline;
        text-decoration-style: wavy;
        text-decoration-color: red;
    }
}

.external-icon {
    fill: #fff;
    filter: drop-shadow(1px 1px 8px #000000c7) drop-shadow(1px 0 #000);
    font-size: 90%;
}

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

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

.foreground {
    width: 1920px;
    height: 932px;
    background-image: url('/shrines/obscuregames/sheepraider/img/foreground.png');
    background-repeat: no-repeat;
    position: fixed;
    bottom: 0;
    filter: drop-shadow(0 0 30px #000);
}

.knight {
    width: 1095px;
    height: 720px;
    position: absolute;
    top:65px;
    left:430px;
    display: grid;
    margin: 1em;
    grid-template-areas:
    'sidenav topnav topnav'
    'sidenav main .'
    'sidenav main .'
    'sidenav main header';
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
        &::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-image);
  background-position: bottom right;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  z-index: -1;
  opacity: 0.8;
    }
}

header {
    grid-area: header;
    position: absolute;
    transform: rotate(3deg) translateY(0);
    right:-50px;
    top:-110px;
    animation: float 3s ease-in-out infinite;
    z-index: 2;
    img {
        max-width: 400px;
        pointer-events: none;
    }
}

@keyframes float {
  0% {
    transform: rotate(3deg) translateY(0);
  }
  50% {
    transform: rotate(3deg) translateY(-10px);
  }
  100% {
    transform: rotate(3deg) translateY(0);
  }
}

.topnav {
    grid-area: topnav;
    display: flex;
    flex-direction: row;
    gap: 4.4em;
    margin-top: 1em;
    justify-content: center;
    .external-icon {
        display: none;
    }
    img {
        max-width: 160px;
        mix-blend-mode: lighten;
    }
}

.sidenav {
    grid-area: sidenav;
    width: 161px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
    .ups {
        transform: scaleY(-1) scaleX(-1);
    }
img.arrow {
  width: auto;
  height: auto;
  mix-blend-mode: lighten;
  max-width: 100%;
  align-self:center;
}
    .samsheep {
        position: absolute;
        max-width: 400px;
        bottom: -130px;
        left: -80px;
        z-index: 2;
        pointer-events: none;
    }
}

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

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

main {
    grid-area: main;
    margin: 1em;
    position: relative;
    padding: 1em;
    color: #fff;
    font-size: 1.16rem;
    letter-spacing: 0.1rem;
    line-height: 1.5rem;
    font-family: 'timesss';
    text-shadow: 1px 1px 8px #000000c7, 1px 1px 0 #000;
    overflow: auto;
    strong.yellow {
        color: #ffd24d;
    }
    .sam {
        float: right;
    }
}

.box2, .box3 {
        background-image: url('/shrines/obscuregames/sheepraider/img/box2.png');
        width: 160px;
        height: 87px;
        padding: 0.6em;
        color: #dedeef;
        font-size: 1.8rem;
        image-rendering: pixelated;
        font-family: 'scrib';
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-blend-mode: lighten;
        position: relative;
        &:hover {
            transform: scale(1.2);
        }
}

.box {
        background-image: url('/shrines/obscuregames/sheepraider/img/box.png');
        width: 161px;
        height: 115px;
        padding: 0.6em;
        color: #dedeef;
        font-size: 1.8rem;
        image-rendering: pixelated;
        font-family: 'scrib';
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-blend-mode: lighten;
        position: relative;
        text {
            position: absolute;
            right: -100px;
            top:50%;
            transform: translateY(-50%);
            color: #ffd24d;
            font-weight: 1000;
            text-shadow: 0 3px 0 #000;
            background-color: #6a6ab3;
            padding: 0 5px 2px;
            display: none;
            z-index: 2;
        }
        .about {
            background-image: url('/shrines/obscuregames/sheepraider/img/sign2.png');
            height: 100%;
            width: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
        .history {
            background-image: url('/shrines/obscuregames/sheepraider/img/history1.png');
            height: 100%;
            width: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            text {
                right: -180px;
            }
        }
        .media {
            background-image: url('/shrines/obscuregames/sheepraider/img/screenshots1.png');
            height: 100%;
            width: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            text {
                right: -103px;
            }
        }
        .download {
            background-image: url('/shrines/obscuregames/sheepraider/img/mail1.png');
            height: 100%;
            width: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            text {
                right: -156px;
            }
        }
        &::after {
  content: "";
  position: absolute;
  width: 161px;
  height: 115px;
  inset: 0;
  background-image: url('/shrines/obscuregames/sheepraider/img/box12.png');
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}
        &:hover {
            text {
                display: block !important;
            }
            &::after{
            animation: fadeflash 0.2s infinite alternate ease-in-out;
            }
        }
    }

@keyframes fadeflash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#about, #history, #media, #download {
    border: 4px ridge #c9c9c9;
    background-color: #5252a5b4;
    height: 100%;
    overflow: auto;
    padding: 1em 1em 5em;
    scrollbar-color: #cecee6 transparent;

*::-webkit-scrollbar-track {
    background: transparent;
}

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

nav {
    grid-area: nav;
    padding-bottom: 1em;
}

main .content {
	display: none;
	opacity: 0;
	transition: opacity 0.3s ease;
    text-align: justify;
}
main .content.active {
	display: block;
	opacity: 1;
}

.sidenav .box.active-tab {
  background-image: url('/shrines/obscuregames/sheepraider/img/box13.png');
  .about {
    background-image: url('/shrines/obscuregames/sheepraider/img/sign3.png');
  }
  .history {
    background-image: url('/shrines/obscuregames/sheepraider/img/history2.png');
  }
  .media {
    background-image: url('/shrines/obscuregames/sheepraider/img/screenshots2.png');
  }
  .download {
    background-image: url('/shrines/obscuregames/sheepraider/img/mail2.png');
  }
  &:after {
    display: none;
  }
}

h1 {
    font-size: 1.8rem;
    margin-top: 0;
}

h2 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

h3 {
    margin-bottom: 0;
}

.title {
    float: left;
    margin-right: 16px;
    width: 245px;
    border-radius: 8px;
    border: 2px solid #fed14d;
}

#simp {
input,button{outline:none;}
a,a:hover,a:visited{color:#ddd;text-decoration:none;}
.flex{display:-webkit-flex;display:flex;}
.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.flex-align{-webkit-align-items:center;align-items:center;}
.w-full{width:100%;}
}

#simp button,#simp input,#simp img{border:0;}
#simp{max-width:560px;font-size:1rem;font-family:"timesss";text-align:initial;line-height:initial;background:#37377370;color:#fff;margin:1em auto auto;border-radius:6px;overflow:hidden;border: 2px solid #ffd24d;}
#simp .simp-album{padding:20px 25px 5px;}
#simp .simp-album .simp-cover{margin-right:20px;}
#simp .simp-album .simp-cover img{max-width:80px;box-shadow:0 0 5px #000;width:100%;margin:0;padding:0;border-radius:6px;display:block;}
#simp .simp-album .simp-title{font-size:120%;font-weight:bold;}
#simp .simp-album .simp-artist{font-size:90%;color:#c7cdec;}
#simp .simp-controls{padding:15px;}
#simp .simp-controls button{font-size:130%;width:32px;height:32px;background:none;color:#ddd;padding:7px;cursor: url('/shrines/obscuregames/sheepraider/img/link.cur'), auto;border:0;border-radius:3px;}
#simp .simp-controls button[disabled]{color:#636469;cursor:initial;}
#simp .simp-controls button:not([disabled]):hover{background:#ffd24d;color:#fff;}
#simp .simp-controls .simp-prev,#simp .simp-controls .simp-next{font-size:100%;}
#simp .simp-controls .simp-tracker,#simp .simp-controls .simp-volume{flex:1;margin-left:10px;position:relative;}
#simp .simp-controls .simp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;}
#simp .simp-controls .simp-loading .simp-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;}
#simp .simp-controls .simp-time,#simp .simp-controls .simp-others{margin-left:10px;}
#simp .simp-controls .simp-volume{max-width:110px;}
#simp .simp-controls .simp-volume .simp-mute{margin-right:5px;}
#simp .simp-controls .simp-others .simp-active{background:#181833;}
#simp .simp-controls .simp-others .simp-shide button{font-size:100%;padding:0;width:24px;height:14px;display:block;}
#simp .simp-controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;}
#simp .simp-controls input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls input[type=range]::-moz-range-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls .simp-load .simp-progress::-webkit-slider-runnable-track{background:#181833;}
#simp .simp-controls .simp-load .simp-progress::-moz-range-track{background:#181833;}
#simp .simp-controls .simp-loading .simp-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);}
#simp .simp-controls .simp-loading .simp-progress::-moz-range-track{background:rgba(255,255,255,.25);}
#simp .simp-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;margin-top:-4px;cursor: url('/shrines/obscuregames/sheepraider/img/link.cur'), auto;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .simp-controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;cursor: url('/shrines/obscuregames/sheepraider/img/link.cur'), auto;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47, 48, 61, 0.2);}
#simp .simp-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;}
#simp .simp-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;}
#simp .simp-hide{max-height:0;}
/* playlist */
#simp ul{margin:5px 0 0;padding:0;list-style:none;}
#simp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor: url('/shrines/obscuregames/sheepraider/img/link.cur'), auto;}
#simp ul li:last-child{padding-bottom:13px;}
#simp ul li:nth-child(odd){background:#6868b1;}
#simp ul li:hover{background:#2f2f5a;}
#simp ul li.simp-active{background:#ffd24d;color:#000;}
#simp ul li .simp-desc{font-size:90%;opacity:.5;margin-left:5px;}
/* playlist scrollbar */
#simp ul{overflow-y:auto;overflow-x:hidden;scrollbar-color:#73797f #2f3841;}
#simp ul::-webkit-scrollbar-track{background-color:#2f3841;}
#simp ul::-webkit-scrollbar{width:6px;background-color:#2f3841;}
#simp ul::-webkit-scrollbar-thumb{background-color:#73797f;}
/* progress animation */
@-webkit-keyframes audio-progress{to{background-position:25px 0;}}
@keyframes audio-progress{to{background-position:25px 0;}}
/* mobile */
@media screen and (max-width:480px) {
#simp .simp-controls .simp-volume,#simp .simp-controls .simp-others{display:none;}
#simp .simp-controls .simp-time{margin-right:10px;}
}
@media screen and (max-width:370px) {
#simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;}
}

.duckstation {
    position: relative;
    &::before {
        position: relative;
        display: inline-block;
        content: "";
        width: 24px;
        height: 24px;
        margin: 0 4px -4px 0;
        background-image: url('/shrines/obscuregames/sheepraider/img/duckstation.png');
    }
}

.usa {
    position: relative;
    &::before {
        position: relative;
        display: inline-block;
        content: "";
        width: 32px;
        height: 18px;
        margin: 0 4px -3px 0;
        background-image: url('/shrines/obscuregames/sheepraider/img/usa.png');
    }
}

.eu {
    position: relative;
    &::before {
        position: relative;
        display: inline-block;
        content: "";
        width: 32px;
        height: 18px;
        margin: 0 4px -3px 0;
        background-image: url('/shrines/obscuregames/sheepraider/img/eu.png');
    }
}

.compare {
    display: grid;
    grid-template-areas:
    'eu us'
    'eu1 us1'
    'eu11 us11'
    'eu2 us2'
    'eu22 us22';
    gap:1em;
    text-align: center;
    margin: auto;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    justify-items: center;
    font-size: 1rem;
    border: 1px solid #cecee6;
    background-color: #cecee663;
    padding: 1em;
    h3 {
        margin: 0;
    }
}

.start {
    width: 70%;
    border: 1px solid #cecee6;
    display: block;
    margin: 1em auto;
}

.abandonware {
    width: 150px;
    float: left;
    margin-top: 8px;
    margin-right: 16px;
    filter: sepia(100%) brightness(140%) hue-rotate(200deg);
}

.eur {    grid-area: eu;}.us {    grid-area: us;}.eu1 {    grid-area: eu1;}.eu2 {    grid-area: eu2;}.us1 {    grid-area: us1;}.us2 {    grid-area: us2;}.eu11 {    grid-area: eu11;}.eu22 {    grid-area: eu22;}.us11 {    grid-area: us11;}.us22 {    grid-area: us22;}

.center {
    text-align: center;
    margin: auto;
    display: flex;
}

.lvl1 {
    background-image: url('/shrines/obscuregames/sheepraider/img/lvl1.jpg');
    background-size: cover;
    border: 2px solid #ffd24d;
    border-radius: 8px;
}

.sheep {
    background-image: url('/shrines/obscuregames/sheepraider/img/sheep.jpg');
    background-size: cover;
    border: 2px solid #ffd24d;
    border-radius: 8px;
    width: 500px;
    height: 357px;
    margin-top: 8px;
}

.lvl8 {
    float: right;
    width: 245px;
    margin: 8px 0px 8px 16px;
    font-size: 1rem;
    text-align: right;
    img {
        width: 245px;
        border-radius: 8px;
        border: 2px solid #ffd24d;
    }
}

.love {
    float: right;
    width: 300px;
    margin: 3px 0px 8px 16px;
    font-size: 1rem;
    text-align: right;
    img {
        width: 300px;
        border-radius: 8px;
        border: 2px solid #ffd24d;
    }
}

.flip {
    transform: scaleX(-1);
}

span.red {
    color: #fdc2ff;
}

.playable {
  position: relative;
  cursor: url('/shrines/obscuregames/sheepraider/img/link.cur'), auto;
  display: inline-block;
  img {
    margin-right: 3px;
    vertical-align: -2px;
  }
    color: rgb(255, 101, 101);
    font-weight: 1000;
    &:hover {
        text-decoration: underline;
        text-decoration-style: wavy;
        text-decoration-color: red;
    }
}

.playable::after {
  content: "";
  opacity: 0;
  margin-left: 6px;
  margin-right: 6px;
  transition: opacity 0.2s;
  color: #fff;
}

.playable.playing::after {
  content: "▶";
  opacity: 1;
}

.speed {
    text-align: center;
    img {
        width: 100%;
    }
}

.cover {
  content: url('/shrines/obscuregames/sheepraider/img/cd.png');
  transition: 0.3s ease;
}

.cover:hover {
  content: url('/shrines/obscuregames/sheepraider/img/cover.jpg');
}

@media (max-width: 768px) {
.foreground {
    width: 100%;
    height: unset;
    background-image: unset;
    position: unset;
    bottom: unset;
    filter: drop-shadow(0 0 30px #000);
}

.knight {
    width: 100%;
    height: unset;
    position: unset;
    top: unset;
    left: unset;
    display: grid;
    margin: unset;
    grid-template-areas:
    'header'
    'topnav'
    'sidenav'
    'main';
    grid-template-columns: auto;
    grid-template-rows: auto;
        &::before {
  display: none;
    }
}
header {
    grid-area: header;
    position: unset;
    right: unset;
    top: unset;
    transform: unset;
    animation: unset;
    margin: 4% auto auto auto;
    padding: 2em;
    z-index: 2;
    img {
        width: 100%;
        max-width: 500px;
        pointer-events: none;
    }
}
.topnav {
    grid-area: topnav;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2em;
    margin-top: 2em;
    justify-content: center;
    div {
        background-color: #6a67b2;
    }
    .external-icon {
        display: none;
    }
    img {
        max-width: 160px;
        mix-blend-mode: lighten;
    }
}

.sidenav {
    grid-area: sidenav;
    width: unset;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
    margin-top: 2em;
    div {
        background-color: #6a67b2;
        &:hover {
                text {
            display: none !important;
        }
        }
    }
    .ups {
        transform: scaleY(-1) scaleX(-1);
    }
img.arrow {
  display: none;
}
}
main {
    grid-area: main;
    margin: 0.5em;
    position: relative;
    padding: 0.5em;
    color: #fff;
    font-size: 1.16rem;
    letter-spacing: 0.1rem;
    line-height: 1.5rem;
    font-family: 'timesss';
    text-shadow: 1px 1px 8px #000000c7, 1px 1px 0 #000;
    overflow: auto;
    background-color: #6a67b2;
    border: 4px dashed #000000c7;
    margin-top: 2em;
    border-radius: 8px;
    img {
        max-width: 100%;
    }
    strong.yellow {
        color: #ffd24d;
    }
    .sam {
        float: right;
    }
}
#about, #history, #media, #download {
    padding: 0.4em;
}
}