@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

#homePageCardContainer
{
  position: relative;
  width: 100%;
  height: 30rem;
  max-height: 30rem;
}

.homePageCard
{
  /*position: relative;*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: block;
  width: 100%;
  height: 30rem;
  max-height: 30rem;
  overflow: hidden;

  border-radius: 1.5rem;

  img
  {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
  }

  .homePageCardTitle
  {
    position: absolute;
    top: 0;
    margin: 1rem;

    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 1rem;
    background-color: #22222288;
    backdrop-filter: blur(20px);

    font: 4rem "Work Sans", sans-serif;
    font-weight: bold;
    color: white;
  }

  .homePageCardDescription
  {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 50%;
    margin: 1rem;

    padding: 0.5rem;
    border-radius: 1rem;
    background-color: #22222288;
    /*background-color: #22222200;*/
    backdrop-filter: blur(20px);

    font: 1rem "Work Sans", sans-serif;
    color: white;

    p
    {
      margin: 0;
    }

    p:not(:last-child)
    {
      margin-bottom: 0.5rem;
    }
  }
}

#homePageBadgeContainer
{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  margin-top: 1rem;
  font: 1rem "Work Sans", sans-serif;
}

.homePageBadge
{
  /*background-color: #b3d4fc;*/
  border-style: solid;
  border-color: #888888;
  border-width: 0.15rem;
  border-radius: 1rem;
  overflow: hidden;

  text-decoration: none;
  color: black;

  background-color: white;

  .homePageBadgeHeader
  {
    padding-top: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.25rem;

    background-color: darkcyan;
    text-align: center;
    font-weight: bold;
    color: white;
    font-size: 1.2rem;
  }

  .homePageBadgeText
  {
    padding-top: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;

    text-align: center;
    font-size: 1.2rem;
  }

  .homePageBadgeUnderText
  {
    padding-top: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;

    text-align: right;
    color: #888888;
  }
}

.homePageCard:not(.hiddenCard)
{
  transition-duration: 2s;
  /*transition-behavior: allow-discrete;*/
}

.hiddenCard
{
  /*display: none;*/
  opacity: 0;
  transition-duration: 2s;
  /*transition-behavior: allow-discrete;*/
}