@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Roboto&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap');

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

html {
    height: 100%;
    background: linear-gradient(to right, rgb(197, 230, 236), rgb(239, 187, 230));
}

body {
   padding-bottom:60px;
   font-family: 'Rajdhani', sans-serif;
	color: white;
	margin: 0;
}

main {
    display: block;
    text-align: center;
    width: 100%;
    height: auto;
    align-self: center;
    margin-top: 8%;    
}

#btn {
    background: #35d8a7;
    background-image: -webkit-linear-gradient(top, #35d8a7, #2980b9);
    background-image: -moz-linear-gradient(top, #35d8a7, #2980b9);
    background-image: -ms-linear-gradient(top, #35d8a7, #2980b9);
    background-image: -o-linear-gradient(top, #35d8a7, #2980b9);
    background-image: linear-gradient(to bottom, #35d8a7, #2980b9);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: inherit;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    margin-bottom: 20px;
}







.container {
	padding: 40px;
	margin: auto;
}

h1 {
	text-align: center;
	font-size: 54px;
}

/*.pokedex {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	grid-gap: 20px;
	padding-inline-start: 0;
}*/

.card {
	list-style: none;
	padding: 40px;
	color: #222;
	text-align: center;
	border-radius: 20px;
	position: relative;
}

.card::after {
	content: "";
  display: block;
  width: 50%;
  height: 45%;
  border-radius: 100%;
  background-color: #fff;
  opacity: .7;
  position: absolute;
  top: 15%;
  left: 25%;
}

.steel {
	background-color: #f4f4f4;
}

.fire {
	background-color: #FDDFDF;
}

.grass {
	background-color: #DEFDE0;
}

.electric {
	background-color: #FCF7DE;
}

.water, .ice {
	background-color: #DEF3FD;
}

.ground {
	background-color: #f4e7da;
}

.rock {
	background-color: #d5d5d4;
}

.fairy {
	background-color: #fceaff;
}

.poison {
	background-color: #98d7a5;
}

.bug {
	background-color: #f8d5a3;
}

.dragon {
	background-color: #97b3e6;
}

.psychic {
	background-color: #eaeda1;
}

.flying {
	background-color: #F5F5F5;
}

.fighting {
	background-color: #E6E0D4;
}

.normal {
	background-color: #F5F5F5;
}

.card:hover {
	animation: bounce 0.5s linear;
}

.card-title {
	text-transform: capitalize;
	margin-bottom: 0px;
	font-size: 32px;
	font-weight: normal;
	position: relative;
	z-index: 2;
}

.card-subtitle {
	margin-top: 5px;
	color: #666;
	font-weight: lighter;
	position: relative;
	z-index: 2;
}

.card-image {
	height: 180px;
	position: relative;
	z-index: 2;
}

@keyframes bounce {
	20% {
			transform: translateY(-6px);
	}
	40% {
			transform: translateY(0px);
	}

	80% {
			transform: translateY(-2px);
	}
	100% {
			transform: translateY(0);
	}
}

/* footer */
footer {
    position: absolute; 
    display: flex;
    bottom: 0;
    padding: 15px;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: space-between; 
    color:  #0d253f;
    
}

#logo > img {
    width: auto;  
}
#logo > p {
    margin-bottom: 5px;
}
#platlab{
    margin: 10px;
}
#platlab > p > a{
    color:  #0d253f
}