/* ---------------------------------- Basics & Resets */

/*
Colors:
Pink: #FF007A
Blue: #0000FF
Yellow: #ffff00
*/

* {
	margin: 0;
	padding: 0;
}

*,
 ::after,
 ::before {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	background: #a8e4ff;
	font-family: 'gosha_sans_regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: gray;
	font-size: 100%;
	line-height: 1.6;
	background: #a8e4ff;
}

button:focus {
	outline: 0;
}

:focus {
	outline: none;
}

::-moz-focus-inner {
	border: 0;
}


/* ---------------------------------- Loading */

.loading_container {
	position: fixed;
	z-index: 1;
	display: table;
	height: 100%;
	width: 100%;
	background: #a8e4ff;
}

.table_cell {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.loading_box {
	z-index: 1;
	display: block;
	margin: 0 auto;
	text-align: center;
	width: 150px;
	height: 300px;
}

.loading_animation {
	z-index: 1;
	display: block;
	margin: 0 auto;
	background: url(../img/animation_donkey_300px_20kb.gif) center center no-repeat;
	background-size: 150px;
	width: 150px;
	height: 150px;
}

.loading_bar {
	display: block;
	background: white;
	width: 100px;
	height: 6px;
	margin: 20px auto 0 auto;
	border-radius: 6px;
}

.bar {
	display: block;
	background: blue;
	width: 40%;
	height: 6px;
	color: #a8e4ff;
	border-radius: 6px 0 0 6px;
}


/* ---------------------------------- Typography */

@font-face {
	font-family: 'gosha_sans_regular';
	src: url('../fonts/GoshaSans-Regular.eot');
	/* IE9 Compat Modes */
	src: url('../fonts/GoshaSans-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/GoshaSans-Regular.woff2') format('woff2'), /* Super Modern Browsers */
	url('../fonts/GoshaSans-Regular.woff') format('woff'), /* Pretty Modern Browsers */
	url('../fonts/GoshaSans-Regular.ttf') format('truetype')/* Safari, Android, iOS */
	;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	color: #0000FF;
}


a {
	text-decoration: none;
	color: #0000FF;
}

a:hover {
	color: #FF007A;
}

ul,
ol {
	padding-left: 20px;
	color: #FF007A;
}

p,
li {
	margin-bottom: 1em;
	
}

li:after {
	content:'';
	width: calc(100% + 20px);
	position: relative;
	left: -20px;
	display: block;
	border-bottom: 2px solid #a8e4ff;
	padding-top: 1em;
}

li {
	break-inside: avoid-column;
}

h3 {
	color: blue;
	line-height: 1.5;
}

.language {
	font-size: 0.8em;
	color: white;
	display: block;
    padding: 0;
    margin: 0;
    text-align: left;
    margin: 5px 0 10px 0;
}

.language a {
	padding: 2px 8px 3px 8px;
	background: blue;
	border-radius: 5px;
	color: white;
	display: inline-block;
    float: left;
    margin-right: 8px;
}

.language a:hover {
	background: #FF007A;
}

.creator {
	font-size: 0.8em;
	display: block;
	color: gray;
	line-height: 1.6 !important;
}

.navi_character {
    font-size: 20px;
}

hr {
	border: 2px solid #a8e4ff;
	margin: 2em 0;
}

.japanese {
	font-size: 95%;
}


/* ---------------------------------- Page Styling*/

#header {
	position: fixed;
	z-index: 2;
	left: 0;
	top: 0;
	width: 100%;
	height: 60px;
	max-height: 150px;
	background: rgb(168, 228, 255);
	background: linear-gradient(0deg, rgba(168, 228, 255, .4) 0%, rgba(168, 228, 255, 1) 100%);
	/*   https://cssgradient.io/ */
}

#logo h1 {
	width: 120px;
	height: 40px;
	position: absolute;
	top: 10px;
	left: 15px;
	display: block;
	overflow: hidden;
	text-indent: -10000px;
	background: url(../img/logo_bitsummit_gaiden_2020.gif) top left no-repeat;
	background-size: contain;
}

.back_to_website a {
	position: absolute;
	top: 15px;
	right: 10px;
	font-size: 10px;
	line-height: 12px;
	display: inline-block;
	height: 25px;
	width: 95px;
	letter-spacing: .1em;
}

.back_to_website a::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	background: url(../img/icon_close.svg) top left no-repeat;
	background-size: 25px;
}

/* ---------------------------------- UI Navi Styling */

#navigation {
	width: 50%;
	width: calc(100% - 160px);
	position: fixed;
	z-index: 3;
	bottom: 20px;
	right: 20px;
	width: 120px;
	height: 120px;
	display: block;
}

#navigation button:visited,
#navigation button:focus,
#navigation button:active,
#navigation button {
	border: 1px solid white;
	color: white;
	border-radius: 40px;
	height: 40px;
	width: 40px;
	font-size: 14px;
	line-height: 10px;
	overflow: hidden;
	cursor: pointer;
	overflow: hidden;
	text-indent: -1000px;
	background-size: 20px;
	background-position: center;
	position: absolute;
	/*     border: 1px solid #0000FF; */
	/*     transform: rotate(-45deg); */
	/*     box-shadow: 4px 4px 0px 0px white; */
}

