@import url('https://fonts.googleapis.com/css?family=Cherry Bomb One|Itim|Dongle');
@import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
  margin: 0px;
  height: 1000px;;
  text-align: center;
  overflow-y: auto;
  background-color: #ffffff;
  cursor: url(https://somniumsaturnia.neocities.org/pxls/Curs01.png), default;
  overflow-x: hidden;
  align-items: center;
}


#species {
  position: absolute;
  z-index: 90;
  width: 820px;
  height: auto; 
  left: 5px;
  text-align: center;
}


.species-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 20px; 
  row-gap: 30px; 
  max-width: 800px; 
}
.species-container {
  width: 90px;
  height: 90px;
  flex: 0 0 auto; 
  
}
.container {
  position: relative;
  width: 100px;
  height: 100px;
}


.container a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-decoration: none;
  width: 100%;
  height: 100%;
}


.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #f0bc00;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );

  
  transform: scale(1.5);
  transform-origin: center;
}

.overlay2 {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #ca9dfd;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );

  
  transform: scale(1.5);
  transform-origin: center;
}
.container:hover .overlay {
  opacity: 1;
}
.container:hover .overlay2 {
  opacity: 1;
}


.image {
  max-width: 90px;
  height: auto;
  z-index: 2;
}


.species-name {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-family: "Cherry Bomb One", sans-serif;
  color: white;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
}

.container:hover .species-name {
  opacity: 1;
}


 


#frame {
  position: absolute;
  z-index: 90;
  width: 800px; 
  top: 280px; 
  left: 20px; 
  height: auto;
  margin: 0;
  overflow: hidden;
  border: none;
  margin-bottom: 20px;
  
}

iframe {
    border: none;
  width: 100%;
  height: 800px;
  overflow-y: scroll;
  align-items: center;
  overflow-x: hidden;
}
.iframe-noscroll {
  overflow: hidden;
  height: auto;
}