:root {
  --bulma-primary-h: 326deg;
  --bulma-primary-l: 74%;
  --bulma-info-h: 191deg;
  --bulma-info-s: 97%;
  --bulma-info-l: 77%;
  --bulma-success-h: 265deg;
  --bulma-success-s: 89%;
  --bulma-success-l: 78%;
  --bulma-warning-h: 235deg;
  --bulma-warning-s: 15%;
  --bulma-warning-l: 14%;
  --bulma-danger-h: 231deg;
  --bulma-danger-s: 15%;
  --bulma-danger-l: 18%;
}

/*
primary - pink
info - blue
success - purple
warning - dark grey
danger - light grey
*/

body{
  background-color: var(--bulma-warning);
}

.tags {
  justify-content: center;

  &.is-left {
    justify-content: left;
  }
}

.footer {
  --bulma-footer-padding: 4rem 1.5rem;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;


  .buttons {
    justify-content: flex-end;
    gap: 1rem;

    &.are-medium {
      --bulma-control-size: 0.9rem;
    }
  }
}

.card-content {
  display: flex;
  flex: 1;
  flex-direction: column;

  .content {
    flex: 1;
  }
}

.object-cover {
  object-fit: cover;
}

#hero {
  .hero-body {
    position: relative;
    z-index: 1;
  }

  .title {
    font-size: 4rem;
  }

  .hero-starfield {
    position: relative;
    overflow: hidden;
  }

  .starfield-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
}

@media screen and (min-width: 1024px) {
  .section.is-medium {
    padding: 6.5rem 4.5rem;
  }
}

@media screen and (min-width: 769px) {
  .modal-content, .modal-card {
    margin: 0 auto;
    max-height: calc(100vh - var(--bulma-modal-content-spacing-tablet));
    width: 55rem;
  }
}