@import url('https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
  --heights: calc(100vh - 29vh);
  --transparentpng: drop-shadow(1px 1px #acc8ff) drop-shadow(-1px -1px #acc8ff) drop-shadow(-1px 1px #acc8ff) drop-shadow(1px -1px #acc8ff) hue-rotate(340deg);
}
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: white;
  border: 1px solid deepskyblue;
  border-right: none;
}
::-webkit-scrollbar-thumb:hover {
  background: #ace0ff;
}
::-webkit-scrollbar-track {
  border: 1px solid deepskyblue;
  border-right: none;
  background: #edf8ff;
}
* {
  box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background-image: url(https://64.media.tumblr.com/f12b93ae2df6437a7ca247069663b19b/tumblr_inline_n1t6i9owTB1qfc9y0.png);
}

#wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  padding: 0 2%;
}

#main {
  display: flex;
  flex: 1;
}

#main>article {
  flex: 1;
  order: 1;
}

#main>aside {
  flex: 0 0 30vw;
}

#main>aside {
  order: 2;
}

header,
article,
aside {
  padding: 1em;
  border: 2px solid DeepSkyBlue;
  margin: 1%;
  border-radius: 4px;
  background-color: white;
}

article {
  padding: 0;
}

aside {
  padding: 1.5em 1em;
  display: flex;
   overflow: hidden;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-image: url(https://64.media.tumblr.com/aa3e02466ac9c37feafbba0d7cd2c36f/tumblr_inline_n1t5601vA71qfc9y0.gif);
  background-color: #edfaff;
}

article,
aside {
  height: var(--heights) !important;
}

header {
  height: 22vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url(https://64.media.tumblr.com/44eeee4c88d68537fb7321752fa3be14/tumblr_inline_n1t5e1TrMO1qfc9y0.gif);
  box-shadow: 10px 10px 1px rgba(104, 198, 255, .5);
}

#headwrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#headwrap div {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 1%;
}

#headwrap div img {
  height: 100%;
}
#two {
  flex-direction: column;
}
.nav {
  display: none !important;
  font-family: mali;
  color: deepskyblue;
  text-shadow: 0 0 2px #ace0ff;
}
.nav a {
  margin: 0 5%;
}
.nav a:hover {
  transform: scale(1.1);
}
.nav a, .nav:hover {
  transition: all .5s ease;
}
h1 {
  font-size: calc(50vw/21);
  font-family: yomogi, cursive;
}
.gradient {
   background: -webkit-linear-gradient(white, #a6e6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px DeepSkyBlue) drop-shadow(-1px -1px DeepSkyBlue) drop-shadow(-1px 1px DeepSkyBlue) drop-shadow(1px -1px DeepSkyBlue) drop-shadow(2px 2px white);
}
#events { position: absolute; top: -2.5rem;left: 0;z-index: 2;font-size: 1.5rem;text-align: left; }
h2 {
  font-family: itim;
  color: deepskyblue;
}

p {
  font-family: Mali;
}
.tear-rain {
  width: 100%;
  justify-content: space-around;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: .5% 0;
  flex-flow: row wrap;
  flex-wrap: wrap;
  overflow-x: hidden;
}

#cuties {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  overflow: visible;
  position: relative;
}

#cuties div {
  margin: 0 1%;
  height: 100px;
  max-width: 100%;
}
#kumateru {
  display: flex;
  align-items: center;
  justify-content: center;
}
#kumateru img {
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}
.spark {
  background: white;
  text-align: left;
  border: 1px solid deepskyblue;
  overflow-y: auto;
  padding: 0 10px;
  border-radius: 4px;
  box-shadow: 5px 5px 1px rgba(104, 198, 255, .5);
}

.spark h2 {
  text-align: center;
}

.spark span {
  font-family: grandstander;
  color: deepskyblue;
}

.girls {
  position: relative;
  border: 1px solid deepskyblue;
  text-align: left !important;
  padding: 0 3%;
  background: rgba(255, 255, 255, .9);
  height: 95%;
  width: 65%;
  margin-left: auto;
  border-radius: 4px;
  overflow-y: auto;
  box-shadow: -5px 5px 1px rgba(104, 198, 255, .5);
}
.girls p span {
  color: #0079e0;
}
.girls h2 {
  font-size: 1.2rem;
}

.girls h2::after,
.girls h2::before {
  margin: 0;
}

.girls ul {
  list-style-image: url("https://64.media.tumblr.com/cdc5362b9394f3c4f75a28bd0b96f583/7cf915f60095705b-23/s75x75_c1/d6bea4bfefe3b4df80d69c0a3b61eb33ab8ef735.gifv");
  filter: hue-rotate(20deg);
}
.girls a, .girls a:hover {
  transition: .5s;
}
.girls a:hover {
  color: deepskyblue;
  text-shadow: 1px 2px #ace0ff;
}

li {
  font-family: mali;
  text-align: left;
}
.girls p {
  font-family: chilanka;
}
.encompass {
  overflow: visible;
  width: 100%;
  height: 100%;
  position: relative;
}

.special {
  color: deepskyblue;
}
.filler {
  color: transparent;
}
a {
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.glow {
 filter: drop-shadow(0 0 1px DeepSkyBlue);
}
#one:hover {
  transform: scale(1.1);
}
#one, #one:hover {
    transition: .5s;
}
#usaura::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  max-height: 100%;
  background-image: url(https://i.ibb.co/cQYfKwJ/imageedit-3-7018288084.png);
  background-repeat: no-repeat;
  background-position: left -5rem bottom;
  background-size: auto 100%;
  filter: var(--transparentpng) saturate(1.7);
}
.icing {
  filter: var(--transparentpng);
}
.pulse {
           animation-name: pulse;
        animation-duration: 2s;
        animation-iteration-count: infinite;
}
@keyframes pulse {
        from {
          transform: scale(1);
        }

        50% {
          transform: scale(1.1);
        }

        to {
          transform: scale(1);
        }
      }
      .inside {
            padding: 1em 4em;
      }
      @media screen and (max-width: 1030px) {
        #usaura::before {

}
}
      @media screen and (max-width: 800px) {
aside {
  display: none;
}
.nav {
  display: flex !important;
}
  h1 {
  font-size: calc(50vw/11);
  margin: 4% auto;
}
}
 @media screen and (max-height: 600px) {
  h1 {
  font-size: calc(50vw/12);
  margin: 1% auto;
}
#events {
  top: -1rem;
}
}
/* this is good enough!! if you want full responsiveness then look into landscape mobile and specific screen sizs...but anyway, you're done! you did well for someone who hasn't been doing this for too long!! Keep up the hard work :) or not! you can take a break, you know, Webmaster? You've already done so much...if you're going to bed, goodnight and sweet dreams ♡ if you're not going to bed then you should sleep soon >< */