/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
 font-family: 'Gibson';
 src: url('fonts/Gibson-Regular.otf');
 font-weight: normal;
}

@font-face {
 font-family: 'Gibson';
 src: url('fonts/Gibson-Bold.otf');
 font-weight: bold;
}

@font-face {
  font-family: 'Gibson';
  src: url('fonts/Gibson-SemiBold.otf');
  font-weight: 600;
}

body {
  background-color: #1D212A;
  color: white;
  font-family: Gibson;
}

.button-link::before {
  display: none !important;
}

/* ABOUT */
.about-btn::after {
  background: #33A0BF !important;
}
.about-btn::before {
  background: rgba(255, 255, 255, 0.25);
}

/* SHOWS */
.shows-btn::after {
  background: #773BC1 !important;
}
.shows-btn::before {
  background: rgba(255, 255, 255, 0.25);
}

/* WATCH */
.watch-btn::after {
  background: #E0148F !important;
}
.watch-btn::before {
  background: rgba(255, 255, 255, 0.25);
}


/* BLOCKS */
.blocks-btn::after {
  background: #E51D4B !important;
}
.blocks-btn::before {
  background: rgba(255, 255, 255, 0.25);
}

/* SOCIALS */
.socials-btn::after {
  background: #2FF04C !important;
}
.socials-btn::before {
  background: rgba(255, 255, 255, 0.25);
}

.lune-btn::after {
  background: #FE9217 !important;
}
.lune-btn::before {
  background: rgba(255, 255, 255, 0.25);
}

header {
  transition: background-color 0.3s ease, border-bottom-color 0.3s ease;
}

.blocks-container {
  text-align: center;
  padding: 40px 20px;
}

.blocks-title {
  font-size: 48px;
  font-weight: 600;
  margin-bottom: 40px;
  color: white;
}

.blocks-row {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}

.block-card {
  text-decoration: none;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.pill {
  width: 280px;        
  height: 150px;         
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.15s ease;
}

/* Colors */
.yubfamilymovie-pill {
  background-color: #13161D;
}

.yuboom-pill {
  background-color: #FD732C;
}

.lune-pill {
  background-color: #0A1259;
}


.yubfamilymovie-logo {
  height: 100px;
}

.yuboom-logo {
  height: 120px;
}

.lune-logo {
  height: 90px;
}

/* LABELS */
.block-label {
  margin-top: 10px;
  font-size: 28px;
  font-weight: normal;
}




.block-card:hover .pill {
  transform: translateY(-7px) scale(1.06);
  transition: transform 0.16s cubic-bezier(0.25, 1.5, 0.35, 1);
}


.block-card:active .pill {
  animation: pill-press-bounce 0.32s cubic-bezier(0.33, 1.6, 0.55, 1);
}

@keyframes pill-press-bounce {
  0% {
    transform: translateY(-7px) scale(1.06);
  }
  20% {
    transform: translateY(2px) scale(0.96);
  }
  55% {
    transform: translateY(-4px) scale(1.04);
  }
  80% {
    transform: translateY(1px) scale(0.99);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}


body {
  background-attachment: fixed;
}