.zoom_in {
	background: url(../img/icon_zoom_in.svg) top left no-repeat #FF007A;
	top: 40px;
	left: 0;
}

.zoom_in.inactive,
.zoom_in.inactive:hover {
	background-color: gray;
}

.zoom_in:hover {
	background-color: #0000FF;
}

.zoom_out {
	background: url(../img/icon_zoom_out.svg) top left no-repeat #FF007A;
	top: 40px;
	right: 0;
}

.zoom_out.inactive,
.zoom_out.inactive:hover {
	background-color: gray !important;
}

.zoom_out:hover {
	background-color: #0000FF;
}

.info {
	background: url(../img/icon_info.svg) top left no-repeat #FF007A;
	top: 0;
	left: 40px;
}

.info:hover {
	background-color: #0000FF;
}

.reset {
	background: url(../img/icon_reset.svg) top left no-repeat #FF007A;
	bottom: 0;
	left: 40px;
}

.reset:hover {
	background-color: #0000FF;
}



/* ---------------------------------- Modal Styling */

#modal {
	display: block;
	position: fixed;
	z-index: 10;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
}

#modal_content {
	background-color: white;
	margin: 15px auto;
	width: 90%;
	width: calc(100% - 30px);
	border-radius: 5px;
	height: 95%;
	height: calc(100% - 30px);
	border-radius: 5px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
#modal_content::-webkit-scrollbar {
    display: none;
}

.modal_header {
	height: 60px;
	padding: 0 15px;
	background: #a8e4ff;
	border-radius: 5px 5px 0 0;
	position: relative;
	border-bottom: 1px solid #a8e4ff;
	position: absolute;
	width: 100%;
	width: calc(100% - 30px);
	z-index: 1;
}

.modal_header h2 {
	line-height: 58px;
	float: left;
	display: inline-block;
}

.modal_header .close {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 30px;
	height: 30px;
	background: url(../img/icon_close.svg) center center no-repeat;
	background-size: contain;
	overflow: hidden;
	text-indent: -1000px;
}

.modal_body {
	padding: 75px 15px 15px 15px;
}

#modal #bitrider_modal .modal_header {
	background: url(../img/illu_bitraiders.svg) 70px 2px no-repeat #a8e4ff;
	background-size: 197px;
}

#modal #bitrobot_modal .modal_header {
	background: url(../img/illu_bitrobots.svg) 130px 5px no-repeat #a8e4ff;
	background-size: 73px;
}

#modal #bitsamurai_modal .modal_header {
	background: url(../img/illu_bitsamurai.svg) 142px -6px no-repeat #a8e4ff;
	background-size: 90px;
}

#modal #bitranger_modal .modal_header {
	background: url(../img/illu_bitrangers.svg) 140px -10px no-repeat #a8e4ff;
	background-size: 75px;
}

#modal #bitkaiju_modal .modal_header {
	background: url(../img/illu_bitkaiju.svg) 100px -8px no-repeat #a8e4ff;
	background-size: 92px;
}

#modal #shop_modal .modal_header {
	background: url(../img/illu_shop.svg) 190px -10px no-repeat #a8e4ff;
	background-size: 60px;
}

/* ---------------------------------- Responsive Stuff */


@media screen and (min-width: 1024px) {
	
	#header {
		background: none;
	}
	
	#logo h1 {
		position: absolute;
		top: 46px;
		left: 50px;
		width: 300px;
		height: 80px;
	}
	
	.back_to_website a {
		position: absolute;
		top: 50px;
		right: 50px;
	}
	
	/* ---------------------------------- UI Navi Styling */
	
	#navigation {
		position: fixed;
		z-index: 3;
		bottom: 50px;
		right: 50px;
		width: 120px;
		height: 120px;
		border-radius: 120px;
		display: block;
	}
	
	/* ---------------------------------- Modal Styling */
	
	#modal_content {
		background-color: #fefefe;
		width: 70%;
		max-width: 800px;
		position: relative;
		height: auto;
		overflow-y: auto;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
	}
	
	.modal_header {
		width: 100%;
	}
	
	.modal_body {
		-webkit-column-width: 300px;
		-moz-column-width: 300px;
		column-width: 300px;
	}


	#info_modal .modal_body {
/*
		-webkit-column-width: unset;
		-moz-column-width: unset;
		column-width: unset;
*/
        color: #333;
	}

	li:after {
		content: none;
	}

	.language {
		font-size: 0.8em;
		color: blue;
		display: inline-block;
		padding: 0;
		margin: 0;
		text-align: unset;
		margin: 0;
	}

	.language a {
		padding: 0;
		margin-right:0;
		background: none;
		border-radius: inherit;
		color: blue;
		float: none;
	}

	.language a:hover {
		color: #FF007A;
		background:white;
	}

}