* {
	margin: auto;
	padding: 0;
}

body{
	background-color: #1a1a1a;
}


@font-face {
    font-family: 'Nova Square';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/novasquare/v24/RrQUbo9-9DV7b06QHgSWsahHT4I.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

@media all {

	div#pokedex
	{
		/*width: 750px;*/
        width: 1500px;
		/*margin: 50px auto 0 auto;*/
        margin: auto;
	}

	div#left
	{
		/*width: 400px;*/
        width: 800px;
		/*height: 500px;*/
        height: 1000px;
		float: left;
		position: relative;
		z-index: 1;
	}

	div#right
	{
		/*width: 350px;*/
        width: 700px;
        /*height: 500px;*/
		height: 1000px;
		float: left;
		position: relative;
	}



	/* //// LEFT PART //// */

	div#curve1_left
	{
		/*width: 201px;*/
        width: 402px;
		/*height: 85px;*/
        height: 170px;
		background-color: #8b0000;
		float: left;
		/*padding: 15px 0 0 15px;*/
        padding: 30px 0 0 30px;

		position: absolute;
		top: 0;
		left: 0;
/*
		box-shadow: -10px 9px #5e0000;
		-webkit-box-shadow: -10px 9px #5e0000;
		-moz-box-shadow: -10px 9px #5e0000;
		-o-box-shadow: -10px 9px #5e0000;

		border-bottom-right-radius: 85px 60px;
		-webkit-border-bottom-right-radius: 85px 60px;
		-moz-border-bottom-right-radius: 85px 60px;
		-o-border-bottom-right-radius: 85px 60px;

		border-top-left-radius: 30px;
		-webkit-border-top-left-radius: 30px;
		-moz-border-top-left-radius: 30px;
		-o-border-top-left-radius: 30px;
*/
        box-shadow: -20px 18px #5e0000;
        -webkit-box-shadow: -20px 18px #5e0000;
        -moz-box-shadow: -20px 18px #5e0000;
        -o-box-shadow: -20px 18px #5e0000;

        border-bottom-right-radius: 170px 120px;
        -webkit-border-bottom-right-radius: 170px 120px;
        -moz-border-bottom-right-radius: 170px 120px;
        -o-border-bottom-right-radius: 170px 120px;

        border-top-left-radius: 60px;
        -webkit-border-top-left-radius: 60px;
        -moz-border-top-left-radius: 60px;
        -o-border-top-left-radius: 60px;
	}


	div#bg_curve1_left
	{
		/*width: 400px;*/
        width: 800px;
		/*height: 80px;*/
        height: 160px;
		background-color: #8b0000;
/*
		border-top-left-radius: 30px;
		-webkit-border-top-left-radius: 30px;
		-moz-border-top-left-radius: 30px;
		-o-border-top-left-radius: 30px;
*/
		border-top-left-radius: 60px;
		-webkit-border-top-left-radius: 60px;
		-moz-border-top-left-radius: 60px;
		-o-border-top-left-radius: 60px;
	}

	div#curve2_left
	{
		/*width: 216px;*/
        width: 432px;
		/*height: 451px;*/
        height: 902px;
		background-color: #c00d0d;
		float: right;

		position: absolute;
		bottom: 0;
		right: 0;
/*
		border-top-left-radius:85px 60px;
		-webkit-border-top-left-radius: 85px 60px;
		-moz-border-top-left-radius: 85px 60px;
		-o-border-top-left-radius: 85px 60px;
*/
		border-top-left-radius:170px 120px;
		-webkit-border-top-left-radius: 170px 120px;
		-moz-border-top-left-radius: 170px 120px;
		-o-border-top-left-radius: 170px 120px;
	}

	div#bg_curve2_left
	{
		/*width: 400px;
		height: 420px;*/
        width: 800px;
		height: 840px;
		background-color: #c00d0d;
/*
		box-shadow: -10px 9px #5e0000;
		-webkit-box-shadow: -10px 9px #5e0000;
		-moz-box-shadow: -10px 9px #5e0000;
		-o-box-shadow: -10px 9px #5e0000;

		border-bottom-left-radius: 30px;
		-webkit-border-bottom-left-radius: 30px;
		-moz-border-bottom-left-radius: 30px;
		-o-border-bottom-left-radius: 30px;
*/
		box-shadow: -20px 18px #5e0000;
		-webkit-box-shadow: -20px 18px #5e0000;
		-moz-box-shadow: -20px 18px #5e0000;
		-o-box-shadow: -20px 18px #5e0000;

		border-bottom-left-radius: 60px;
		-webkit-border-bottom-left-radius: 60px;
		-moz-border-bottom-left-radius: 60px;
		-o-border-bottom-left-radius: 60px;
	}

/*Duplicamos tamaños vvvv*/
	div#buttonGlass
	{
		width: 120px;
		height: 120px;
		margin-right: 30px;
		border: 10px solid #fff;
		float: left;

		box-shadow: 0 0 20px #490000;
		-webkit-box-shadow: 0 0 20px #490000;
		-moz-box-shadow: 0 0 20px #490000;
		-o-box-shadow: 0 0 20px #490000;
		
		background: radial-gradient(#05fbfb, #29abe3);
		background: -webkit-radial-gradient(#05fbfb, #29abe3);
		background: -moz-radial-gradient(#05fbfb, #29abe3);
		background: -o-radial-gradient(#05fbfb, #29abe3);
		
		border-radius: 70px;
		-webkit-border-radius: 70px;
		-moz-border-radius: 70px;
	   	-o-border-radius: 70px;
	}

	div#reflect
	{
		width: 60px;
		height: 36px;
		margin: 6px 0 0 30px;
		background: #fff;
		opacity: 0.6;

		border-radius: 30px 18px;
		-webkit-border-radius: 30px 18px;
		-moz-border-radius: 30px 18px;
	   	-o-border-radius: 30px 18px;
		        
	}

	div#miniButtonGlass1
	{
		width: 40px;
		height: 40px;
		margin-right: 20px;
		float: left;

		box-shadow: 0 0 20px #490000;
		-webkit-box-shadow: 0 0 20px #490000;
		-moz-box-shadow: 0 0 20px #490000;
		-o-box-shadow: 0 0 20px #490000;

		border-radius: 40px;
		-webkit-border-radius: 40px;
		-moz-border-radius: 40px;
		-o-border-radius: 40px;
		
		background: radial-gradient(#fb7b7b, #fb0505);
		background: -webkit-radial-gradient(#fb7b7b, #fb0505);
		background: -moz-radial-gradient(#fb7b7b, #fb0505);
		background: -o-radial-gradient(#fb7b7b, #fb0505);
	}

	div#miniButtonGlass2
	{
		width: 40px;
		height: 40px;
		margin-right: 20px;
		float: left;

		box-shadow: 0 0 20px #490000;
		-webkit-box-shadow: 0 0 20px #490000;
		-moz-box-shadow: 0 0 20px #490000;
		-o-box-shadow: 0 0 20px #490000;

		border-radius: 40px;
		-webkit-border-radius: 40px;
		-moz-border-radius: 40px;
		-o-border-radius: 40px;
		
		background: radial-gradient(#fbfb9b, #fbfb05);
		background: -webkit-radial-gradient(#fbfb9b, #fbfb05);
		background: -moz-radial-gradient(#fbfb9b, #fbfb05);
		background: -o-radial-gradient(#fbfb9b, #fbfb05);
	}

	div#miniButtonGlass3
	{
		width: 40px;
		height: 40px;
		margin-right: 40px;
		float: left;

		box-shadow: 0 0 20px #490000;
		-webkit-box-shadow: 0 0 20px #490000;
		-moz-box-shadow: 0 0 20px #490000;
		-o-box-shadow: 0 0 20px #490000;

		border-radius: 40px;
		-webkit-border-radius: 40px;
		-moz-border-radius: 40px;
		-o-border-radius: 40px;
		
		background: radial-gradient(#b0fb7b, #50fb05);
		background: -webkit-radial-gradient(#b0fb7b, #50fb05);
		background: -moz-radial-gradient(#b0fb7b, #50fb05);
		background: -o-radial-gradient(#b0fb7b, #50fb05);
	}

	div#junction
	{
		width: 80px;/*No Duplicado Tamaño. Era 60*/
		height: 902px;
		float: right;
		
		background: linear-gradient(left, #8b0000 0%, #c00d0d 50%, #8b0000 100%);	
		background: -webkit-linear-gradient(left, #8b0000 0%, #c00d0d 50%, #8b0000 100%);
		background: -moz-linear-gradient(left, #8b0000 0%, #c00d0d 50%, #8b0000 100%);
		background: -o-linear-gradient(left, #8b0000 0%, #c00d0d 50%, #8b0000 100%);
	}

	div#junction1
	{
		height: 80px;
		background-color: #5e0000;
		opacity: 0.3;
		margin-top: 100px;
		margin-bottom: 524px;

		border-top: 4px solid #330000;
		border-bottom: 4px solid #330000;
	}

	div#junction2
	{
		height: 80px;
		background-color: #5e0000;
		opacity: 0.3;

		border-top: 4px solid #330000;
		border-bottom: 4px solid #330000;
	}

	div#screen
	{
		height: 490px;
		width: 640px; /*Era 260px*/
		padding: 0 20px;
		background-color: #b0b0b0;
		float:left;

		position: absolute;
		top: 260px;
		left: 19px; /*Sin tocar*/

		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		-o-border-radius: 30px;
	}

	div#screen:after
	{
		content: "";
		border-top: 80px solid #b0b0b0;
		border-left: 80px solid #c00d0d;
		height: 0;

		position: absolute;
		bottom: 0;
		left: 0;
	}

	div#picture
	{
		height: 350px; /*Debería ser originalmente 130*/
		width: 634px; /*Debería ser originalmente 254*/
		margin-top: 40px;
		margin-bottom: 18px;
		background-color: #fff;
		border: 6px solid #494949;
		clear: both;
        overflow: auto;

		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		-o-border-radius: 30px;
	}

	div#picture img
	{
		display: block;
		margin: 0 auto;
	}

	div#topPicture
	{
		margin: 12px auto;
		width: 80px;
	}

	div#buttontopPicture1, div#buttontopPicture2
	{
		height: 16px;
		width: 16px;
		background-color: #c00d0d;
		border: 2px solid #000;
		float: left;

		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		-o-border-radius: 30px;
	}

	div#buttontopPicture1
	{
		margin-right: 40px;
	}

	div#buttonbottomPicture
	{
		height: 52px;
		width: 52px;
		background-color: #c00d0d;
		margin-left: 70px;
		float: left;

		border-radius: 60px;
		-webkit-border-radius: 60px;
		-moz-border-radius: 60px;
		-o-border-radius: 60px;

		box-shadow: -4px 2px #5e0000;
		-webkit-box-shadow: -4px 2px #5e0000;
		-moz-box-shadow: -4px 2px #5e0000;
		-o-box-shadow: -4px 2px #5e0000;

		background: linear-gradient(top, #c00d0d 0%, #8b0000 80%);	
		background: -webkit-linear-gradient(top, #c00d0d 0%, #8b0000 80%);
		background: -moz-linear-gradient(top, #c00d0d 0%, #8b0000 80%);
		background: -o-linear-gradient(top, #c00d0d 0%, #8b0000 80%);

		cursor:pointer;
	}

	div#buttonbottomPicture:hover
    {
		background: linear-gradient(top, #ff1313 0%, #aa0707 80%);	
		background: -webkit-linear-gradient(top, #ff1313 0%, #aa0707 80%);
		background: -moz-linear-gradient(top, #ff1313 0%, #aa0707 80%);
		background: -o-linear-gradient(top, #ff1313 0%, #aa0707 80%);
    }

	div#speakers
	{
		float: right;
		width: 150px;
		height: 50px;
		margin-right: 40px;
	}

	div.sp
	{
		height: 6px;
		margin-bottom: 10px;
		background-color: #494949;

		border-radius: 60px;
		-webkit-border-radius: 60px;
		-moz-border-radius: 60px;
		-o-border-radius: 60px;
	}

	div#bigbluebutton
	{
		height: 100px;
		width: 100px;
		background-color: #000;
		/*background-image: url("/images/icons/home.png");*/

		position: absolute;
		top: 790px;
		left: 60px;

		border-radius: 200px;
		-webkit-border-radius: 200px;
		-moz-border-radius: 200px;
		-o-border-radius: 200px;

		background: linear-gradient(top, #307bfb 0%, #0530e5 80%);	
		background: -webkit-linear-gradient(top, #307bfb 0%, #0530e5 80%);
		background: -moz-linear-gradient(top, #307bfb 0%, #0530e5 80%);
		background: -o-linear-gradient(top, #307bfb 0%, #0530e5 80%);

		box-shadow: -6px 4px #001c91;
		-webkit-box-shadow: -6px 4px #001c91;
		-moz-box-shadow: -6px 4px #001c91;
		-o-box-shadow: -6px 4px #001c91;
	}

	div#bigbluebutton:hover
	{
		background: linear-gradient(top, #5694ff 0%, #1f4cff 80%);	
		background: -webkit-linear-gradient(top, #5694ff 0%, #1f4cff 80%);
		background: -moz-linear-gradient(top, #5694ff 0%, #1f4cff 80%);
		background: -o-linear-gradient(top, #5694ff 0%, #1f4cff 80%);
	}

	div#bigbluebutton img
	{
		width: 80px;
		position: relative;
		left: 8px;
		top: 6px;
		opacity: 50%;
	}

	div#barbutton1
	{
		height: 26px;
		width: 100px;

		position: absolute;
		top: 810px;
		left: 200px;

		border-radius: 200px;
		-webkit-border-radius: 200px;
		-moz-border-radius: 200px;
		-o-border-radius: 200px;

		background: linear-gradient(top, #50fb05 0%, #057b05 100%);	
		background: -webkit-linear-gradient(top, #50fb05 0%, #057b05 100%);
		background: -moz-linear-gradient(top, #50fb05 0%, #057b05 100%);
		background: -o-linear-gradient(top, #50fb05 0%, #057b05 100%);

		box-shadow: -2px 4px #004200;
		-webkit-box-shadow: -2px 4px #004200;
		-moz-box-shadow: -2px 4px #004200;
		-o-box-shadow: -2px 4px #004200;
	}

	div#barbutton2
	{
		height: 26px;
		width: 100px;

		position: absolute;
		top: 810px;
		left: 330px;

		border-radius: 200px;
		-webkit-border-radius: 200px;
		-moz-border-radius: 200px;
		-o-border-radius: 200px;

		background: linear-gradient(top, #fb6505 0%, #bb0505 100%);	
		background: -webkit-linear-gradient(top, #fb6505 0%, #bb0505 100%);
		background: -moz-linear-gradient(top, #fb6505 0%, #bb0505 100%);
		background: -o-linear-gradient(top, #fb6505 0%, #bb0505 100%);

		box-shadow: -2px 4px #7b0000;
		-webkit-box-shadow: -2px 4px #7b0000;
		-moz-box-shadow: -2px 4px #7b0000;
		-o-box-shadow: -2px 4px #7b0000;
	}

	div#cross
	{
		width: 180px;
		height: 180px;

		position: absolute;
		top: 788px;
		left: 460px;
	}

	div#topcross
	{
		width: 60px;
		height: 60px;
		background-color: #222;

		position: absolute;
		top: 0;
		left: 60px;

		box-shadow: -6px 4px #010101;
		-webkit-box-shadow: -6px 4px #010101;
		-moz-box-shadow: -6px 4px #010101;
		-o-box-shadow: -6px 4px #010101;

		border-top-left-radius: 10px;
		-webkit-border-top-left-radius: 10px;
		-moz-border-top-left-radius: 10px;
		-o-border-top-left-radius: 10px;

		border-top-right-radius: 10px;
		-webkit-border-top-right-radius: 10px;
		-moz-border-top-right-radius: 10px;
		-o-border-top-right-radius: 10px;
	}

	div#leftcross
	{
		width: 60px;
		height: 60px;
		background-color: #222;
		z-index: 1;

		position: absolute;
		left: 0;
		top: 60px;

		box-shadow: -6px 4px #010101;
		-webkit-box-shadow: -6px 4px #010101;
		-moz-box-shadow: -6px 4px #010101;
		-o-box-shadow: -6px 4px #010101;

		border-top-left-radius: 10px;
		-webkit-border-top-left-radius: 10px;
		-moz-border-top-left-radius: 10px;
		-o-border-top-left-radius: 10px;

		border-bottom-left-radius: 10px;
		-webkit-border-bottom-left-radius: 10px;
		-moz-border-bottom-left-radius: 10px;
		-o-border-bottom-left-radius: 10px;
	}

	div#midcross
	{
		width: 60px;
		height: 60px;
		background-color: #222;

		position: absolute;
		top: 60px;
		left: 60px;

		box-shadow: -6px 4px #010101;
		-webkit-box-shadow: -6px 4px #010101;
		-moz-box-shadow: -6px 4px #010101;
		-o-box-shadow: -6px 4px #010101;
	}

	div#rightcross
	{
		width: 60px;
		height: 60px;
		background-color: #222;

		position: absolute;
		top: 60px;
		right: 0;

		box-shadow: -6px 4px #010101;
		-webkit-box-shadow: -6px 4px #010101;
		-moz-box-shadow: -6px 4px #010101;
		-o-box-shadow: -6px 4px #010101;

		border-top-right-radius: 10px;
		-webkit-border-top-right-radius: 10px;
		-moz-border-top-right-radius: 10px;
		-o-border-top-right-radius: 10px;

		border-bottom-right-radius: 10px;
		-webkit-border-bottom-right-radius: 10px;
		-moz-border-bottom-right-radius: 10px;
		-o-border-bottom-right-radius: 10px;
	}

	div#botcross
	{
		width: 60px;
		height: 60px;
		background-color: #222;

		position: absolute;
		bottom: 0;
		left: 60px;

		box-shadow: -6px 4px #010101;
		-webkit-box-shadow: -6px 4px #010101;
		-moz-box-shadow: -6px 4px #010101;
		-o-box-shadow: -6px 4px #010101;

		border-bottom-left-radius: 10px;
		-webkit-border-bottom-left-radius: 10px;
		-moz-border-bottom-left-radius: 10px;
		-o-border-bottom-left-radius: 10px;

		border-bottom-right-radius: 10px;
		-webkit-border-bottom-right-radius: 10px;
		-moz-border-bottom-right-radius: 10px;
		-o-border-bottom-right-radius: 10px;
	}

	div#upT
	{
		width: 0;
		height: 0;
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid #111;

		position: absolute;
		top: 10px;
		left: 8px;
	}

	div#downT
	{
		width: 0;
		height: 0;
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-top: 20px solid #111;

		position: absolute;
		bottom: 10px;
		left: 8px;
	}

	div#leftT
	{
		width: 0;
		height: 0;
		border-top: 20px solid transparent;
		border-right: 20px solid #111;
		border-bottom: 20px solid transparent;

		position: absolute;
		top: 10px;
		left: 8px;
	}

	div#rightT
	{
		width: 0;
		height: 0;
		border-top: 20px solid transparent;
		border-left: 20px solid #111;
		border-bottom: 20px solid transparent;

		position: absolute;
		top: 10px;
		right: 10px;
	}

	div#midCircle
	{
		width: 40px;
		height: 40px;

		position: absolute;
		top: 10px;
		left: 8px;

		border-radius: 60px;
		-webkit-border-radius: 60px;
		-moz-border-radius: 60px;
		-o-border-radius: 60px;

		background: radial-gradient(#111, #222);
		background: -webkit-radial-gradient(#111, #222);
		background: -moz-radial-gradient(#111, #222);
		background: -o-radial-gradient(#111, #222);
	} 



	/* //// RIGHT PART //// */

	div#curve1_right
	{
		width: 332px;
		height: 902px;
		background-color: #c00d0d;
		float: right;

		position: absolute;
		bottom: 0;
		left: 0;

		border-top-right-radius:170px 120px;
		-webkit-border-right-left-radius: 170px 120px;
		-moz-border-right-left-radius: 170px 120px;
		-o-border-right-left-radius: 170px 120px;
	}


	div#bg_curve1_right
	{
		width: 700px;
		height: 160px;
		background-color: #1a1a1a;

		border-top-right-radius: 60px;
		-webkit-border-top-right-radius: 60px;
		-moz-border-top-right-radius: 60px;
		-o-border-top-right-radius: 60px;
	}

	div#curve2_right
	{
		width: 432px;
		height: 200px;
		background-color: #1a1a1a;
		float: left;

		position: absolute;
		top: 0;
		right: 0;

		border-bottom-left-radius: 170px 120px;
		-webkit-border-bottom-left-radius: 170px 120px;
		-moz-border-bottom-left-radius: 170px 120px;
		-o-border-bottom-left-radius: 170px 120px;
	}

	div#bg_curve2_right
	{
		width: 700px;
		height: 840px;
		background-color: #c00d0d;

		border-bottom-right-radius: 60px;
		-webkit-border-bottom-right-radius: 60px;
		-moz-border-bottom-right-radius: 60px;
		-o-border-bottom-right-radius: 60px;

		box-shadow: -20px 18px #5e0000;
		-webkit-box-shadow: -20px 18px #5e0000;
		-moz-box-shadow: -20px 18px #5e0000;
		-o-box-shadow: -20px 18px #5e0000;
	}

	div#stats
	{
		height: 300px;
		width: 560px;
		padding: 20px;
		background-color: #30da0c;
		z-index: 1;
		font-size: 26px;
		font-family: arial, sans-serif;
        overflow: auto;

		position: absolute;
		top: 260px;
		left: 50px;

		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		-o-border-radius: 30px;

		box-shadow: 0 0 40px #003300 inset;
		-webkit-box-shadow: 0 0 40px #003300 inset;
		-moz-box-shadow: 0 0 40px #003300 inset;
		-o-box-shadow: 0 0 40px #003300 inset;
	}

	div#blueButtons1
	{
		z-index: 1;

		position: absolute;
		top: 630px;
		left: 80px;
	}

	div#blueButtons2
	{
		z-index: 1;

		position: absolute;
		top: 710px;
		left: 80px;
	}

	div.blueButton
	{
		height: 70px;
		width : 172px;
		background-color: #003300;
		float: left;
		margin-right: 14px;

		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		-o-border-radius: 20px;

		background: linear-gradient(top, #307bfb 0%, #0530e5 80%);	
		background: -webkit-linear-gradient(top, #307bfb 0%, #0530e5 80%);
		background: -moz-linear-gradient(top, #307bfb 0%, #0530e5 80%);
		background: -o-linear-gradient(top, #307bfb 0%, #0530e5 80%);

		box-shadow: -2px 4px #001c91;
		-webkit-box-shadow: -2px 4px #001c91;
		-moz-box-shadow: -2px 4px #001c91;
		-o-box-shadow: -2px 4px #001c91;

        display: grid;
        align-items: center;
        text-align: center;
        font-size: 20px;
        font-family: 'Nova Square', sans-serif;
        font-weight: bold;
        color: #e5e5e5;
        cursor: pointer;
	}

    div.blueButton:hover
    {
		background: linear-gradient(top, #4589ff 0%, #143ee6 80%);	
		background: -webkit-linear-gradient(top, #4589ff 0%, #143ee6 80%);
		background: -moz-linear-gradient(top, #4589ff 0%, #143ee6 80%);
		background: -o-linear-gradient(top, #4589ff 0%, #143ee6 80%);
    }

	div#barbutton3
	{
		height: 35px;
		width: 100px;
		z-index: 1;

		position: absolute;
		top: 810px;
		left: 420px;

		border-radius: 200px;
		-webkit-border-radius: 200px;
		-moz-border-radius: 200px;
		-o-border-radius: 200px;

		background: linear-gradient(top, #50fb05 0%, #057b05 100%);	
		background: -webkit-linear-gradient(top, #50fb05 0%, #057b05 100%);
		background: -moz-linear-gradient(top, #50fb05 0%, #057b05 100%);
		background: -o-linear-gradient(top, #50fb05 0%, #057b05 100%);

		box-shadow: -2px 4px #004200;
		-webkit-box-shadow: -2px 4px #004200;
		-moz-box-shadow: -2px 4px #004200;
		-o-box-shadow: -2px 4px #004200;

        display: grid;
        align-items: center;
        text-align: center;
        font-size: 15px;
        font-family: 'Nova Square', sans-serif;
        font-weight: bold;
        color: #202020;
        cursor: pointer;
	}

    div#barbutton3:hover
    {
		background: linear-gradient(top, #62f723 0%, #08a108 100%);	
		background: -webkit-linear-gradient(top, #62f723 0%, #08a108 100%);
		background: -moz-linear-gradient(top, #62f723 0%, #08a108 100%);
		background: -o-linear-gradient(top, #62f723 0%, #08a108 100%);
    }

	div#barbutton4
	{
		height: 35px;
		width: 100px;
		z-index: 1;

		position: absolute;
		top: 810px;
		left: 540px;

		border-radius: 200px;
		-webkit-border-radius: 200px;
		-moz-border-radius: 200px;
		-o-border-radius: 200px;

		background: linear-gradient(top, #fb6505 0%, #bb0505 100%);	
		background: -webkit-linear-gradient(top, #fb6505 0%, #bb0505 100%);
		background: -moz-linear-gradient(top, #fb6505 0%, #bb0505 100%);
		background: -o-linear-gradient(top, #fb6505 0%, #bb0505 100%);

		box-shadow: -2px 4px #7b0000;
		-webkit-box-shadow: -2px 4px #7b0000;
		-moz-box-shadow: -2px 4px #7b0000;
		-o-box-shadow: -2px 4px #7b0000;

        display: grid;
        align-items: center;
        text-align: center;
        font-size: 15px;
        font-family: 'Nova Square', sans-serif;
        font-weight: bold;
        color: #202020;
        cursor: pointer;
	}

    div#barbutton4:hover
    {
		background: linear-gradient(top, #ff8032 0%, #eb0505 100%);	
		background: -webkit-linear-gradient(top, #ff8032 0%, #eb0505 100%);
		background: -moz-linear-gradient(top, #ff8032 0%, #eb0505 100%);
		background: -o-linear-gradient(top, #ff8032 0%, #eb0505 100%);
    }

	div#miniButtonGlass4
	{
		width: 40px;
		height: 40px;
		float: left;
		z-index: 1;

		position: absolute;
		top: 806px;
		left: 50px;

		box-shadow: 0 0 20px #490000;
		-webkit-box-shadow: 0 0 20px #490000;
		-moz-box-shadow: 0 0 20px #490000;
		-o-box-shadow: 0 0 20px #490000;

		border-radius: 40px;
		-webkit-border-radius: 40px;
		-moz-border-radius: 40px;
		-o-border-radius: 40px;
		
		background: radial-gradient(#ff9b5b, #fb6505);
		background: -webkit-radial-gradient(#ff9b5b, #fb6505);
		background: -moz-radial-gradient(#ff9b5b, #fb6505);
		background: -o-radial-gradient(#ff9b5b, #fb6505);
	}

	div#miniButtonGlass5
	{
		width: 40px;
		height: 40px;
		float: left;
		z-index: 1;

		position: absolute;
		top: 806px;
		left: 102px;

		box-shadow: 0 0 20px #490000;
		-webkit-box-shadow: 0 0 20px #490000;
		-moz-box-shadow: 0 0 20px #490000;
		-o-box-shadow: 0 0 20px #490000;

		border-radius: 40px;
		-webkit-border-radius: 40px;
		-moz-border-radius: 40px;
		-o-border-radius: 40px;
		
		background: radial-gradient(#0abd0a, #057b05);
		background: -webkit-radial-gradient(#0abd0a, #057b05);
		background: -moz-radial-gradient(#0abd0a, #057b05);
		background: -o-radial-gradient(#0abd0a, #057b05);
	}

	div#yellowBox1
	{
		width: 280px;
		height: 100px;
		z-index: 1;
		/*background-color: #ffff00;*/
		background-image: url("/images/speaker.jpg");

		position: absolute;
		top: 870px;
		left: 50px;

		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		-o-border-radius: 30px;

		/*box-shadow: 0 0 40px #ff6600 inset;*/
		box-shadow: 0 0 40px #000000 inset;
		-webkit-box-shadow: 0 0 40px #000000 inset;
		-moz-box-shadow: 0 0 40px #000000 inset;
		-o-box-shadow: 0 0 40px #000000 inset;
	}

	div#yellowBox2
	{
		width: 280px;
		height: 100px;
		z-index: 1;
		background-color: #ffff00;
		background-image: url("/images/speaker.jpg");

		position: absolute;
		top: 870px;
		left: 370px;

		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		-o-border-radius: 30px;

		box-shadow: 0 0 40px #000000 inset;
		-webkit-box-shadow: 0 0 40px #000000 inset;
		-moz-box-shadow: 0 0 40px #000000 inset;
		-o-box-shadow: 0 0 40px #000000 inset;
	}

}

/*CERRADO - Revisar como transformar esto bien*/
@media handheld and (orientation:portrait), (max-width:768px) {

	div#pokedex
	{
		width: 800px;
	}

	div#logo
	{
		width: 500px;
		height: 281px;
		background: url('/images/logo.png') no-repeat left top;
		z-index: 1;

		position: absolute;
		top: 210px;
		left: 110px;
	}

	div#left
	{
		width: 800px;
		height: 1000px;
		float: left;
		position: relative;
		z-index: 1;
		margin: 0 auto;
	}

	div#curve1_left
	{
		width: 402px;
		height: 170px;
		background-color: #8b0000;
		float: left;
		padding: 30px 0 0 30px;

		position: absolute;
		top: 0;
		left: 0;

		box-shadow: 0 0 #5e0000;
		-webkit-box-shadow: 0 0 #5e0000;
		-moz-box-shadow: 0 0 #5e0000;
		-o-box-shadow: 0 0 #5e0000;

		border-bottom-right-radius: 170px 120px;
		-webkit-border-bottom-right-radius: 170px 120px;
		-moz-border-bottom-right-radius: 170px 120px;
		-o-border-bottom-right-radius: 170px 120px;

		border-top-left-radius: 60px;
		-webkit-border-top-left-radius: 60px;
		-moz-border-top-left-radius: 60px;
		-o-border-top-left-radius: 60px;
	}

	div#bg_curve1_left
	{
		width: 800px;
		height: 160px;
		background-color: #8b0000;

		box-shadow: -20px 18px #5e0000;
		-webkit-box-shadow: -20px 18px #5e0000;
		-moz-box-shadow: -20px 18px #5e0000;
		-o-box-shadow: -20px 18px #5e0000;

		border-top-left-radius: 60px;
		-webkit-border-top-left-radius: 60px;
		-moz-border-top-left-radius: 60px;
		-o-border-top-left-radius: 60px;
	}

	div#right, div#screen, div#bigbluebutton, div#barbutton1, div#barbutton2, div#cross
	{
		display: none;
	}

	.search-container
	{
		display: none;
		z-index: -1;
	}

}

div#pokedexClosed
{
    width: 800px;
    margin: 50px auto 0 auto;
}

div#logo2
{
    width: 500px;
    height: 281px;
    background: url('/images/logo.png') no-repeat left top;
    z-index: 1;

    position: absolute;
    top: 210px;
    left: 110px;
}

div#left2
{
    width: 800px;
    height: 1000px;
    float: left;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

div#curve1_left2
{
    width: 402px;
    height: 170px;
    background-color: #8b0000;
    float: left;
    padding: 30px 0 0 30px;

    position: absolute;
    top: 0;
    left: 0;

    box-shadow: 0 0 #5e0000;
    -webkit-box-shadow: 0 0 #5e0000;
    -moz-box-shadow: 0 0 #5e0000;
    -o-box-shadow: 0 0 #5e0000;

    border-bottom-right-radius: 170px 120px;
    -webkit-border-bottom-right-radius: 170px 120px;
    -moz-border-bottom-right-radius: 170px 120px;
    -o-border-bottom-right-radius: 170px 120px;

    border-top-left-radius: 60px;
    -webkit-border-top-left-radius: 60px;
    -moz-border-top-left-radius: 60px;
    -o-border-top-left-radius: 60px;
}

div#bg_curve1_left2
{
    width: 800px;
    height: 160px;
    background-color: #8b0000;

    box-shadow: -20px 18px #5e0000;
    -webkit-box-shadow: -20px 18px #5e0000;
    -moz-box-shadow: -20px 18px #5e0000;
    -o-box-shadow: -20px 18px #5e0000;

    border-top-left-radius: 60px;
    -webkit-border-top-left-radius: 60px;
    -moz-border-top-left-radius: 60px;
    -o-border-top-left-radius: 60px;
}

div#right2, div#screen2, div#bigbluebutton2, div#barbutton12, div#barbutton22, div#cross2
{
    display: none;
}

form#login
{
    position: absolute;
    left: 35%;
    top: 550px;
    display: grid;
    align-items: center;
    text-align: center;
    font-size: 25px;
    font-family: 'Nova Square', sans-serif;
    font-weight: bold;
    color: #ebebeb;
    z-index: 2;
}

form#register
{
    position: absolute;
    left: 35%;
    top: 510px;
    display: grid;
    align-items: center;
    text-align: center;
    font-size: 25px;
    font-family: 'Nova Square', sans-serif;
    font-weight: bold;
    color: #ebebeb;
    z-index: 2;
}

form#report
{
    position: absolute;
    left: 15%;
    margin-top: 10px;
    display: grid;
    align-items: center;
    text-align: center;
    font-size: 25px;
    font-family: 'Nova Square', sans-serif;
    font-weight: bold;
    color: #111;
    z-index: 2;
}

form#report textarea
{
	width:480px;
	height:150px;
	resize: none;
}

form#login input, form#register input, form#register select
{
    border-radius: 25px;
    height: 20px;
    text-align: center;
    margin-bottom: 15px;
    font-size: 15px;
    font-family: 'Nova Square', sans-serif;
}

form#report input, form#report textarea, form#report select
{
	margin-bottom: 5px;
}

form#login button, form#register button, form#report button
{
    height: 35px;
    width: 165px;
    margin-bottom: 10px;

    border-radius: 200px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    -o-border-radius: 200px;

    display: grid;
    align-items: center;
    text-align: center;
    font-size: 15px;
    font-family: 'Nova Square', sans-serif;
    font-weight: bold;
    cursor: pointer;
}

form#login button.inicio, form#register button.registrar, form#report button.send_report
{
    background: linear-gradient(top, #307bfb 0%, #0530e5 80%);	
    background: -webkit-linear-gradient(top, #307bfb 0%, #0530e5 80%);
    background: -moz-linear-gradient(top, #307bfb 0%, #0530e5 80%);
    background: -o-linear-gradient(top, #307bfb 0%, #0530e5 80%);

    box-shadow: -2px 4px #001c91;
    -webkit-box-shadow: -2px 4px #001c91;
    -moz-box-shadow: -2px 4px #001c91;
    -o-box-shadow: -2px 4px #001c91;

    color: #e4e4e4;
}

form#login button.registro, form#register button.volver
{
    background: linear-gradient(top, #fb6505 0%, #bb0505 100%);	
    background: -webkit-linear-gradient(top, #fb6505 0%, #bb0505 100%);
    background: -moz-linear-gradient(top, #fb6505 0%, #bb0505 100%);
    background: -o-linear-gradient(top, #fb6505 0%, #bb0505 100%);

    box-shadow: -2px 4px #7b0000;
    -webkit-box-shadow: -2px 4px #7b0000;
    -moz-box-shadow: -2px 4px #7b0000;
    -o-box-shadow: -2px 4px #7b0000;

    color: #202020;
}

div#errmsg
{
    position: absolute;
    text-align: center;
    top: 780px;
    font-size: 15px;
    font-family: 'Nova Square', sans-serif;
    width: 720px;
    z-index: 3;
    color: #e4e4e4;
}

div#errmsg2
{
    position: absolute;
    text-align: center;
    top: 945px;
    font-size: 15px;
    font-family: 'Nova Square', sans-serif;
    width: 720px;
    z-index: 3;
    color: #e4e4e4;
}

.m_rodex_fieldset
{
    position: relative;
    display: grid;
    align-items: center;
    text-align: center;
    font-size: 12px;
    font-family: 'Nova Square', sans-serif;
    width: 120px;
    height: 120px;
    z-index: 3;
    float: left;
    /*margin-left: 3px;*/
    color: #252525;
}

.m_rodex_fieldset_team
{
    position: relative;
    display: grid;
    align-items: center;
    text-align: center;
    font-size: 12px;
    font-family: 'Nova Square', sans-serif;
    width: 120px;
    height: 120px;
    z-index: 3;
    float: left;
    /*margin-left: 3px;*/
    color: #252525;
}

.m_rodex_fieldset_empty
{
    position: relative;
    display: grid;
    align-items: center;
    text-align: center;
    font-size: 12px;
    font-family: 'Nova Square', sans-serif;
    width: 120px;
    height: 120px;
    z-index: 3;
    float: left;
    /*margin-left: 3px;*/
    color: #252525;
}

fieldset
{
    border: none; /* Elimina el borde predeterminado */
    position: relative; /* Permite posicionar el legend */
}

.m_rodex_fieldset legend
{
    position: absolute; /* Permite superponer el legend en la parte inferior */
    bottom: 0; /* Lo coloca en la parte inferior del fieldset */
    left: 50%; /* Lo centra horizontalmente */
    transform: translateX(-50%); /* Corrige el centrado */
    border-bottom: 1px solid #000; /* Añade una línea en la parte inferior */
    width: max-content;
    background-color: white; /* Ajusta el fondo según sea necesario */
    font-weight: bold;
    z-index: 4;
}

.m_rodex_fieldset_team legend
{
    position: absolute; /* Permite superponer el legend en la parte inferior */
    bottom: 0; /* Lo coloca en la parte inferior del fieldset */
    left: 50%; /* Lo centra horizontalmente */
    transform: translateX(-50%); /* Corrige el centrado */
    border-bottom: 1px solid #000; /* Añade una línea en la parte inferior */
    width: max-content;
    background-color: white; /* Ajusta el fondo según sea necesario */
    font-weight: bold;
    z-index: 4;
}

.m_rodex
{
    position: relative;
    display: grid;
    align-items: center;
    text-align: center;
    font-size: 12px;
    font-family: 'Nova Square', sans-serif;
    width: 120px;
    height: 120px;
    z-index: 3;
    float: left;
    /*margin-left: 3px;*/
    color: #252525;
    overflow: hidden;
}

.m_rodex_stored
{
    position: relative;
    display: grid;
    align-items: center;
    text-align: center;
    font-size: 12px;
    font-family: 'Nova Square', sans-serif;
    width: 120px;
    height: 120px;
    z-index: 3;
    float: left;
    /*margin-left: 3px;*/
    color: #252525;
    overflow: hidden;
}

/* Para navegadores WebKit (Chrome, Safari) */
::-webkit-scrollbar {
    width: 4px; /* Ancho del scrollbar */
}

::-webkit-scrollbar-thumb {
    background-color: #313131; /* Color de la barra deslizante (thumb) */
    border-radius: 3px; /* Bordes redondeados */
}

.rendered
{
    max-height: 110px;
    max-width: 120px;
}



.m_rodex_fieldset_select
{
    position: relative;
    display: grid;
    align-items: center;
    text-align: center;
    font-size: 12px;
    font-family: 'Nova Square', sans-serif;
    width: 240px;
    height: 240px;
    z-index: 3;
    float: left;
    /*margin-left: 3px;*/
    color: #252525;
}

.m_rodex_fieldset_select legend
{
    position: absolute; /* Permite superponer el legend en la parte inferior */
    bottom: 0; /* Lo coloca en la parte inferior del fieldset */
    left: 50%; /* Lo centra horizontalmente */
    transform: translateX(-50%); /* Corrige el centrado */
    border-bottom: 1px solid #000; /* Añade una línea en la parte inferior */
    width: max-content;
    background-color: white; /* Ajusta el fondo según sea necesario */
    font-size: 18px;
    font-weight: bold;
    z-index: 4;
}

.m_rodex_select
{
    position: relative;
    display: grid;
    align-items: center;
    text-align: center;
    font-size: 12px;
    font-family: 'Nova Square', sans-serif;
    width: 240px;
    height: 240px;
    z-index: 3;
    float: left;
    /*margin-left: 3px;*/
    color: #252525;
    /*overflow: hidden;*/
}

.rendered_select
{
    max-height: 350px;
    max-width: 240px;
    scale: 2;
}

div#rodex_show_center
{
    display: inline-flex;
    width: 630px;
    height: 350px;
}

div#rodex_show_center_team
{
    display: inline-flex;
    width: 630px;
    height: 150px;
}

div#b_stats
{
    display: inline-flex;
    width: 550px;
}

div#fragment
{
    width: 275px;
    text-align: left;
    margin: 0;
}

div#v_separator
{
    width: 120px;
}

.barra {
    width: 125px; /* Ancho de la barra */
    height: 13px; /* Altura de la barra */
    border: 0.3px solid #000000; /* Borde de la barra */
}

.vida {
    background-color: #4ac354; /* Color de la barra de vida (verde) */
}

.mana {
    background-color: #2196F3; /* Color de la barra de maná (azul) */
}

.porcentaje {
    text-align: center;
    color: #fff; /* Color del texto */
    font-size: 12px;
}

.atk {
    font-size: 22px;
}

.desc_atk {
    font-size: 16px;
    padding-right: 15px;
	padding-bottom: 15px;
}

.atk_sub
{
    font-size: 18px;
}

.element
{
    height:48px;
}

.icon_element
{
    height:24px;
}

.icon_type
{
    height:24px;
    text-align: right;
}

div#leftTback {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-right: 20px solid #1111117a;
    border-bottom: 20px solid transparent;
    position: relative;
    top: 7px;
    left: -5px;
}

.search-container {
    position: relative;
    top: 40px;
    left: 105px;
    width: 10%;
    padding: 10px;
    display: flex;
    align-items: center;
    z-index: 1;
}

#searchInput {
    padding: 5px;
    margin-right: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.search-container button {
    padding: 5px;
    background-color: #c00d0d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	box-shadow: -4px 2px #5e0000;
	-webkit-box-shadow: -4px 2px #5e0000;
	-moz-box-shadow: -4px 2px #5e0000;
	-o-box-shadow: -4px 2px #5e0000;
	background: linear-gradient(top, #e74747 0%, #891919 80%);	
	background: -webkit-linear-gradient(top, #e74747 0%, #891919 80%);
	background: -moz-linear-gradient(top, #e74747 0%, #891919 80%);
	background: -o-linear-gradient(top, #e74747 0%, #891919 80%);
}

.search-container button:hover {
    background: linear-gradient(top, #ff1717 0%, #891919 80%);	
	background: -webkit-linear-gradient(top, #ff1717 0%, #891919 80%);
	background: -moz-linear-gradient(top, #ff1717 0%, #891919 80%);
	background: -o-linear-gradient(top, #ff1717 0%, #891919 80%);
}

button.check_history {
	position: absolute;
	width: 95px;
    left: 35px;
    top: 50px;
    padding: 8px;
	z-index: 3;
    background-color: #c00d0d;
    color: white;
    border: none;
    border-radius: 100px;
    cursor: pointer;
	font-size: 12px;
    font-family: 'Nova Square', sans-serif;
    font-weight: bold;
	box-shadow: -4px 2px #5e0000;
	-webkit-box-shadow: -4px 2px #5e0000;
	-moz-box-shadow: -4px 2px #5e0000;
	-o-box-shadow: -4px 2px #5e0000;
	background: linear-gradient(top, #e74747 0%, #891919 80%);	
	background: -webkit-linear-gradient(top, #e74747 0%, #891919 80%);
	background: -moz-linear-gradient(top, #e74747 0%, #891919 80%);
	background: -o-linear-gradient(top, #e74747 0%, #891919 80%);
}

button.check_history:hover {
    background: linear-gradient(top, #ff1717 0%, #891919 80%);	
	background: -webkit-linear-gradient(top, #ff1717 0%, #891919 80%);
	background: -moz-linear-gradient(top, #ff1717 0%, #891919 80%);
	background: -o-linear-gradient(top, #ff1717 0%, #891919 80%);
}

mark {
    background-color: yellow;
    color: black;
    font-weight: bold;
}

#marked mark {
    background-color: orange;
    color: black;
    font-weight: bold;
}

#searchStatus
{
	display: block;
    width: 50px;
    text-align: right;
    position: relative;
    left: 218px;
    top: 8px;
    z-index: 3;
    font-size: 12px;
    font-family: 'Nova Square', sans-serif;
    font-weight: bold;
    color: #252525;
}

.character
{
	position: relative;
    width: 300px;
    top: -80px;
    left: -34px;
	z-index: 1;
}

div#report
{
	position: relative;
    margin: 10px;
	padding: 8px;
    border-radius: 5px;
	font-size: 12px;
    font-family: 'Nova Square', sans-serif;
}

div#report p.title
{
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: bold;
}

div	#report p.text
{
	font-size: 13px;
}

.state_0
{
	background-color: #dbdbdb;
}

.state_1
{
	background-color: #8aff8a;
}

.state_2
{
	background-color: #f86e6e;
}

.shiny
{
	height: 15px;
    text-align: right;
    filter: brightness(0);
	float: left;
}

.background
{
	background-image: url("/images/back.png");
	background-repeat: no-repeat;
  	background-size: cover;
	height: 350px;
}


.slot_1
{
	width: 120px;
    height: 120px;
	position: absolute;
	left: 365px;
    top: 160px;
	-webkit-transform: scaleX(-1);
  	transform: scaleX(-1);
	z-index: 2;
}

.slot_2
{
	width: 120px;
    height: 120px;
	position: absolute;
	left: 200px;
    top: 160px;
	z-index: 2;
}

.slot_3
{
	width: 120px;
    height: 120px;
	position: absolute;
	left: 450px;
    top: 190px;
	-webkit-transform: scaleX(-1);
  	transform: scaleX(-1);
	z-index: 1;
}

.slot_4
{
	width: 120px;
    height: 120px;
	position: absolute;
	left: 110px;
    top: 190px;
	z-index: 1;
}

.slot_5
{
	width: 120px;
    height: 120px;
	position: absolute;
	left: 540px;
    top: 160px;
	-webkit-transform: scaleX(-1);
  	transform: scaleX(-1);
	  z-index: 2;
}

.slot_6
{
	width: 120px;
    height: 120px;
	position: absolute;
	left: 25px;
    top: 160px;
	z-index: 2;
}

.medal_row
{
	width: 630px;
    height: 60px;
	position: absolute;
	bottom: 100px;
	z-index: 3;
}

.obtained
{
	height: 63px;
	float: left;
}

.n_obtained
{
	height: 63px;
	float: left;
	filter: contrast(0.2) grayscale(1);
}