* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
background: radial-gradient(
  circle at center,
  #11CFF8 0%,   
  #8B8B8B 15%,   
  #787876 30%,    
  #A2614D 50%,
  #383838 70%, 
  #001124 85%,   
  #010302 100% 
);

}
@font-face {
  font-family: font;
  src: url(fonts/sf-pro-text_regular.woff2);
}
@font-face {
  font-family: dark;
  src: url(fonts/PlayfairDisplay-ExtraBold.ttf);
}
@font-face {
  font-family: archivo;
  src: url(fonts/Archivo-Regular.ttf);
}
@font-face {
  font-family: kanit;
  src: url(fonts/Kanit-MediumItalic.ttf);
}
@font-face {
  font-family: figtree;
  src: url(fonts/Figtree-Medium.ttf);
}
@font-face {
  font-family: nue;
  src: url(fonts/NeueMachina-Light_gwWCZxVuQl.ttf);
}

#main {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  font-family: dark;
}

.choose {
  width: 100%;
  margin: 20px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.choose img {
  width: 80%;
  height: 90%; 
  object-fit: cover;
  object-position: top;
  border-radius: 15px;
}

.choose h1 {
  color: white;
  font-size: 50px;
  text-shadow: 2px 2px 8px black;
  background: rgba(0, 0, 0, 0.4);
  padding: 10px 20px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 40px;
  font-family: kanit;
  text-transform: uppercase;
  font-weight: 900;
}


.cards {
  height: 330px;
  width: 300px;
  margin: 30px 30px;
  border-radius: 15px;
  overflow: hidden;
  font-weight: 100;
  font-size: 15px;
  position: relative;
}
.cards img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 15px;
}
.cards .bottom h2 {
  color: white;
}
.cards h3 i {
  color: white;
  font-size: 20px;
}

.bottom {
  height: 40%;
  width: 100%;
  background: linear-gradient(transparent, black);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 80px;
  position: relative;
  bottom: -40%;
  left: 0;
  transition: bottom ease 0.5s;
  border-radius: 0px 0px 20px 20px;
}
.fill {
  display: none;
}

.cards:hover .bottom {
  position: relative;
  bottom: 40%;
  border-radius: 0px 0px 20px 20px;
  padding-top: 30px;
}

.default:hover {
  display: none;
}

.default:hover + .fill {
  display: inline;
}

.space{
  height: 50px;
  width: 100%;
  background-color: transparent;
}

.card2 img{
  object-position: center;
}
.card6 img{
  object-position: bottom;
}
.card7 img{
  object-position: top;
}

.cards:hover {
  height: 331px;
  width: 301px;
  margin: 30px 30px;
  border-radius: 15px;
  overflow: hidden;
  font-weight: 100;
  font-size: 15px;
  position: relative;
  border: 5px solid white ;
}
.cards:hover img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 15px;
}

.card2:hover img{
  object-position: center;
}
.card6:hover img{
  object-position: bottom;
}
.card7:hover img{
  object-position: top;
}
.card5:hover img{
  object-position: top;
}

.card1 .bottom h2 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 25px;
}
.card2 .bottom h2 {
  font-family: figtree;
  font-weight: 100;
}
.card3 .bottom h2 {
  font-family: nue;
  font-weight: 900;
}
.card4 .bottom h2 {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.card5 .bottom h2 {
  font-family: font;
}
.card6 .bottom h2 {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.card7 .bottom h2 {
  font-family: archivo;
}
.card8 .bottom h2 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}