body{
	padding:0;
	margin:0;
}

/*Set width and height to whatever you want*/

#breakdown{
	position:fixed;
	width:100%;
	height:100%;
}

/* COVER */

.showpony-cover>p{
	background:none;
}

#logo{
	width:20em;
	max-width:100vw;
}

/*

DESIGN MEASUREMENTS

Screen size: 3840 x 2160 px

Dialog box:	2500x600 px 	(65%, 27.7...%)
Name box: 	600x200 px 		(15%, 9.25925...%)

*/

.showpony-textbox{
	width:100%;
	background-color:rgba(0,0,0,.8);
	box-sizing:border-box;
	color:#fff;
	font-family:Arial;
	z-index:10;
	position:absolute;
	bottom:0;
	padding:1em;
	height:5em;
	max-height:100%;
	overflow:auto;
	opacity:1;
	
	user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	-moz-user-select:none;
	font-size:2em;
	
	word-wrap:break-word;
	word-break:normal;
	break-word:normal;
	overflow-wrap:break-word;
	white-space:nowrap;
}

.showpony-textbox{
	min-height:6.5em;
	max-height:100%;
	width:auto;
	left:17.5%;
	right:17.5%;
	bottom:1em;
	background-color:rgba(255, 255, 255, 0.9);
	border:solid #000 .125em;
	color:#000;
    padding:.75em 1em;
}

.showpony-name{
	background-color:#fff;
	border:solid #000 .125em;
	padding:.4em;
	width:5em;
	position:absolute;
	z-index:11;
	left:17.5%;
	margin-left:1em;
	bottom:6.75em;
	font-size:2em;
	font-family:Arial;
	font-weight:bold;
}

.showpony-character{
	height:100%;
}

@media (max-width: 50rem){
	.showpony-textbox{
		left:0;
		right:0;
		bottom:0;
	}

	.showpony-name{
		left:0;
		bottom:6em;
	}
}