/* use the color purple: the color of wisdom and intuitive thinking. */
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cherry+Swash:wght@400;700&display=swap');
::selection {
  background: #b166cc;
  color: white;
  text-shadow: 0 0 6px white;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  border: 1px solid darkviolet;
  background: white;
}
::-webkit-scrollbar-thumb {
  background: white;
  border: 1px solid darkviolet;
}
::-webkit-scrollbar-thumb:hover {
  background: #9146c6;
}
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  max-width: 100vw;
  background-image: url(https://64.media.tumblr.com/3b000b5a91c91a06789670358afcda31/tumblr_inline_n25af3Cia51qhwjx8.png);
  overflow-y: auto;
  font-family: cherry swash, serif;
  letter-spacing: 0.025rem;
  line-height: 150%;
  color: #3c3440;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: newyearnewday, sans-serif;
  min-height: 100%;
  overflow: visible;
}

h1 {
  color: #ecc5ff;
  text-shadow: 1px 1px #3c342a, -1px 1px #3c342a, -1px -1px #3c342a, 1px -1px #3c342a;
  text-align: center;
}
h1::after, h1::before {
  content: url(https://64.media.tumblr.com/454494547e8552b28acb8dd662461c39/tumblr_inline_p8wpnuSgEI1synnum_75sq.gifv);
  margin: 0 10px;
}
h2 {
  color: #b166cc;
}
br {
  content: "";
  display: block;
  margin-top: 10px;
}
.preline {
  white-space: pre-line;
}
.nomargin {
  margin: 0;
}
#mech li::first-line {
  color: darkviolet;
}
#main {
  width: 77vw;
  height: calc(100% - 2em);
  padding: 1em 0;
 
 display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  float: left;
}
#side {
  width: 20vw;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  float: left;
  position: fixed;
  left: calc(100% - 21vw - 5%);
}

#side h2 {
  text-align: center;
}

.cnt {
  background-color: white;
  border: 1px solid darkviolet;
  border-radius: 3px;
  width: calc(80% - (2em * 2));
  margin: 3vh auto;
  padding: 2em;
  text-align: justify;
}
.cnt span {
  color: darkviolet;
}
.cnt:nth-child(1) {
  padding-top: 50px !important;
}
#hw {
  background-color: white;
  margin: 0 auto;
  width: calc(90% - (1.4em * 2));
  min-height: calc(100% - 8vh);
  border: 1px solid darkviolet;
  border-radius: 3px;
  padding: 1em 2em;
  overflow-y: auto;
  white-space: normal;
  padding-top: calc(1em + 110px + 1px + 6vh) !important;
}
.cnt, #hw {
  box-shadow: 8px 8px 2px 	
rgba(143, 0, 255, .25);
}
.pic {
  border: 1px solid darkviolet;
  border-radius: 3px;
  width: 100%;
  height: calc(20vw - 5em);
  background-image: url(https://pbs.twimg.com/media/EnBT4StVoAA6Mja?format=jpg&name=medium);
  background-size: 170%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}
.pic::after {
  content: "";
  z-index: 1;
  background-color: darkviolet;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  mix-blend-mode: color;
  opacity: .6;
  height: 100%;
}
.lost { margin:0px; opacity:1; width:100%; position:fixed; z-index:1000;}
#glow { filter: drop-shadow(0 1px 2px rgba(245,199,222, .5)); }
#flow { filter: drop-shadow(0 -2px 2px rgba(245,199,222, .5)) hue-rotate(310deg); }
  
@media screen and (max-width: 800px) {
 #side {
   display: none;
 }
 #main {
   width: 100vw;
 }
 cnt {
   width: 90%;
 }
}
@media screen and (max-width: 600px) {
    h1::after, h1::before {
    display: none;
  }
}
@media screen and (max-width: 400px) {
  cnt {
    width: 95% !important;
  }
}