html {
  text-align: center;
  color: white;
  background-color: rgb(20, 20, 20);
  height: 100vh;
  height: 100%
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: shown;
  margin: 0px;
}

.home {
  position: absolute;
  top: 16px;
  left: 16px;
}

.thumbnail { 
display:block; 
  opacity: 75%;
  height: 75%;
  width: 75%;
z-index:999; 
cursor: pointer; 
-webkit-transition-property: all; 
-webkit-transition-duration: 0.3s; 
-webkit-transition-timing-function: ease; 
transition-property: all; 
transition-duration: 0.3s; 
transition-timing-function: ease; 
} 


/*change the number below to scale to the appropriate size*/ 
.thumbnail:hover { 
height: 100%;
  width: 100%;
  opacity: 100%;
}

.home { 
  opacity: 50%;
  height:32px;
  width: 32px;
z-index:999; 
cursor: pointer; 
-webkit-transition-property: all; 
-webkit-transition-duration: 0.3s; 
-webkit-transition-timing-function: ease; 
transition-property: all; 
transition-duration: 0.3s; 
transition-timing-function: ease; 
} 

/*change the number below to scale to the appropriate size*/ 
.home:hover { 
height: 48px;
  width: 48px;
  opacity: 100%;

}


@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }


body {
    
    opacity:0;  /* make things invisible upon start */
    animation:fadeIn ease-in 0.2s; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */

    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

    animation-duration:0.5s;
    animation-delay: 0s
}

h {
  size: 64px;
}

#cards {
  display: flex;
  flex-wrap: wrap;
  height: 100vhh;
  gap: 8px;
}

.cent {
    display: flex;
  justify-content: center;
  align-items: center;
}

.centerplus {
    display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
}

overlay {
  height: 100%;
}
.card {
  border-radius: 10px;
  border: 3px solid rgb(227, 227, 227);
  background-color: gradient(rgb(33, 33, 33), rgb(44, 44, 44));
  height: 260px;
  width: 300px;
      display: flex;
  justify-content: center;
  align-items: center;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}