@-webkit-keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	@-webkit-keyframes snowflakes-shake {
		0%,
		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
		50% {
			-webkit-transform: translateX(80px);
			transform: translateX(80px)
		}
	}
	@keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	@keyframes snowflakes-shake {
		0%,
		100% {
			transform: translateX(0)
		}
		50% {
			transform: translateX(80px)
		}
	}
	
	.snowflake {
		position: fixed;
		top: -10%;
		z-index: 9999;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-animation-name: snowflakes-fall, snowflakes-shake;
		-webkit-animation-duration: 10s, 3s;
		-webkit-animation-timing-function: linear, ease-in-out;
		-webkit-animation-iteration-count: infinite, infinite;
		-webkit-animation-play-state: running, running;
		animation-name: snowflakes-fall, snowflakes-shake;
		animation-duration: 10s, 3s;
		animation-timing-function: linear, ease-in-out;
		animation-iteration-count: infinite, infinite;
		animation-play-state: running, running
	}	
	.snowflake:nth-of-type(0) {
		left: 1%;
		-webkit-animation-delay: 0s, 0s;
		animation-delay: 0s, 0s
	}
	.snowflake:nth-of-type(1) {
		left: 10%;
		-webkit-animation-delay: 1s, 1s;
		animation-delay: 1s, 1s
	}
	.snowflake:nth-of-type(2) {
		left: 20%;
		-webkit-animation-delay: 6s, .5s;
		animation-delay: 6s, .5s
	}
	.snowflake:nth-of-type(3) {
		left: 30%;
		-webkit-animation-delay: 4s, 2s;
		animation-delay: 4s, 2s
	}
	.snowflake:nth-of-type(4) {
		left: 40%;
		-webkit-animation-delay: 2s, 2s;
		animation-delay: 2s, 2s
	}	
	.snowflake:nth-of-type(5) {
		left: 50%;
		-webkit-animation-delay: 8s, 3s;
		animation-delay: 8s, 3s
	}
	.snowflake:nth-of-type(6) {
		left: 60%;
		-webkit-animation-delay: 6s, 2s;
		animation-delay: 6s, 2s
	}
	.snowflake:nth-of-type(7) {
		left: 70%;
		-webkit-animation-delay: 2.5s, 1s;
		animation-delay: 2.5s, 1s
	}
	.snowflake:nth-of-type(8) {
		left: 80%;
		-webkit-animation-delay: 1s, 0s;
		animation-delay: 1s, 0s
	}
	.snowflake:nth-of-type(9) {
		left: 90%;
		-webkit-animation-delay: 3s, 1.5s;
		animation-delay: 3s, 1.5s
	}
	.snowflake:nth-of-type(10) {
		left: 25%;
		-webkit-animation-delay: 2s, 0s;
		animation-delay: 2s, 0s
	}
	.snowflake:nth-of-type(11) {
		left: 65%;
		-webkit-animation-delay: 4s, 2.5s;
		animation-delay: 4s, 2.5s
	}

  /* Rest of it */
    body {
  margin: 0;
  padding: 0;
  background-image: radial-gradient(circle,rgba(255, 255, 255, 0.253) 0%, rgba(248, 190, 226, 0.6) 100%), url('/hanami/hanamibg.png');
  background-position: center;
  color: rgb(189, 73, 93);
  font-family: "Comic Neue", "LXGW WenKai Mono TC", Verdana;
  text-align: justify;
  font-size: 1rem;
  height: 100%;
  display: flex;
  justify-content: center; 
  align-items: center; 
  overflow: hidden;
  cursor: url("cursor.png"), auto;
  scrollbar-color: #bb6385 #fcc8ce;
}
/* Headers */
h1 {
  font-family: "Protest Revolution", sans-serif;
  font-size: 5vh;
  color: #bb6385;
  margin: 0;
  text-align: center;
  }
