@font-face {
	font-family: "dinkiebitmap";
	src: url(assets/DinkieBitmap9px.woff);
}

:root{
	--windowScale: 0.25;
	--pixMult: calc(var(--windowScale) * 0.25vw + var(--windowScale) * 0.75vh)
}

body{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	margin: 0px;

	font-family: dinkiebitmap;
	background-color: black;
	color: #4d23cf;
}

img.sharp {


	/*nearest neighbor upscale to keep the crisp pixel art*/
	-ms-interpolation-mode: nearest-neighbor;
	/* Firefox */
	image-rendering: crisp-edges;
	/* Chromium + Safari */
	image-rendering: pixelated;
}

div.window {

	/*nearest neighbor upscale to keep the crisp pixel art*/
	-ms-interpolation-mode: nearest-neighbor;
	/* Firefox */
	image-rendering: crisp-edges;
	/* Chromium + Safari */
	image-rendering: pixelated;


	/*fill screen*/
	width: 100vw;
	height: 100vh;

}

div.windowSlice {
	display: flex;
	position: static;
}

img.ame {

	/* IE, only works on <img> tags */
	-ms-interpolation-mode: nearest-neighbor;
	/* Chromium + Safari */
	image-rendering: pixelated;
	/* Firefox */
	image-rendering: crisp-edges;


}

div.mainContentDiv{
	height: calc(100vh - 60 * var(--pixMult)); 
	width: calc(100vw - 16 * var(--pixMult)); 
	position: relative;
	overflow: hidden; 
}

div.windoseWindow{
	height: calc(100vh - 60 * var(--pixMult)); 
	width: calc(100vw - 16 * var(--pixMult)); 
	position: absolute; 
}



/*odekake stuff*/

@keyframes odekakeGroundAni {
	from{
		background-position: 0% 0%;
	}

	to{
		background-position: 100% 0%;
	}
}

@keyframes odekakeScrollAni {
	from{
		left: -100%;
	}
	to{
		left: 200%;
	}
	
}

div.odekakeGround{
	background-image: url(assets/odekake/odekake_ground.png);
	width: 200vw;
	height: 11.8518518519vw;
	background-repeat: repeat-x;
	background-size: contain;
	
	z-index: -10;
	position: absolute;
	bottom: 0px;

	animation-name: odekakeGroundAni;
	animation-duration: 2.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

img.odekakeBackgroundElement{
	position: absolute;
	bottom: 11.8518518519vw;
	animation-name: odekakeScrollAni;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	image-rendering: optimizeQuality; /*blurs the pixel art, which we use to emulate depth of field*/
}

img.odekakeForegroundElement{
	position: absolute;
	bottom: 0;
	animation-name: odekakeScrollAni;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}



#jine{
	display: flex;
}

div.jineStickerTray{
	display: grid;
	position: relative;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	overflow-x: scroll;
}

img.jineSticker{
	display: inline;
	opacity: 0.5;
}

img.jineSticker:hover{
	opacity: 1.0;
}

div.jineTextWindow{
	display: flex;
	position: relative;
	flex-direction: column;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	overflow: hidden;
	padding: calc(4 * var(--pixMult));
}

div.jineTextBubbleDiv{
	margin: calc(4 * var(--pixMult));
	display: flex;
}

div.jineTextBubble{
	background-clip: padding-box;
	border: calc(8 * var(--pixMult)) solid transparent;
	border-image: url(assets/jine/JINE_date_cce4fc.png);
	border-image-slice: 7;
	background-color: #cce4fc;
	font-size: calc(16 * var(--pixMult));
}

img.jineTextSticker{
	width: calc(96 * var(--pixMult));
	height: calc(96 * var(--pixMult));
	float: right;
	image-rendering: pixelated;
}

img.jinePfp{
	width: calc(28 * var(--pixMult));
	height: calc(28 * var(--pixMult));
	flex-grow: 0;
	flex-shrink: 0;
	padding-right: calc(8 * var(--pixMult));
}


@media (min-aspect-ratio: 1) {

	#jine{
		flex-direction: row;
	}

	div.jineStickerTray {
		grid-auto-flow: column;
		grid-template-rows: auto auto auto auto;
		width: auto;
		height: 100%;
		left: 0%;
		overflow-x: hidden;
	}

	img.jineSticker{
		height: 100%;
	}

	div.jineTextWindow{
		
	}
}

@media (max-aspect-ratio: 1) {
	#jine{
		flex-direction: column;
	}

	div.jineStickerTray {
		grid-auto-flow: row;
		grid-template-columns: auto auto auto auto;
		width: 100%;
		height: auto;
		bottom: 0%;
		overflow-x: hidden;
	}
	
	img.jineSticker{
		width: 100%;
	}
}