@import "_variables";
@import "~bootstrap/scss/bootstrap";
@import '~@fortawesome/fontawesome-free/css/all.css';
@import "_functions";
@import "_navbar";
@import "_bootstrap";

html,body {
  background-image: url('../../public/images/background/' + $background-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0 20%;

  font-family: 'Open Sans', sans-serif;
  word-break: break-word;
}

a,
a:focus {
  color: $secondary;
  text-decoration: none;
  transition: all 0.3s;
}

a:hover {
  color: hover-color($secondary);
  text-decoration: none;
  transition: all 0.3s;
}

.table {
  text-align: center;

  th, td {
    padding: 20px;
  }
}

.panel {
  width: 90%;
  height: 90%;
  margin: 5%;
  text-align: center;
  background: $primary;
  color: text-color($primary);
}

.panel.panel-edit {
  cursor: pointer;

  &:hover {
    background: hover-color($primary);
  }
}

.title {
  font-size: 4vmin;
  max-font-size: 2.5rem;
  letter-spacing: 2vmin;
}

.bg-main {
  background-color: rgb(background-color($primary), 0.8);
  color: text-color(background-color($primary));
}

.section-headline {
  background-color: background-color($primary);
  width: 100%;
  font-size: 1.3rem;
  letter-spacing: 0.3rem;
  padding: 15px;
  border-bottom: 1px solid text-color(background-color($primary));
  text-align: center;
}

.carousel-inner {
  background-color: background-color($primary);
}

.entry-preview {
  overflow: hidden;
  height: 150px;
  background: linear-gradient(text-color(background-color($primary)) 75px, rgba(0,0,0,0) 150px, rgba(0,0,0,0));
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

img.protagonist {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.entry {
  background-color: background-color($primary);
  color: text-color(background-color($primary));

  .entry-content {
    min-height: 300px;
  }

  img.protagonist-open-gallery {
    &:hover {
      cursor: pointer;
      transform: scale(1.05);
    }
  }
}

.modal.gallery {
  background-color: rgb(0, 0, 0, 0.7);

  .modal-content {
    background: none;
    color: white;

    .close-button {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2000;
      padding: 30px;
    }

    .carousel-inner {
      background: none;

      .gallery-image {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }

  .modal-header {
    border: none;
  }
}

.badge {
  width: fit-content;
  position: relative;

  .badge-label {
    color: text-color($primary);
    position: absolute;
    left: 50%;
    top: 27%;
    transform: translateX(-50%);
  }
}

.image-edit {
  position: absolute;
  transform: translateX(-100%);
}

@include media-breakpoint-up(md) {
  img.protagonist {
    width: 200px;
  }
}

@include media-breakpoint-up(lg) {
  img.protagonist {
    width: 300px;
  }
}