@font-face {
    font-family: 'small_lcd_signregular';
    src: url('../font/small_lcd_sign-webfont.woff2') format('woff2'),
         url('../font/small_lcd_sign-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'openminemedium';
    src: url('../font/openmine-webfont.woff2') format('woff2'),
         url('../font/openmine-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'unifont';
	src: url('../font/unifont-13.0.02.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.passepartout
{
    position: absolute;
	background-color: rgba(37, 46, 63, 0.911);
	z-index: 498;
    box-sizing: border-box;
    opacity: 0;

    visibility: hidden;
}

    #passepartout_north{
        top: 0;
        left: 10px;
        height: 10px;
        width: 10px;
    }
    #passepartout_south{
        top: 20px;
        left: 10px;
        height: 100%;
        width: 10px;
    }
    #passepartout_west{
        top: 0;
        left: 0;
        height: 100%;
        width: 10px;
    }
    #passepartout_east{
        top: 0;
        left: 20px;
        height: 100%;
        width: 100%;
    }

    #passepartout_clickCatcher{
        position: absolute;
        top:10px;
        left:10px;
        width:10px;
        height:10px;
    }

#messageBackgroundFilter
{
	position: absolute;
	width: 120%;
	height: 120%;
	top:-10%;
	left:-10%;
	background-color: rgba(37, 46, 63, 0.911);
	z-index: 499;

	visibility: hidden;
}