h2 {
  font-family: "Protest Revolution", sans-serif;
  font-size: 2.5vh;
  color: #e690b1;
  margin: 0;
  }
	h4 {
		color: #7c2f4c;
		margin: 0;
		padding: 0;
		text-align: center;
	}
    .container {
        display: flex;
        gap: 2rem;
        width: 70vw;
        height: 80vh;
    }
    .side, .main {
      background-color: #fcc8ce;
        border: 4px solid #bb6385;
        border-radius: 13px;
        box-shadow: 0px -1px 50px 0px #fff8fb inset, 0px -1px 20px 0px rgba(209,97,120,1);
        -webkit-box-shadow: 0px -1px 50px 0px #fff8fb inset, 0px -1px 20px 0px rgba(209,97,120,1);
        -moz-box-shadow: 0px -1px 50px 0px #fff8fb inset,0px -1px 20px 0px rgba(209,97,120,1);
        padding: 1rem;
		flex: 4;
		max-height: 100%;
		overflow: scroll;
		padding-left: 4rem;
		padding-right: 4rem;
    }
    .botimg {
      position: absolute;
      bottom: 2vh;
      left: 44vw;
	  max-width: 100%; /* Image will shrink to fit container but never grow larger than original */
	  height: auto;
	  pointer-events: none;
    }
	.botimgleft {
      position: absolute;
      bottom: 0;
      left: 0;
	  pointer-events: none;
	  transform: scaleX(-1);
    }
	.midtopimg {
	position: absolute;
	top: 2vh;
    left: 45vw;
	transform: scaleX(-1) scaleY(-1);
	}
	.foot {
		position: absolute;
		bottom: 0.5vh;
		left: 30vw;
		padding: 0.25vh;
		background-color: white;
	}
    .topimg {
      position: absolute;
      top: 0;
      right: 0;
	  pointer-events: none;
    }
	.topimgleft {
      position: absolute;
      top: 0;
      left: 0;
    }
	.botimgright {
      position: absolute;
      bottom: 0;
      right: 0;

    }
	details>summary {
	list-style-type: none;
	}
	details>summary::-webkit-details-marker {
	display: none;
	}
	details>summary::before {
	content: '✿';
	}
	details[open]>summary::before {
	content: '❀';
	}
	details {
	border: 2px dotted #bb6385;
	border-radius: 13px;
	padding: 0.25rem;
	text-align: justify;
	font-size: 1.5vh;
	}
	summary {
    font-size: 1.75vh;
    padding: 0;
	text-align: center;
	font-weight: bolder;
}
	details[open]>summary {
	margin-bottom: 0.5rem;
	}

	/* Menu Boxes */
	.grid-container {
	margin: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.5vw;
	}
	
	.card {
	grid-template-columns: auto, auto;
	grid-template-rows: auto, auto;
	}

/* unvisited link */
	a:link {
	color: #5c1a33;
	}
	/* visited link */
	a:visited {
	color: #ec2873;
	}
	/* mouse over link */
	a:hover {
	color: #eb86ad;
	}
	/* selected link */
	a:active {
	color: #bb6385;
	}

/* Bubble yugen */
.bubble {
	position: absolute;
    top: 15rem;
    left: 1rem;
	font-size: 1.5vh;
	background: #fcc8ce;
	border: 2px solid #bb6385;
	width: 17em;
	height: auto;
	background-color: #fcc8ce;
    border-radius: 13px;
    box-shadow: 0px -1px 50px 0px #fff8fb inset, 0px -1px 20px 0px rgba(209,97,120,1);
    -webkit-box-shadow: 0px -1px 50px 0px #fff8fb inset, 0px -1px 20px 0px rgba(209,97,120,1);
    -moz-box-shadow: 0px -1px 50px 0px #fff8fb inset,0px -1px 20px 0px rgba(209,97,120,1);
    padding: 0.5rem;
}

.bubble:after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 1.406em solid transparent;
	border-bottom-color: #bb6385;
	border-top: 0;
	margin-left: -1.406em;
	margin-top: -1.406em;
}

/* Bubble katsu */
.bubble2 {
	position: absolute;
    bottom: 17rem;
    right: 1rem;
	font-size: 1.5vh;
	background: #fcc8ce;
	border: 2px solid #bb6385;
	width: 17em;
	height: auto;
	background-color: #fcc8ce;
    border-radius: 13px;
    box-shadow: 0px -1px 50px 0px #fff8fb inset, 0px -1px 20px 0px rgba(209,97,120,1);
    -webkit-box-shadow: 0px -1px 50px 0px #fff8fb inset, 0px -1px 20px 0px rgba(209,97,120,1);
    -moz-box-shadow: 0px -1px 50px 0px #fff8fb inset,0px -1px 20px 0px rgba(209,97,120,1);
    padding: 0.5rem;
}

.bubble2:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 1.406em solid transparent;
	border-top-color: #bb6385;
	border-bottom: 0;
	margin-left: -1.406em;
	margin-bottom: -1.406em;
}

/* Media Phone */
    @media (max-width: 1400px) {
		.botimgleft, .topimg {
			width: 300px;
			height: auto;
		}
		.botimg, .midtopimg {
			width: 150px;
			height: auto;
		}
	}
/* Media Phone */
    @media (max-width: 700px) {
		body {
			overflow: scroll;
		}
      .container {
        flex-direction: column;
        width: 90vw;
        height: 90vh;
      }
	.main,.side {
		min-height: 500px;
		overflow: scroll;
	}
    .botimg, .topimg, .botimgleft, .botimgright, .topimgleft, .bubble, .bubble2, .midtopimg {
      display: none;
    }
	.foot {
		display: none;
	}
    .boxbox {
        display: inline-block;
    }
    .box {
    display: inline;
  }
    }