html {
  scroll-behavior: smooth;
}

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

::selection {
    background-color: #fbfafb !important;
    color: #485cb6 !important;
}

* {
	box-sizing: border-box;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    scrollbar-color: #010101 #39436e;
	cursor: url("/shrines/alice/img/cur.cur"), auto;
}


* img {
    user-select:none;
}

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

*::-webkit-scrollbar-track {
    background: #39436e;
}

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

a {
	cursor: url('/shrines/alice/img/link.cur'), auto;
  &:hover {
    text-decoration: underline !important ;
    text-decoration-style: wavy !important;
  }
}

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

.knight {
    margin: 4% auto 0 170px;
    display: grid;
    grid-template-areas:
    'main';
    grid-template-columns: auto 1fr;
    gap: 1em;
    width: 1000px;
}

main {
    grid-area: main;
    position: relative;
    min-width: 1024px;
    display: grid;
    grid-template-areas:
    'intro'
    'history'
    'playalice'
    'thoughts'
    'outfits';
    gap: 2em;
    filter: drop-shadow(0 0 30px #000);
    .border {
        position: absolute;
        z-index: 1;
        pointer-events: none;
    }
    figure {
      img {
      width: 100%;
      }
    }
    p {
      margin-top: 0;
      text-shadow: 1px 1px 0 #ffffff56;
    }
    .intro {
    position: relative;
    grid-area: intro;
    height: 790px;
    .queen {
    width: 667px;
    background-color: #c7c3b0;
    background-image: url('/shrines/alice/img/introbg.png');
    background-size: cover;
    background-blend-mode: luminosity;
    background-position: center;
    height: 450px;
    overflow: hidden;
    position: relative;
    top: 167px;
    left: 132px;
    box-shadow: inset 0 0 20px #000000;
    padding: 4.5em 0.5em 4.5em 3.5em;
    letter-spacing: 0.04rem;
    text-align: justify;
    color:#2c2c28;
    span.drawer {
      color: #39426d;
      font-weight: 1000;
    }
    span {
      background-color: #ffffff3b;
    }
    .mad {
        position: absolute;
        top: 27px;
        right: 100px;
        h10 {
  font-family: 'typewriter';
  font-size: 1.3rem;
  background: linear-gradient(to right, #3b392b, #3b392b46);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
        }
    }
    }
    }
    .history {
        grid-area: history;
        height: 630px;
        position: relative;
        margin-left: 8em;
        margin-top: -5em;
        figure img {
  	border-width: 8px;
  	border-style: solid;
  	border-image: url("/shrines/alice/img/b1.gif") 8 fill round;
    filter: drop-shadow(0 0 6px #000000af);
        }
        .caterpillar {
            position: absolute;
            bottom: -200px;
            right: 70px;
            pointer-events: none;
            width: 270px;
            transform-origin: top center;
            animation: swing3 10s ease-in-out infinite;
        }
        .queen {
      width: 625px;
      background-image: url('/shrines/alice/img/aboutbg.png');
      background-size: cover;
      background-position: center;
      height: 452px;
      position: relative;
      top: 107px;
      left: 96px;
      box-shadow: inset 0 0 20px #000000;
      padding: 2em 0 0 0;
      letter-spacing: 0.04rem;
      text-align: justify;
      color:#11090a;
      .external-icon {
        fill: #2c191b;
      }
      .cd {
        width: 40%;
        padding: 0 0.5em;
        filter: drop-shadow(0 0 6px #000000af);
        &:hover {
          animation: spin 1s linear infinite;
        }
      }
        .cd2 {
          position: absolute;
          top:230px;
          left:160px;
          width: 40%;
        }
        .cds {
          position: relative;
          margin-top: -9em;
        }
        .cdcover {
          width: 115%;
          margin-left: -70px;
          mix-blend-mode: darken;
          pointer-events: none;
        }
      a {
        text-decoration: unset;
        font-weight: 1000;
        color: #945a0e;
      }
      span {
        text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #eafff1, 0 0 16px #eafff1;
        background-color: #eafff11a;
      }
      blockquote {
        color: #4e3310;
      }
      .jester {
        height: 85%;
        width: 100%;
        margin: auto;
        padding: 0.5em 1.5em 0 1.5em;
        overflow: auto;
    scrollbar-color: #eafff1 transparent;
*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #eafff1;
}
      }
      h1 {
        text-align: center;
        font-size: 1.6rem;
        font-family: 'typewriter';
        margin-top: 1.05em;
        color:#3d2825;
        font-weight: 1000;
        text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #eafff1, 0 0 16px #eafff1;
      }
      h3 {
        font-size: 1.2rem;
        font-family: 'typewriter';
        margin-top: 0;
        margin-bottom: 0;
        color:#5a423f;
        font-weight: 1000;
        text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #eafff1, 0 0 16px #eafff1;
      }
        }
    }
    .playalice {
        grid-area: playalice;
        margin: auto;
        position: relative;
    .clocks {
        max-width: 250px;
        position: absolute;
        z-index: 2;
        pointer-events: none;
        right: -115px;
        bottom: -100px;
        animation: float 3s ease-in-out infinite;
    }
        .playaliceborder {
            width: 750px;
            height: 910px;
            background-image: url('/shrines/alice/img/octo.png');
            background-repeat: no-repeat;
            .inner {
                position: relative;
                height: 490px;
                width: 365px;
                top:240px;
                left: 187px;
                span.title {
        text-align: center;
        font-size: 1.6rem;
        font-family: 'typewriter';
        margin-top: 1.05em;
        color:#32393c;
        font-weight: 1000;
                }
                a {
                  color: #7b5d57;
                  font-weight: 1000;
                  text-decoration: none;
                  font-style: italic;
                }

            }
.text {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  color: rgb(0, 0, 0);
}

.text p {
  height: 100%;
  font-size: 1rem;
  letter-spacing: 0.04rem;
  line-height: 1.25;
  padding: 0;
  text-align: center;
  span {
    background-color: #ffffffce;
  }
}

.text::before {
  content: "";
  width: 50%;
  height: 100%;
  float: left;
  pointer-events: none;
  shape-outside: polygon(
    0 0,
    98% 0,
    50% 6%,
    23.4% 17.3%,
    6% 32.6%,
    0 50%,
    6% 65.6%,
    23.4% 82.7%,
    50% 94%,
    98% 100%,
    0 100%
  );
  shape-margin: 0%;
}

.text p::before {
  content: "";
  width: 50%;
  height: 100%;
  float: right;
  pointer-events: none;
  shape-outside: polygon(
    2% 0%,
    100% 0%,
    100% 100%,
    2% 100%,
    50% 94%,
    76.6% 82.7%,
    94% 65.6%,
    100% 50%,
    94% 32.6%,
    76.6% 17.3%,
    50% 6%
  );
  shape-margin: 0%;
}
        }
    }
    .thoughts {
        grid-area: thoughts;
        margin: 2em auto 7em 10em;
        position: relative;
        .thorns {
            position: absolute;
            z-index: 2;
            bottom: 270px;
            left: -420px;
            pointer-events: none;
        }
        .queen {
      width: 605px;
      height: 425px;
      position: relative;
      top: 65px;
      left: 79px;
      background-image: url('/shrines/alice/img/bsd.png');
      background-size: cover;
      background-position: center;
      box-shadow: inset 0 0 20px #000;
      padding: 1em 0.3em 1em;
      letter-spacing: 0.04rem;
      text-align: center;
      color:#1f180e;
      .llogo {
        text-align: center;
        img {
        width: 270px;
        filter: drop-shadow(1px 1px 0 #000000b9);
        margin: 0.5em 0;
        }
      }
      hr {
        border-color: #696353;
        border-width: 2px;
      }
      h1 {
        font-size: 1.6rem;
        font-family: 'typewriter';
        color:#831100;
        margin: 0 auto auto auto;
        background-color: #fff9eac4;
        padding: 0 0.15em;
        margin-bottom: 0.5em;
        display: inline;
        font-weight: 1000;
        text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #fffaea, 0 0 16px #fffaea;
      }
      .inner {
        margin: 2% 0 auto auto;
        overflow: auto;
        text-align: justify;
        height: 98%;
        padding: 0 0.75em 3em 0.75em;
    scrollbar-color: #656158 transparent;
*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #656158;
}
      }
      blockquote {
        color: #495930;
      }
        figure img {
  	border-width: 8px;
  	border-style: solid;
  	border-image: url("/shrines/alice/img/b1.png") 8 fill round;
    filter: drop-shadow(0 0 6px #000000af);
        }
      a {
        text-decoration: unset;
        font-weight: 1000;
        color: #940e0e;
      }
      span {
        text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #fffaea, 0 0 16px #fffaea;
        background-color: #fff9eac4;
        font-weight: 100;
        padding: 0 0.15em;
      }
      h3 {
        font-size: 1.2rem;
        font-family: 'typewriter';
        margin-top: 0;
        margin-bottom: 0;
        color:#3b6e1a;
        background-color: #fff9eac4;
        font-weight: 1000;
        text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #fffaea, 0 0 16px #fffaea;
        display: inline;
        padding: 0 0.15em;
      }
      h4 {
        font-size: 1.1rem;
        font-family: 'typewriter';
        margin-bottom: 0;
        padding: 0 0.15em;
        display: inline;
        margin-top: 0;
        background-color: #fff9eac4;
        font-weight: 1000;
        color: #1f180e;
        text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #fffaea, 0 0 16px #fffaea;
      }
      ::marker {
        color:#1d4106;
        font-size: 1.1rem;
      }
      .border {
      position: absolute;
      pointer-events: none;
      }
        }
        .rabbit {
            position: absolute;
            bottom: -140px;
            right: -260px;
            pointer-events: none;
            width: 170px;
            z-index: 0;
            transform: scaleX(-1) rotate(-15deg);
        }
        .mock {
            position: absolute;
            bottom: -160px;
            left: -20px;
            pointer-events: none;
            width: 170px;
            z-index: 1;
        }
    }
    .outfits {
        grid-area: outfits;
        height: 1450px;
        position: relative;
        .cards {
            position: absolute;
            z-index: 2;
            top: -30px;
            left: 35px;
            pointer-events: none;
        }
        .note {
            position: absolute;
            z-index: 1;
            top: 50px;
            left: 585px;
            width: 219px;
            height: 221px;
            display: flex;
            justify-content: center;
            text-align: center;
            align-items: center;
            transform: rotate(4deg);
            background-image: url('/shrines/alice/img/note.png');
            padding: 1em;
            font-size: 1.1rem;
            text-shadow: 1px 1px 0 #effbef;
    &:hover {
        transform: rotate(6deg);
    }
            > div {
                overflow: auto;
                height: 70%;
                filter: drop-shadow(0 0 10px #effbef);
    scrollbar-color: #828455 transparent;
*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #828455;
}
            }
        }
        .path {
            position: absolute;
            left: -220px;
            width: 1400px;
            z-index: -1;
            bottom: -16px;
        }
        .portal {
            position: absolute;
            bottom: 425px;
            left:395px;
            z-index: -1;
.sprite-container {
  width: 400px;
  height: 361px;
  background-image: url('/shrines/alice/img/portal.webp');
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
        }
        .flower {
            position: absolute;
            bottom: 170px;
            left:-20px;
            z-index: -1;
        }
        .chessalice {
            position: absolute;
            bottom: 30px;
            left:560px;
            z-index: 0;
            width: 500px;
        }
        .outfitsinner {
    position: absolute;
    margin-left: -20em;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1350px;
	min-height: 100vh;
	overflow: hidden;
        }
    }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes zoomInOut {
    0%   { transform: scale(var(--min)); }
    50%  { transform: scale(var(--max)); }
    100% { transform: scale(var(--min)); }
}

nav {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 513px;
  height: 492px;
  background-image: url('/shrines/alice/img/nav.png');
  background-repeat: no-repeat;
  transition: transform 0.4s ease;
  transform: translateY(-50%) translateX(calc(513px - 100px));
  overflow: hidden;
  z-index: 100;
  a {
    text-decoration: none;
    &:hover {
        filter: invert(100%);
    }
  }
  .external-icon {
    display: none;
  }
  .inner {
position: relative;
    left: 80px;
    display: grid;
    grid-template-areas:
'this normal    otherlink1' 
'this weapons otherlink2' 
'this weapons otherlink3' 
'this weapons otherlink4';
    width: 430px;
    top: 1.5em;
    height: 445px;
    gap: 1.3em;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto auto 1fr;
    button {
        background-color: unset;
        border: unset;
        padding: unset;
        position: absolute;
    }
    h4 {
        margin: 0;
        text-align: center;
        color: #411706;
        font-family: Georgia, 'Times New Roman', Times, serif;
        text-transform: uppercase;
        font-weight: 100;
        line-height: 1rem;
        text-shadow: 0 0 10px #fff;
    }
    .this, .otherlink1, .otherlink2, .otherlink3, .otherlink4 {
        img {
        filter: drop-shadow(1px 1px 0 #000) drop-shadow(0 0 6px #000);
        }
    }
  .this {
    grid-area: this;
    width: 103px;
    display: grid;
    grid-template-rows: 50px repeat(5, 1fr);
    align-items: center;
    a {
        margin: auto;
    }
    img {
        margin: auto;
    }
  }
  .normal {
    grid-area: normal;
    width: 105px;
    height: 80px;
    display: grid;
    grid-template-rows: 50px 1fr;
    align-items: center;
    position: relative;
    .curs {
    img {
        &:hover {
            filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #fff);
            cursor: url('/shrines/alice/img/link.cur'), auto;
        }
    }
        position: absolute;
        top: 45px;
        left: 30px;
        img {
            transform: rotate(-10deg);
        }
    }
  }
  .weapons {
    grid-area: weapons;
    width: 105px;
    display: grid;
    grid-template-rows: 50px 1fr;
    align-items: center;
    margin-top: -20px;
    position: relative;
    img {
        filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 4px #000);
        &:hover {
            filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #fff);
            cursor: url('/shrines/alice/img/link.cur'), auto;
        }
    }
    .blade {
        top:85px;
        right: 0;
        z-index: 3;
        img {
            height: 100px;
            transform: rotate(-9deg);
        }
    }
    .umbrella {
        top: 40px;
        left: 5px;
        z-index: 1;
        img {
            width: 110px;
            transform: scaleX(-1) rotate(15deg);
        }
    }
    .teapot {
        top: 180px;
        right: 0;
        z-index: 3;
        img {
            width: 80px;
        }
    }
    .hobbyhorse {
        top: 100px;
        z-index: 2;
        img {
            height: 130px;
            transform: rotate(-14deg);
        }
    }
    .peppergrinder {
        top: 275px;
        left: -20px;
        img {
            width: 100px;
            transform: scaleX(-1) rotate(-85deg);
        }
    }
    .bomb {
        top: 265px;
        right: 5px;
        img {
            width: 40px;
        }
    }

  }
  .otherlink1 {
    grid-area: otherlink1;
    width: 108px;
    display: grid;
    grid-template-rows: 50px 1fr;
    align-items: center;
    height: 100px;
  }
  .otherlink2 {
    grid-area: otherlink2;
    width: 108px;
    display: grid;
    grid-template-rows: 50px 1fr;
    align-items: center;
    height: 95px;
  }
  .otherlink3 {
    grid-area: otherlink3;
    width: 108px;
    display: grid;
    grid-template-rows: 50px 1fr;
    align-items: center;
    height: 95px;
  }
  .otherlink4 {
    grid-area: otherlink4;
    width: 108px;
    display: grid;
    grid-template-rows: 50px 1fr;
    align-items: center;
    height: 100px;
  }
  }
  &:hover {
  transform: translateY(-50%) translateX(0);
}
&.hover {
  transform: translateY(-50%) translateX(0);
}
}

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

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

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

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

    .alice {
        max-width: 500px;
        filter: drop-shadow(0 0 20px #161616);
        position: fixed;
        z-index: 10;
        pointer-events: none;
        left: -65px;
    }
    .watch {
        position: fixed;
        filter: drop-shadow(0 0 20px #161616);
        pointer-events: none;
        top:0;
        transform-origin: top center;
        &.one {
            left: 1000px;
            max-width: 110px;
            z-index: 11;
            animation: swing1 10s ease-in-out infinite;
        }
        &.two {
            left: 1030px;
            max-width: 158px;
            z-index: 10;
            animation: swing2 15s ease-in-out infinite;
        }
    }
    .logo {
        position: absolute;
        max-width: 500px;
        right: 445px;
        bottom:0px;
        z-index: 20;
        pointer-events: none;
    }
    .cat {
        position: absolute;
        max-width: 100px;
        left: 330px;
        top:-37px;
        z-index: 1;
    }

@keyframes swing1 {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
  100% { transform: rotate(0deg); }
}

@keyframes swing2 {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
  100% { transform: rotate(0deg); }
}

@keyframes swing3 {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

.needle {
  mix-blend-mode: darken;
  width: 100px;
}

.left {
  float:left;
  margin-right: 8px;
}

.right {
  float:right;
  margin-left: 8px;
}

.polaroid {
    position: absolute;
    right: 0px;
    bottom: 0;
    transform: rotate(5deg);
    z-index: 1;
    &:hover {
        transform: rotate(2deg);
    }
    .pic {
        background-image: url('/shrines/alice/img/polaroid.png');
        width: 274px;
        height: 329px;
        position: relative;
        .innerpola {
            width: 224px;
            height: 233px;
            position: absolute;
            top:22px;
            left:25px;
            mix-blend-mode: lighten;
            overflow: hidden;
            .polacorn {
                position: absolute;
                top:-18px;
                left: -20px;
                z-index: 1;
            }
            video {
                height: 100%;
                margin-left: -100px;
                filter: brightness(80%) sepia(50%);
            }
        }
    }
}
.smoke-group {
  width: 100px;
  height: 200px;
  position: relative;
  margin-left: -30px;
  margin-bottom: -55px;
  z-index: 2;
}
@keyframes smoke1 {
  0% { transform: scale(0.2); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: scale(3) translate(6px, -36px); opacity: 0; }
}
@keyframes smoke2 {
  0% { transform: scale(0.2); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: scale(3) translate(-8px, -50px); opacity: 0; }
}
@keyframes smoke3 {
  0% { transform: scale(0.2); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: scale(3) translate(-1px, -41px); opacity: 0; }
}
@keyframes smoke4 {
  0% { transform: scale(0.2); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: scale(3) translate(0px, -41px); opacity: 0; }
}
@keyframes smoke5 {
  0% { transform: scale(0.2); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: scale(3) translate(-4px, -42px); opacity: 0; }
}
.smoke {
  position: absolute;
  bottom: 0;
  left: calc(50% - 7.5px);
  width: 15px;
  height: 15px;
  background-color: rgb(0, 0, 0);
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0;
}
.smoke:nth-child(1)  { animation: smoke3 2s ease-out 0.4s infinite; }
.smoke:nth-child(2)  { animation: smoke2 3s ease-out 0.8s infinite; }
.smoke:nth-child(3)  { animation: smoke4 5s ease-out 1.2s infinite; }
.smoke:nth-child(4)  { animation: smoke2 5s ease-out 1.6s infinite; }
.smoke:nth-child(5)  { animation: smoke3 2s ease-out 2s infinite; }
.smoke:nth-child(6)  { animation: smoke3 4s ease-out 2.4s infinite; }
.smoke:nth-child(7)  { animation: smoke1 2s ease-out 2.8s infinite; }
.smoke:nth-child(8)  { animation: smoke1 5s ease-out 3.2s infinite; }
.smoke:nth-child(9)  { animation: smoke5 5s ease-out 3.6s infinite; }
.smoke:nth-child(10) { animation: smoke4 2s ease-out 4s infinite; }
.smoke:nth-child(11) { animation: smoke5 3s ease-out 4.4s infinite; }
.smoke:nth-child(12) { animation: smoke4 2s ease-out 4.8s infinite; }
.smoke:nth-child(13) { animation: smoke5 4s ease-out 5.2s infinite; }
.smoke:nth-child(14) { animation: smoke2 4s ease-out 5.6s infinite; }
.smoke:nth-child(15) { animation: smoke5 4s ease-out 6s infinite; }
.smoke:nth-child(16) { animation: smoke3 3s ease-out 6.4s infinite; }
.smoke:nth-child(17) { animation: smoke5 4s ease-out 6.8s infinite; }
.smoke:nth-child(18) { animation: smoke1 4s ease-out 7.2s infinite; }
.smoke:nth-child(19) { animation: smoke1 2s ease-out 7.6s infinite; }
.smoke:nth-child(20) { animation: smoke4 3s ease-out 8s infinite; }

.carousel-content,
.carousel-content * {
    cursor: grab !important;
}

.carousel-content:active,
.carousel-content:active * {
    cursor: grabbing !important;
}

.carousel {
  width: 700px;
  padding: 10px;
  transform: scale(0.8) rotate(-10deg);
}

.carousel-content {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  gap: 16px;
}

.card {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  min-width: 260px;
  padding: 32px 16px 16px;
  background-color: #faf2ef;
  background-image: url("/shrines/alice/img/grunge.jpg");
  background-position: center;
  background-blend-mode: luminosity;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 2px 4px #0007;
  position: relative;
  font-family: 'wobble';
 h2 {
  font-weight: 100;
  font-size: 1.6rem;
}
}

.suit {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: 'card';
  font-size: 2rem;
  text-align: center;
  &.flip {
  top: unset;
  bottom: 10px;
  left: unset;
  right: 10px;
  transform: rotate(180deg);
}
}

.suit.red {
  color: rgb(184, 24, 24);
  &.other {
  font-size: 2.5rem;
  margin-top: -10px;
  margin-bottom: -10px;
}
}

.card-photo {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.photo-wrapper {
  position: relative;
  width: 85%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #5a5a5a4b;
  background-image: url('/img/roses.gif');
  background-blend-mode: luminosity;
  background-position: center;
  border-radius: 50%;
  z-index: 1;
  &.redsuit-bg {
  background-color: #60303a4b;
}
}

.filtered-img {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  height: 125%;
  pointer-events: none;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(4px 4px 1px rgb(255, 255, 255)) drop-shadow(0px 0px 5px rgb(255, 255, 255));
}

.loader {
  position: absolute;
  height: 1100px;
  width: 1100px;
  display: flex;
  top:1450px;
  left: 120px;
  z-index: -1;
  justify-content: center;
  align-items: center;
  transform: rotate(calc(90deg * var(--r)));
  animation: animate 35s linear infinite;
}

.loader span {
  position: absolute;
  width: 1000px;
  transform: rotate(calc(18deg * var(--i)));
}

.loader span::before {
  content: "";
  position: absolute;
  left: calc(12px * var(--i));
  height: calc(0.5px * var(--i));
  width: calc(0.5px * var(--i));
  border-radius: 50%;
  background: #fdfeffa6;
  box-shadow: 0 0 10px #9f9fc1, 0 0 20px #9f9fc1, 0 0 40px #9f9fc1, 0 0 60px #9f9fc1,
    0 0 80px #9f9fc1, 0 0 100px #9f9fc1;
}

@keyframes animate {
  0% {
    transform: rotate(calc(0deg * var(--r)));
  }

  100% {
    transform: rotate(calc(360deg * var(--r)));
  }
}

@media (max-width: 768px) {
  body {
    padding: 1em;
  }
  .knight {
    margin: 4% auto auto auto;
    display: unset;
}
  main {
    grid-area: main;
    position: relative;
    min-width: unset;
    display: grid;
    grid-template-areas:
    'intro'
    'history'
    'playalice'
    'thoughts';
    gap: 2em;
    min-width: unset;
    filter: drop-shadow(0 0 30px #000);
    text-align: center;
  }
  nav, .alice, .watch, .cat, .polaroid, .caterpillar, .clocks, .thorns, .rabbit, .mock, .outfits, .loader, .cds {
    display: none !important;
  }
  .logo {
    position: relative;
    right: unset !important;
    width: 100%;
    bottom: unset !important;
    margin: 2.5em auto auto;
  }
  .intro {
    height: unset !important;
    .border {
      display: none;
    }
    .queen {
      width: 100% !important;
      background-image: unset !important;
      top: unset !important;
      left: unset !important;
      height: unset !important;
      padding: 1.5em !important;
      .mad {
        display: none;
      }
    }
  }
  .history {
    height: unset !important;
    margin-left: unset !important;
    margin-top: unset !important;
    .border {
      display: none;
    }
    .queen {
      border: 1px dashed #e8fffb;
      background-image: unset !important;
      background-color: #d9e0df;
      width: 100% !important;
      height: unset !important;
      top: unset !important;
      left: unset !important;
    }
  }
  .playalice {
    height: unset !important;
    margin-left: unset !important;
    margin-top: unset !important;
    .border {
      display: none;
    }
    .playaliceborder {
      width: 100% !important;
      height: unset !important;
      background-image: unset !important;
      background-color: #abb5da;
      border: 1px dashed #e8fffb;
      padding: 1em;
      .inner {
        top: unset !important;
        left: unset !important;
        height: unset !important;
        width: 100% !important;
        .text {
          &::before {
            display: none !important;
          }
          p {
            &:before {
              display: none !important;
            }
          }
        }
      }
    }
    .queen {
      border: 1px dashed #e8fffb;
      background-image: unset !important;
      background-color: #b1c2bf;
      width: 100% !important;
      height: unset !important;
      top: unset !important;
      left: unset !important;
    }
  }
  .thoughts {
    height: unset !important;
    margin-left: unset !important;
    margin-top: unset !important;
    margin-bottom: unset !important;
    .border {
      display: none;
    }
    .queen {
      border: 1px dashed #e8fffb;
      background-image: unset !important;
      background-color: #b1c2bf;
      width: 100% !important;
      height: unset !important;
      top: unset !important;
      left: unset !important;
      .inner {
        padding: 1.5em !important;
      }
    }
  }
}