@font-face {
    font-family: pokerman;
    src: url(https://file.garden/ZnGZOv7aF21WeO00/Fakemon/Pokemon%20GB.ttf);
}

html{
scroll-behavior: smooth;
font-family: pokerman !important;
margin: auto;
}

body {
font-family: pokerman !important;
background: linear-gradient(
  to bottom,
  #2e6a62,
  #2e6a62 50%,
  #5caba6 50%,
  #5caba6
);
background-size: 100% 10px;
position: relative;
max-width: 77vw;
padding: 5rem;
margin: auto;
}

blockquote {
border-radius: 10px;
padding: 2px;
background: linear-gradient(
  to bottom,
  rgba(255, 188, 132, 0.49),
  rgba(255, 188, 132, 0.49) 50%,
  rgba(255, 151, 82, 0.49) 50%,
  rgba(255, 151, 82, 0.49)
);
border: 5px;
border-top-color: rgba(255, 156, 48, 0.71);
border-left-color: rgba(255, 156, 48, 0.71);
border-right-color: rgba(255, 85, 0, 0.71);
border-bottom-color: rgba(255, 85, 0, 0.71);
border-style: solid;
color: #00241a;
text-shadow: 2px 2px whitesmoke;
font-size: 18px;
}

rgba(255, 156, 48, 0.71)

p {
color: #00241a;
font-size: 18px;
text-shadow: 2px 2px whitesmoke;
}

h1, h4 {
text-align: center;
color: #d63838;

}

h3,h2{
color: #d63838;

}


enf {
text-shadow: 0 0 2px ;
animation: Glow 5s infinite;
}


a {
text-decoration: none;
color: aliceblue;
position: relative;
z-index: 2;
}

a:hover {
color: red;
text-shadow: 2px 2px darkred;

}

.spinny {
display: flex;
justify-content: center;
align-items: center;
position: relative;
flex: 30%;
transition: 2s  ease-in-out;
z-index: 2;
}

.spinny:hover {
cursor: default;
transform: rotate(360deg); 

}

.container {
display:flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 20px;
padding: 30px;
margin: auto;

}

.container > div {
display: flex;
flex-direction: column;
flex: 1%;
flex-wrap: wrap;
border: 1px solid rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.301);
box-shadow:  .2em .2em .5em rgb(0, 0, 0) ;
border-radius: 10px;
padding: 10px;
}


 .img > a, img {
padding: 5px;
transition: .2s;
}

.img img:hover {
transform: scale(1.05);

}

.insert {
  display: block;
  margin: auto;
  background-color: #ebe5cd;
  min-width: 45%;
  max-width: 90%;
  height: auto;
  padding: 3rem;
  border-radius: 5px;
  box-shadow: inset .4em .4em  rgb(199, 172, 123) , inset -.4em -.4em  rgb(199, 172, 123);
  min-width: 580px;
}


iframe{
  border:none;
}

/* --- */

.imageflex { 
  display: flex; 
  justify-content: center;
  align-items: center;
}
.imageflexcontent { 
margin-left: 2vw; 
margin-top: 0; 
  
}

.imageflexcontentV { 
margin-left: 13vw; 
margin-top: 0; 
}


#pkdex{display: inline-block;
cursor: pointer;
}
#pkdex input,
#pkdex input:checked + img, 
#pkdex input:not(:checked) + img + img{
display: none;
}

.containerP {
  padding-left: 7rem;
  padding-right: 7rem;
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax( 16rem,1fr ) );
  justify-items: center;
  column-gap: 46px;
}

.containerP > div {
  background-color: rgba(255, 188, 132, 0.49);
  margin: 10px;
  border-radius: 10px;
  border: 10px;
  border-color: rgba(255, 180, 98, 0.81);
  background:
    linear-gradient( to bottom,
      rgba(255, 188, 132, 0.49),
      rgba(255, 188, 132, 0.49) 50%,
      rgba(255, 151, 82, 0.49) 50%,
      rgba(255, 151, 82, 0.49) );
  background-size: 100% 10px;
  border-style: solid;
  aspect-ratio: 1/1;
  text-align: center;
  max-height: 328px;
  width: 100%;
  overflow: clip;
}

.containerP > div > blockquote { background-color: rgba(255, 188, 132, 0.49); }

label >img {
height: 13rem;
margin-top:-10px;
}

/*CSS FOR THE POPUPS*/

button{
font-family: pokerman;
margin: 1rem 0rem 1.5rem 0rem;
width: 75%;
border-radius: 10px;
padding: 10px 5px !important;
background: linear-gradient(
  to bottom,
  rgba(255, 188, 132, 0.49),
  rgba(255, 188, 132, 0.49) 50%,
  rgba(255, 151, 82, 0.49) 50%,
  rgba(255, 151, 82, 0.49)
);
background-color: rgba(255, 188, 132, 0.49);
border: 5px;
border-top-color: rgba(255, 156, 48, 0.71);
border-left-color: rgba(255, 156, 48, 0.71);
border-right-color: rgba(255, 85, 0, 0.71);
border-bottom-color: rgba(255, 85, 0, 0.71);
border-style: solid;
color: #00241a;
text-shadow: 2px 2px whitesmoke;
font-size: 18px;
transition-duration: 0.1s;
}

button:hover{
background-color: rgba(255, 246, 190, 0.49);
font-family: pokerman;
transform: translateY(-2px);

}

button:active{
font-family: pokerman;
color: whitesmoke;
text-shadow: 2px 2px black;
background-color: rgba(255, 96, 0, 0.78);
transform: translateY(5px);
border-bottom-color: rgba(255, 156, 48, 0.71);
border-right-color: rgba(255, 156, 48, 0.71);
border-top-color: rgba(255, 85, 0, 0.71);
border-left-color: rgba(255, 85, 0, 0.71);
}

.popupbox{
font-weight: 900;
padding: 10px 30px;
background: linear-gradient(
  to bottom,
  #4993db,
  #4993db 50%,
  #8ac2e0 50%,
  #8ac2e0
);
border: 7px;
border-style: solid;
border-radius: 10px;
border-top-color: #7cadd9;
border-left-color: #7cadd9;
border-right-color: #3d7ba5;
border-bottom-color: #3d7ba5;
color: whitesmoke; text-shadow: 2px 2px darkblue;
transition-duration: 0.6s;
}

  

.popupbox > p{color: whitesmoke; text-shadow: 2px 2px darkblue; }

}