html {
  scroll-behavior: smooth;
}

body {
    background-image: url('/site/doodlegallery/img/bg.gif');
    background-repeat: repeat;
    background-position: fixed;
	background-attachment: fixed;
	background-position: center;
	text-rendering: optimizeLegibility;
    &::before {
        animation: scanlines 8s steps(10) infinite;
        background-image: url(/site/doodlegallery/img/scanlines.gif);
        content: "";
        height: 300%;
        left: -50%;
        opacity: .1;
        position: fixed;
        top: -110%;
        width: 300%;
        pointer-events: none;
        z-index: 1;
    }
}

@keyframes scanlines {
 0%, 100% { transform:translate(0, 0) }
 10% { transform:translate(-5%, -10%) }
 20% { transform:translate(-15%, 5%) }
 30% { transform:translate(7%, -25%) }
 40% { transform:translate(-5%, 25%) }
 50% { transform:translate(-15%, 10%) }
 60% { transform:translate(15%, 0%) }
 70% { transform:translate(0%, 15%) }
 80% { transform:translate(3%, 35%) }
 90% { transform:translate(-10%, 10%) }
}

::selection {
    background-color: #f8f1f8 !important;
    color: #ce4828 !important;
}

* {
	box-sizing: border-box;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    scrollbar-color: #3d13dd #fbff00;
	cursor: url("/site/doodlegallery/img/cur.gif"), auto;
}

* img {
    user-select:none;
}

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

*::-webkit-scrollbar-track {
    background: #3d13dd;
}

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

a {
	cursor: url('/site/doodlegallery/img/smile.gif'), auto;
}

a * {
	cursor: url('/site/doodlegallery/img/smile.gif'), auto;
}

.arm {
    position: fixed;
    right:-210px;
    top:0;
    background-image: url('/site/doodlegallery/img/arm.png');
    width:740px;
    height:328px;
    z-index: 3;
    filter: drop-shadow(0 0 15px rgba(248, 248, 248,0.5));
}

.knight {
    position: relative;
    max-width: 1200px;
    min-height: 1000px;
    margin: 3% auto 6% 7%;
    background-color: #decf004b;
    border-radius: 10px;
    background-position: top left;
    box-shadow: 0 0 30px rgba(228, 214, 209, 0.4);
    z-index: 2;
    padding:3%;
        &::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: inherit;
    filter: blur(3px) grayscale(70%);
    z-index: -1;
    }
}

.king {
    border-width: 40px; 
    border-style: solid;
    border-image: url("/site/doodlegallery/img/border.png") 40 fill round;
    border-image-outset: 28px;
    background-color: #e8eaf79f;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 20px;
}

.queen {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        'header'
        'nav'
        'content';
    padding: 3%;
    margin:-40px;
}

.queen > .header {
    grid-area: header;
    margin: 0.3em auto auto auto;
    font-family: 'doodle';
    font-size: 5rem;
    line-height: 6rem;
    color:#211a28;
    filter: drop-shadow(0 0 8px #fff);
    text-shadow: 1px 1px 0 #fff;
    &:hover {
        letter-spacing: 0.7rem;
        transform: rotate(-2deg);
        color:#fbff00;
        -webkit-text-stroke: 2px #211a28;
    }
}

.queen > .nav {
    grid-area: nav;
    margin: 2em auto 0.5em auto;
    width:100%;
    font-family: 'wobble';
    font-size: 1.2rem;
    letter-spacing: 1px;
    filter: drop-shadow(0 0 2px #fff);
    text-shadow: 1px 1px 0 #ffffff8a;
    text-align: center;
    a {
    color: #6110b3;
    text-decoration: none;
    text-shadow: 1px 1px 0 #d23a0b80;
        &:hover{
            letter-spacing: 0.2rem;
            color:#827644;
        &::before {
            position: relative;
            content:"➤";
            color:#fbff00;
            font-size: 1rem;
            vertical-align: 1px;
            -webkit-text-stroke: 1px #211a28;
        }
        }
        &::after {
            position: relative;
            content:" / ";
            color:#211a28;
        }
    }
}

.queen > .content {
    grid-area: content;
    margin: 0.4em auto auto;
    border-radius: 2px;
    padding: 1em;
    color:#211a28;
    border: 1px dashed #fff;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 #fff;
    background-color: #bed2ded7;
    line-height: 1.3rem;
    min-height: 600px;
    min-width: 100%;
    span {
        background-color: #ffffffdc;
        padding: 0 2px;
    }
}

#images-container {
  margin: 2em 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 317px;
  perspective: 400px;
  &:hover {
    z-index: 2;
  }
}

.image {
  width: 100%;
  height: auto;
	border-width: 22px;
    border-style: solid;
    border-image: url("/site/doodlegallery/img/frame.gif") 22 fill round;
  display: block;
  box-shadow: 4px 4px 3px #3f285970;
  &:hover {
    position: absolute;
    top:-3em;
    width: 450px;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 15px #000);
    box-shadow: unset;
  }
}

.image-date {
  font-size: 0.8rem;
  margin-top: 6px;
  color: #211a28;
  text-align: center;
  background-color: antiquewhite;
  padding: 3px 8px;
  font-family: monospace;
  border: 1px dashed #211a28d0;
  box-shadow: 3px 3px 0 #3f2859;
}

.glow {
  position: absolute;
  top: -4em;
  left: -6em;
  width: 160%;
  height: 140%;
  pointer-events: none;
  z-index: 1;
  border-radius: 8px;
  filter: blur(12px);
  transition: background-image 0.2s ease;
  overflow: hidden;
}

.message {
    position: absolute;
    right:510px;
    margin-top:-63px;
    color:#ff5100;
    transform: rotate(-4deg);
    font-weight: 1000;
    background-color: #0e0016d2;
    padding: 1px 2px;
    font-family: monospace;
    text-shadow: 1px 1px 0 #67dc4dd3;
}

@media (max-width:1919px) {
    .message {
        display: none;
    }
}

@media (max-width: 1570px) {
    .arm {
        display: none;
    }
}

@media (max-width: 1415px) {
    .knight {
        margin: 3% auto 6% auto;
    }
}

@media (max-width: 768px) {
    #images-container {
        overflow: hidden;
        pointer-events: none;
    }
    .knight {
        margin: 3em auto;
        &::before {
            display: none;
        }
    }
    .queen > .header {
        font-size: 4rem;
        text-align: center;
    }
    .queen > .nav {
        margin:1em auto 0.5em;
        text-align: center;
    }
    .queen {
        padding: 0.8em;
    }
}

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

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