* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	font-family: sans-serif;
	justify-content: center;
}

.pokemon {
	align-items: flex-end;
	display: flex;
	height: 500px;
	margin: 50px;
	width: 800px;
}

.left-container,
.right-container {
	border: 3px solid black;
	width: 50%;
}

.right-container {
	border-left: none;
}

.left-container-top-section {
	background: #E71D23;
	border-bottom: 3px solid black;
	display: flex;
	height: 50px;
	padding: 10px;  
}

.top-section-blue {
	background: radial-gradient(farthest-corner at 10px 10px, white, #369CD4, #369CD4);
	border: 2px solid white;
	border-radius: 50%;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.5);
	height: 30px;
	width: 30px;
}

.top-section-small-btns {
	display: flex;
	margin: 0 25px;
}

.top-section-red,
.top-section-yellow,
.top-section-green {
	border: 1px solid black;
	border-radius: 50%;
	height: 10px;
	width: 10px;
	margin-right: 5px;
}

.left-container-main-section {
	display: flex;
	height: calc(100% - 50px);
}

.left-container-main {
	background: #E71D23;
	height: 100%;
	width: 500px;
	padding:25px;
}

.main-section-white {
	background: #dedede;
	border: 3px solid black;
	box-shadow: inset 0 0 3px 3px rgba(0,0,0,.3);
	height: 325px;
}

.main-section-black {
	background: black;
	height: calc(100% - 50px);
	margin: 25px;
	padding: 10px;
	width: calc(100% - 50px);

}

.main-screen {
	border-radius: 15px;
	height: 100%;
	padding: 15px;
}

.screen-header {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.pokemon-name {
	color: white;
	font-size: 25px;
	font-weight: bold;
}

.pokemon-id {
	color: rgba(0,0,0,.5);
	font-size: 20px;
}

.screen-image {
	display: flex;
	justify-content: center;
}

.pokemon-front-image,
.pokemon-back-image {
	height: 96px;
	width: 96px;
}

.screen-description {
	display: flex;
	height: 100px;
	justify-content: space-around;
}

.screen-stats {
	background: rgba(0,0,0,.3);
	border-radius: 5px;
	color: white;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	padding: 20px 15px;
}

.pokemon-types {
	height: 100%;
	padding: 5px;
}

.pokemon-type-one,
.pokemon-type-two {
	background: rgba(255,255,255,.3);
	border-radius: 25px;
	display: block;
	margin-bottom: 10px;
	padding: 10px;
	text-align: center;
}

.left-container-controllers {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 10px 25px 0;
}

.controllers-pad {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);

}

.pad-cell {
	background: black;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.3);
	height: 25px;
	width: 25px;
}

.pad-cell.top {
	border-left: 1px solid dimgrey;
	border-radius: 5px 5px 0 0;
	border-right: 1px solid dimgrey;
	border-top: 1px solid dimgrey;
	grid-column: 2 / span 1;
	grid-row: 1 / span 1;
}

.pad-cell.left {
	border-bottom: 1px solid dimgrey;
	border-left: 1px solid dimgrey;
	border-radius: 5px 0 0 5px ;
	border-top: 1px solid dimgrey;
	grid-column: 1 / span 1;
	grid-row: 2 / span 1;
}

.pad-cell.middle {
	grid-column: 2 / span 1;
	grid-row: 2 span 1;
}

.pad-cell.right {
	border-bottom: 1px solid dimgrey;
	border-radius: 0 5px 5px 0;
	border-right: 1px solid dimgrey;
	border-top: 1px solid dimgrey;
	grid-column: 3 / span 1;
	grid-row: 2 / span 1;
}

.pad-cell.bottom {
	border-bottom: 1px solid dimgrey;
	border-left: 1px solid dimgrey;
	border-right: 1px solid dimgrey;
	border-radius: 0 0 5px 5px;
	grid-column: 2 / span 1;
	grid-row: 3 / span 1;
}

.controllers-buttons {
	display: flex;
	justify-content: space-around;
	width: 100%;
}

.buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	background: black;
	border: 1px solid dimgrey;
	border-radius: 50%;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.3);
	color: rgba(255,255,255,.75);
	height: 35px;
	width: 35px;
}

.buttons:first-child {
	margin-top: 5px;
}

.buttons:last-child {
	margin-top: -5px;
}

.left-container-right {
	display: flex;
	background: #E71D23;
	flex-direction: column;
	justify-content: space-between;
	border-left: 3px solid black;
	width: 50px;
}

.left-container-hinge {
	background: linear-gradient(to right, #7F100F, #E71D23, 
	#E71D23, #7F100F);
	height: 75px;
	width: 100%;
}

.left-container-hinge:first-child {
	border-bottom: 3px solid black;
}

.left-container-hinge:last-child {
	border-top: 3px solid black;
}

.top-section-red {
	background: #7F100F;
}

.top-section-yellow {
	background: #EDF18E;
}

.top-section-green {
	background: #33915A;
}

.right-container {
	background: #E71D23;
	height: calc(100% - 50px);
	padding: 25px;
	width: calc(50% - 50px);
}

.right-container-black {
	background: black;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.3);
	height: 300px;
	padding: 10px;
}

.right-container-screen {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	background: #43B0F2;
	border-radius: 15px;
	height: 100%;
	padding: 15px 15px 0;
}

.list-item {
	display: flex;
	align-items: center;
	color: white;
	cursor: pointer;
	font-size: 12px;
	height: 25px;
	overflow: hidden;
	padding-left: 5px;
	width: 50%;
}

.list-item:hover {
	background: #85cbf2;
	color: black;
}

.list-item:active {
	background: #1280f2;
	color: white;
}

.right-container-buttons {
	display: flex;
	justify-content: space-around;
	margin-top: 25px;
}

.left-button,
.right-button {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #DEDEDE;
	border-radius: 3px;
	border: 2px solid black;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.3);
	cursor: pointer;
	font-weight: bold;
	height: 30px;
	width: 100px;
	justify-content: center;
	text-transform: uppercase;
}

.left-button:hover,
.right-button:hover {
	background: white;
}

.left-button:active,
.right-button:active {
	box-shadow: inset 0 0 2px 2px rgba(0,0,0,.3);
}

.hide {
	display: none;
}


.normal {
	background: #BABAAE;
}

.fighting {
	background: #A75543;
}

.flying {
	background: #78A2FF;
}

.poison {
	background: #A95CA0; 
}

.ground {
	background: #EECC55;
}

.rock {
	background: #CCBD72;
}

.bug {
	background: #C2D21E;
}

.ghost {
	background: #7975D7;
}

.steel {
	background: #C4C2DB;
}

.fire {
	background: #FA5643;
}

.water {
	background: #56ADFF;
}

.grass {
	background: #8CD750;
}

.electric {
	background: #FDE139;
}

.psychic {
	background: #FA65B4;
}

.ice {
	background: #96F1FF;
}

.dragon {
	background: #8673FF;
}

.dark {
	background: #8D6855;
}

.fairy {
	background: #F9AEFF;
}