@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&display=swap'); * { margin:0; padding:0; box-sizing:border-box; font-family: "Lobster Two", serif; } .navbar { width: 100%; height:10rem; background: hsla(166, 100%, 50%, 1); background: linear-gradient(90deg, hsla(166, 100%, 50%, 1) 44%, hsla(111, 100%, 50%, 1) 100%); background: -moz-linear-gradient(90deg, hsla(166, 100%, 50%, 1) 44%, hsla(111, 100%, 50%, 1) 100%); background: -webkit-linear-gradient(90deg, hsla(166, 100%, 50%, 1) 44%, hsla(111, 100%, 50%, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#00FFC3", endColorstr="#26FF00", GradientType=1 ); padding:1rem 0; display:flex; justify-content:space-between } .navbar a{ text-decoration:none; font-size:1.62rem; } .navbar a:hover{ color:#BD0052; text-decoration:underline; }
.card-container{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:1.25rem;
  flex-wrap:wrap;
  padding:1.25rem;
}
.card{
  width:22.5rem;
  background-color:#e5989b;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0px 4px 20px rgba(0,0,0,0.5);
  transition:transform 0.3s ease,box-shadow .3s ease;
  cursor:pointer;
}
.vid-box{
  position:relative;
  width:100%;
  padding-top:56.25%;
  overflow:hidden;
  border-radius:12px 12px 0 0;
}
.vid-box iframe{
  position:relative;
  width:100%;
  border:none;
}
.text-box{
  font-size:15px;
  color:#d90429;
  padding:1rem;
  text-align:center;
}