:root {
  --box-sizing: border-box;
  --cursor: url(https://cur.cursors-4u.net/games/gam-13/gam1282.cur), auto !important;  /* poke ball */
  --cursor2: url(https://cur.cursors-4u.net/games/gam-13/gam1284.cur), auto !important; /* master ball */
  --cursor3: url(https://cur.cursors-4u.net/games/gam-13/gam1301.cur), auto !important; /* dusk ball */
  --cursor4: url(https://cur.cursors-4u.net/games/gam-13/gam1288.cur), auto !important; /* net ball */
  cursor: var(--cursor);
}

@font-face {
  font-family: 'PKMN';
  src: url('https://mrsazden.neocities.org/fonts/PKMN.ttf');
}

body {
	background-image: url('https://i.postimg.cc/T175BQtT/1699671232418586.png');
	background-size: cover;
	background-position: bottom;
	background-attachment:fixed;
	background-repeat: no-repeat;
	color: #fff;
	font-family: 'PKMN', sans;
	overflow-y: auto;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
}

#top {
	text-align: center;
	color: #000;
	max-width: 800px;
	margin: auto;
}

#main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

.gen-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

.evo-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 3px;
}

.eevee-evo-group { /* wrapping to 4 boxes per row */
	max-width: 930px;
}

.box {
	box-sizing: border-box;
	border: 5px double black;
	color: black;
	width: 220px;
	display: flex;
	flex-direction: column;
	margin: 3px;
	padding: 3px;
	background-color: rgba(255, 255, 255, 0.5);
	background-size: cover;
}

/* POKEMON NAMES */
.box .name {
	position: relative;

	text-align: center;
	line-height: 0.5;
	font-size: 8px;
	overflow: hidden;
	-webkit-font-smoothing: none;
	font-smooth: never;
}

.box .name p {
	clear: both;
}

.box .name img:nth-of-type(2) {
	position: absolute;
	top: 0;
	right: 0;
	float: none;
}

.box img {
	box-sizing: border-box;
	margin: 2px;
}

.pics {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: space-between;
	flex: 1;
	gap: 2px;
}

.pics img {
	order: 1;
	margin: 0;
	max-width: 60px;
	height: auto;
}

.pics::after {
	content: "";
	order: 2;
	flex-basis: 100%;
	width: 0;
}

.pics img:last-child {
	order: 3;
	margin-top: 4px;
	max-width: none;
}

.collapsible {
	background-color: #F8F8F8;
	outline: 3px ridge #7DBAE3;
	border-radius: 4px;
	border: none;
	color: #565655;
	text-align: center;
  cursor: var(--cursor2);
  padding: 10px;
  margin: 5px auto;
  width: 35%;
  display: block;
}

.active, .collapsible:hover {
	background-color: #dddddd;
}

.content {
	max-height: 0;
	overflow: hidden;
}

footer{
  position: sticky;
  padding: 10px;
  bottom: 0;

  a {
    color: white;
    text-decoration: none;
  }

  a:hover{
    color: black;
    cursor: var(--cursor3)
  }
}

.back-to-top {
	display: inline-block;
	background-color: #F8F8F8;
	outline: 3px ridge #7DBAE3;
	border-radius: 4px;
	color: #565655;
	text-align: center;
	cursor: var(--cursor2);
	padding: 10px;
}

.back-to-top:hover {
	background-color: #dddddd;
	color: #565655;
}