.messageCenterBox{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

    .messageCenterBox * 
    {
        pointer-events: all;
    }

#messageSmall
{
    width:370px;
	height:120px;
	z-index: 500;

	background-image: url("../img/messageSmall_bg.svg");
	background-size: 100% auto;

	color: var(--color_text);
	font-family: sans-serif;

	visibility: hidden;
}

.messageSmall_game
{
    position:absolute;
	left:575px;
	top:307px;
}

.messageSmall_start
{
	position:relative;
    margin:auto;
}

	#messageSmall_character
	{
		position:absolute;
		width:100px;
		height:100px;
		top:7.5px;
		left:7.5px;
	}

	#messageSmall_contentBox
	{
		position:absolute;
		width:237.5px;
		height: 85px;
		left:115px;
		top:15px;

		display: flex;
		justify-content: flex-end;
		align-items: center;
		align-content: center;
		flex-direction: column;
	}

	#messageSmall_contentCenterDiv
	{
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#messageSmall_buttonBox
	{
		flex-grow: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#messageSmall_buttonBox button
	{
		border-radius: 4px;
		padding: 3px 8px 3px 8px;
		margin: 2px 5px 2px 5px;

		color: var(--color_text);
		font-family: sans-serif;
	}

#messageLarge
{
	width:700px;
	height:650px;
	z-index: 500;

	background-image: url("../img/messageLarge_bg.svg");
	background-size: 100% auto;

	color: var(--color_text);
	font-family: sans-serif;

	visibility: hidden;
}

.messageLarge_game
{
    position:absolute;
	left:410px;
	top:50px;
}

.messageLarge_start
{
    position: relative;
    margin:auto;
}

	#messageLarge_character
	{
		position:absolute;
		width:100px;
		height:100px;
		top:7.5px;
		left:300px;
	}

	#messageLarge_contentBox
	{
		position:absolute;
		width:650px;
		height: 500px;
		left:20px;
		top:112.5px;

		display: flex;
		justify-content: flex-end;
		align-items: center;
		align-content: center;
		flex-direction: column;
		
		padding: 0px 5px 0px 5px;
	}

	#messageLarge_content
	{
		width:100%;
		flex-grow: 1;
		text-align: left;
		overflow-x: hidden;
		overflow-y: auto;
	}

	#messageLarge_buttonBox
	{
		flex-grow: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#messageLarge_buttonBox button
	{
		border-radius: 4px;
		padding: 3px 8px 3px 8px;
		margin: 2px 5px 2px 5px;

		color: var(--color_text);
		font-family: sans-serif;
		font-size: 16px;
	}

#messageDevelopment
{
	position:absolute;
	width:700px;
	height:650px;
	left:410px;
	top:50px;
	z-index: 500;

	color: var(--color_text);
	font-family: sans-serif;

	visibility: hidden;
}

	#messageDevelopment_content
	{
		position: absolute;
		width:640px;
		height:475px;
		left:20px;
		top:130px;
		text-align: left;
		overflow-x: hidden;
		overflow-y: scroll;
		background-color: #dddddd;
		padding: 0px 10px 0px 10px;
	}

	#messageDevelopment_buttonBox
	{
		position: absolute;
		width:660px;
		height:35px;
		left:20px;
		top:605px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#messageDevelopment_buttonBox button
	{
		border-radius: 4px;
		padding: 3px 8px 3px 8px;
		margin: 2px 5px 2px 5px;

		color: var(--color_text);
		font-family: sans-serif;
		font-size: 16px;
	}


.messageNewProgressElement
{
	position:absolute;
	width:700px;
	height:650px;
	left:410px;
	top:50px;
	z-index: 500;

	color: var(--color_text);
	font-family: sans-serif;

	visibility: hidden;
}

.messageNewProgressElement > img
{
	position:absolute;
	width:700px;
	height: auto;
}

	.messageNewProgressElement_title
	{
		position : absolute;
		width:265.3px;
		height:45.3px;
		line-height: 45.3px;
		left:147.2px;
		top:130.7px;

		font-size: 28px;
		letter-spacing: 3px;
		text-align: center;
	}

	.messageNewProgressElement_character
	{
		position:absolute;
		width:100px;
		height:100px;
		top:90px;
		left:20px;
	}

	.messageNewProgressElement_content
	{
		position: absolute;
		width:640px;
		height:455px;
		left:20px;
		top:152px;
		text-align: left;
		overflow-x: hidden;
		overflow-y: scroll;
		background-color: #dddddd;
		padding: 0px 10px 0px 10px;
	}

		.messageNewProgressElement_content h1
		{
			margin-top: 60px;
		}

	.messageNewProgressElement_buttonBox
	{
		position: absolute;
		width:660px;
		height:35px;
		left:20px;
		top:605px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.messageNewProgressElement_buttonBox button
	{
		border-radius: 4px;
		padding: 3px 8px 3px 8px;
		margin: 2px 5px 2px 5px;

		color: var(--color_text);
		font-family: sans-serif;
		font-size: 16px;
	}

.characterDiv
{
	position: absolute;
	width:100%;
	height: 100%;
	top: 0;
	left: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	text-align:center;
	color:#31fff8;
	font-family: 'unifont', Arial, sans-serif;
	font-size: 20px ;
}

.characterDiv > div
{
	margin-top: -5px;
}

.characterDivBlur
{
	position: absolute;
	width:100%;
	height: 100%;
	top: 0;
	left: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	text-align:center;
	color:#31fff8;
	font-family: 'unifont', Arial, sans-serif;
	font-size: 20px ;

	filter: blur(3px);
}

.characterDivBlur > div
{
	margin-top: -5px;
}

.characterDiv svg, .characterDiv img
{
	position:absolute;
	width:100%;
	height: auto;
	left:0;
	top:0;
}

.characterImage
{
	position:absolute;
	width:100%;
	height: auto;
	left:0;
	top:0;
}

.messageAdaptive{
    background-color: #fafafa;
    border: 1px solid #666666;
    border-radius: 14px;
    padding:10px;

    max-width: 600px;

    z-index: 500;

    visibility: hidden;
}

    .messageAdaptive_content{
        background-color: #eeeeee;
        border: 1px solid #666666;
        border-radius: 6px;
        padding:15px;
        box-shadow: 0 0 3px 1px inset;
    }

    .messageAdaptive_content h1
    {
        margin-bottom:10px;
    }
    
    .messageAdaptive_content p
    {
        margin-left: 20px;
        margin-top:2px;
        margin-bottom:5px;
    }
    
    .messageAdaptive_content button
    {
        height:40px;
        width:200px;
        margin-left:auto;
        margin-right:auto;
        border-radius:4px;
        
        text-align:center;
        color: #666666;
        font-family: sans-serif;
        font-size: 18px;
    }
    
    .messageAdaptive_content div
    {
        width:100%;
        text-align:center;
        margin-bottom: 4px;
    }

    .messageAdaptive_content > table
    {
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 10px;
        width: 100%;
    }

    .messageAdaptive_content input
    {
        width: 75%;
    }

#messageStarter{
    position: absolute;
    width: 1508px;
    height: 708px;

    display:flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
}

#messageStarter_container{
    /* position: absolute; */
    z-index: 501;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#messageStarter_content{
    font-family: 'unifont', Arial, sans-serif;
    font-size: 24px;
    color:#31fff8;
    letter-spacing: 2px;
    max-width: 800px;
}

#messageStarter_buttonBox{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    margin-top: 20px;
}

#messageStarter_buttonBox button{
    margin-top: 10px;
    border: 1px solid #31fff8;
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box;
    font-family: 'unifont', Arial, sans-serif;
    font-size: 24px;
    padding:5px;
    color:#31fff8;
    letter-spacing: 2px;
    background-color: black;
    cursor: pointer;
}

#messageStarter_character{
    position: relative;
    width: 140px;
    height: 140px;
}