@charset "utf-8";


.sides {
  	font-family: 'Dubai', sans-serif;
    font-weight: bold;
	margin: 0;
    background-image: url("Pattern.png.jpeg");
    background-size: cover repeat;
    
}

body{
  	background:#FBFBF9;
  	font-family: 'Dubai', sans-serif;
    font-weight: bold;
	margin: 0 auto;

}

details {
    margin-bottom: 20px;
    border-radius: 40px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

summary {
  list-style: none;
  padding: 15px 20px;
  font-weight: bold;
  font-size: 50px;
  cursor: pointer;
  color: #373737;
}


p {
  padding: 5px 20px 15px;
}


.tier-s { 
    color: gold; 
}
.tier-a { 
    color: #4CAF50; 
}
.tier-b { 
    color: #2196F3; 
}
.tier-c { 
    color: #f44336; 
}


.generation {
    display:flex;
  	justify-content:center;
  	gap:3%;
  	margin-bottom:50px;
    object-fit: contain;
}

.generationCard {
    width: 400px;
  	height: 400px;
  	border-radius: 90px;
  	display: flex;
  	justify-content: center;
  	align-items: flex-end;
  	overflow: hidden;
  	box-shadow: 10px 10px 20px rgba(0,0,0,0.15) inset;
  	transition: 0.2s;
    margin: auto;
	margin-bottom: 30px;
	max-width: none;
    object-fit: contain;
}

.higher {
    transform: scale(1.5);
    position: relative;
    top: -40px;
}

.style-1 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Center container */
.page {
  max-width: 75%;
  margin: 0 auto; /* centers it */
  background: white;
}

/* Content area */
.content {
  padding: 40px;
}

/*header*/
h1{
	font-size: 60px;
    text-decoration: none;
    color: white;
}

span{
    color: #9F9F9F;
    font-style: italic;
    
}

a{
    outline: none;
    border: 0;
}

a:link { 
  text-decoration: none; 
} 
a:visited { 
  text-decoration: none; 
} 
a:hover { 
  text-decoration: none; 
} 
a:active { 
  text-decoration: none; 
}


header{
  	background:#373737;
  	color:white;
  	display:flex;
  	justify-content:space-between;
  	align-items:center;
  	padding:15px;
    height: 120px;
    
    
/*	position: sticky;
	top: 0; 
doesnt work as expected!	*/ 
} 

.logo {
  	display:flex;
  	align-items:center;
  	gap:10px;
}

.pokeball img{
	width: 160px;
	
}

nav a{
  	color:white;
  	text-decoration:none;
  	margin-left:25px;
	opacity: 70%;
	font-size: 30px;
	font-weight: bold;
}

nav a:hover{
  	text-decoration:underline;
}
	
/* TITLE */

main{
  	text-align:center;

}

h2{
  	font-size:75px;
  	margin-bottom:40px;
	color: #373737;
    
}

/* QUOTE */

blockquote {
  font-size: 24px;
  font-style: italic;
  color: #373737;
  border-left: 5px solid #373737;
  padding-left: 15px;
}

/* STYLING TABLES */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  padding: 12px;
  border: 2px solid #373737;
  text-align: center;  
}

td {
    color: #373737;    
    
}

th {
  background: #373737;
  color: white;
    
}

/* LISTS */
ul {
    list-style-type: square;
    padding-left: 20px;
    color: #373737;
    font-style: oblique;
}

/* CARDS */

.cards {
  	display:flex;
  	justify-content:center;
  	gap:3%;
  	margin-bottom:50px;
    object-fit: contain;
}

.card img {
  	width: 100;
  	height: auto;
  	object-fit: cover;
  	transform: translateY(10px);
}

.fire img{
	transform: scale(1.42);
	position: relative;
	top: 25px ;
	left: 20px ;
    
}

.water img{
	transform: scale(1.35);
	position: relative; 
	top: -48px;
	left: 5px;
}

.grass img{
	transform: scale(1.35);
	position: relative; 
	top: -20px;
	left: 30px;
}

.gencard img {
  	width: 100;
  	height: auto;
  	object-fit: cover;
  	transform: translateY(10px);
}

.genfire img{
	transform: scale(0.4);
	position: relative;
	top: 300px ;
}

.genwater img{
	transform: scale(0.4);
	position: relative; 
	top: 330px;
}

.gengrass img{
	transform: scale(0.4);;
	position: relative; 
	top: 300px;
}

.gengrasshigher img{
	transform: scale(0.8);;
	position: relative; 
	top: 60px;
}

.genwaterhigher img{
	transform: scale(0.5);
	position: relative; 
	top: 25vh;
    left: 40px;
}

.generationImg {
    transform: scale(1);
	position: relative; 
	top: -20px;
	left: 30px;
    
}

.greninja img {
    transform: scale(1.2);
	position: relative; 
	top: 60px;
	left: 50px;
}

.type-card {
  	width: 360px;
  	height: 490px;
  	border-radius: 55px;
  	display: flex;
  	justify-content: center;
  	align-items: flex-end;
  	overflow: hidden;
  	box-shadow: 10px 10px 20px rgba(0,0,0,0.15) inset;
  	transition: 0.2s;
	margin-bottom: 30px;
	max-width: none;
    
}

.typebadgegrass{
    background: #3fa029;
    border-radius: 90;
}


.type-card:hover{
  	transform:scale(1.05);
}

.generationCard:hover{
  	transform:scale(1.05);
}

.type p{
  	margin:10px;
  	font-weight:bold;
	font-size: 40px;
	color: #373737;
}

.generation p{
  	margin:10px;
  	font-weight:bold;
	font-size: 40px;
	color: #373737;
    
}

.type img{
	mix-blend-mode: multiply;
	object-fit: contain;
	max-width: none;
    
}

/* TYPE BACKGROUND COLORS */

.grass{
  background:linear-gradient(#29FF00,#A8E063);
}

.fire{
  background:linear-gradient(#FF2E2E,#FFA751);
}

.water{
  background:linear-gradient(#77ECFF,#9BD3F7);
}


.gengrass{
  background:linear-gradient(#29FF00,#A8E063);
}

.genfire{
  background:linear-gradient(#FF2E2E,#FFA751);
}

.genwater{
  background:linear-gradient(#77ECFF,#9BD3F7);
}

/* INFO BOX */

.info-box{
  	width:90%;
	height: auto;
  	margin:auto;
	background:white;
	padding:30px;
 	border-radius:60px;
 	box-shadow: 6px 6px 20px rgba(0,0,0,0.15) inset , 6px 6px 20px rgba(0,0,0,0.15) ;
 	text-align:left;
	font-size: 26px;
    margin-bottom: 5%;
}


.info-box h3{
  	margin-bottom:10px;
	color: #373737;
}

.info-box p{
  	color:#373737;
  	line-height:1.6;
    
}

/* FOOTER */

.youtube{
	margin: auto;
	align-content: center;
	width: 100%;
    height: 100%;
}

iframe{
	margin: auto;
	align-content: center;
	width: 25%;
    height: 250px;
    margin-bottom: 2vh;
    border-style: dotted;
    border-color: red;
    border-radius: 30px;
    border-width: medium;
}

iframe:hover{
	margin: auto;
	align-content: center;
	transform: scale(1.05);
	transition: 0.2s;
    margin-bottom: 2vh;
}

.youtube p{
	margin: 1%;
	font-weight: bold;
	font-size: 30px
}

footer{
	background: #373737;
  	color:#FBFBF9;
  	text-align:center;
  	padding:1%;
}