html {
  scroll-behavior: smooth;
}

body {
    margin: 0;
    background-image:
        url("/site/polls/img/bg3.gif");
    background-size: contain;
    background-position: top;
    background-repeat: repeat;
    background-attachment: scroll;
    background-blend-mode: overlay;
    text-rendering: optimizeLegibility;
}

::selection {
    background-color: #f0c8cc !important;
    color: #3c002e !important;
}

* {
	box-sizing: border-box;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    scrollbar-color: #1d1d1d #dfdfdf;
	cursor: url("/site/polls/img/cur.cur"), auto;
}

* img {
    user-select:none;
}

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

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

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

a {
	cursor: url('/site/polls/img/link.cur'), auto;
    color: #dfdfdf;
}

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

deity {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.overunder {
    position: fixed;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    filter: drop-shadow(0 0 50px #2b26218f);
}

knight {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin: 4% 4% 4% auto ;
}

.queen {
    padding: 6px 4px;
    border: 2px solid #dfdfdf;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-sizing: border-box;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", "Noto Sans CJK JP", TakaoPGothic, sans-serif;
    background-color: #2b262188;
}

.jester {
    min-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #dfdfdf;
}

h1 {
    font-family: 'afont';
    margin: 1em 0 0 0;
    color: #dfdfdf;
    font-weight: 100;
    text-shadow: 1px 2px 0 #1d1d1d;
    filter: drop-shadow(0 0 2px #1d1d1d);
}

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

.intro {
    min-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #dfdfdf;
}

.inner {
    border: 2px solid #dfdfdf;
    padding: 6px;
    box-sizing: border-box;
    span {
        opacity: 0.3;
    }
    &.two {
        padding: 14px;
    }
    ol {
        margin: auto;
    }
}

.chart-container {
  position: relative;
  width: 45vw;
  height: 22.5vw;
  margin: auto;
}

@media(max-width:767px) {
    .intro, .jester {
        min-width: unset;
    }
    knight {
        margin: unset;
        padding: 1em;
        gap: 2em;
    }
  .chart-container {
    width: 95%;
    height: 47.5vw;
  }
}