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

img,picture,video,canvas,svg {
	display: inline-block;
	max-width: 100%;
}

body {
	background-image: url("assets/bg.png");
}


/* Scrollbar Styling */

::-webkit-scrollbar {
	width: 0px;
	height: 10px;
}

::-webkit-scrollbar-thumb {
	background: #000;
}

::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0);
}

.hide {
	display:none;
}

	.pc {
		display: none;
		  image-rendering: optimizeSpeed;
		  image-rendering: -moz-crisp-edges;
		  image-rendering: -webkit-optimize-contrast;
		  image-rendering: optimize-contrast;
		  image-rendering: pixelated; 
		  -ms-interpolation-mode: nearest-neighbor; 
		  text-align: center;
	}
	
	.pc:target {
		display: block ;
	}


	.pc-nav {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height:57px;
	}
	
	.pc-title {
		width: 336px;
	}
	
	.pc-title h2 {
		text-align: center;
		font-size: 24px;
		line-height: 57px;
		color: white;
		font-family: Monospace;
		text-shadow: 3px 3px 0px #283030;
		margin:0;
	}

	.pc-box {
		background-position: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 27px;
		width: 468px;
		height: 342px;
		
		display:flex;
		justify-content:center;
		
		border-image-slice: 27 3 15 3;
		border-image-width: 27px 3px 15px 3px;
		border-image-outset: 27px 3px 15px 3px;
		border-image-repeat: stretch stretch;
		border-image-source:
		url("assets/pc/box-border-2.png");
	}
	
	.pc-grid {
		display: grid;
		grid-template-columns: repeat(6, 76px);
		grid-template-rows: repeat(5, 1fr);
	}
	
	.pc-slot {
		height: 48px;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	img.pc-img {
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
	}
	
	

/* PC Styles */
	
	.grass .pc-title h2 {
		background-image: url('assets/pc/grass-title-2.png');
	}

	.grass .pc-box {
		background-image: url("assets/pc/grass-bg-2.png");
	}


/** LIGHTBOX CODE **/


/* Inspired by https://codepen.io/gschier/pen/kyRXVx */

body.no-scroll {
	overflow: hidden;
}

.lightbox {
	display:flex;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Default to hidden */
	display: none;
	/* Overlay entire screen */
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* Translucent background */
	background: rgba(0, 0, 0, 0.8);
	color: #000;
}

.lightbox a {
	color: #000;
	font-decoration: none;
}

/* Unhide the lightbox when it's the target */

.lightbox:target {
	display: block;
}

/* Code for full lightbox (description+) */

.lightbox .lightbox-objects {
	display: flex;
	align-items: start;
	justify-content: center;
	/* The min height is JUST slightly larger than 100 view height because it makes it so the box is technically always scrollable- even if it doesn't have a tall enough image / long enough description. This makes it so you overscroll-behavior: contain kicks in and stops the body from scrolling when supported. */
	min-height: calc(100vh + 1px);
}

/* ---POKEMON INFO--- */
.pokemon-info {
	width: 466px;
	text-align: center;
	margin-top: 32px;
	padding:10px;
	background-image: url("assets/bg2.png");
	border: #bdbdbd 6px solid;
}

.grid-col-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.pokemon-info .info-box {
		height: fit-content;
		color: #5a5252;
		border-image-slice: 18 3 15 3 fill;
		border-image-width: 18px 3px 15px 3px;
		border-image-repeat: stretch stretch;
		border-image-source:
		url("assets/pc/info-box-border.png");
		padding: 18px 3px 15px;
		font-family: monospace;
		font-weight: bold;
		font-size: 1.5em;
}

.pokemon-info .info-text {
	padding: 6px;
}

.pokemon-info .info-types {
    margin-top: 4px;
}

.pokemon-info .info-types img:nth-child(2) {
    margin-left: 4px;
}

.pokemon-info .info-img {
	padding-bottom: 6px;
}

.margin-top-6 {
	margin-top: 6px;
}

.shiny-star {
	color: #ff3939;
	font-size: 0.85em;
	margin-left: 4px;
}

.pokemon-info .dark-bg {
	background-color: #d6d6d6;
}