/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Selection styles */
::selection {
  background-color: oklch(95% 0.32 1 / 30%);
  color: inherit;
  text-shadow: none;
}

::-moz-selection {
  background-color: oklch(95% 0.32 1 / 30%);
  color: inherit;
  text-shadow: none;
}

.header-gradient {
  background-image: var(--header-gradient);
}

.logo-shadow {
  text-shadow: 0 1px 0 var(--logo-shadow-color);
}

.logo-text-color {
  color: var(--logo-text-color);
}

/* Triangular see-saw border effect */
.triangular-borders-container {
  position: relative;

  .glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88%;
    height: 100%;
    z-index: 9;
    border-radius: 21%;
    box-shadow: 0px 0px 35px 5px var(--acme-shadow-color);
    /* box-shadow: 0px 0px 35px 5px #00d66f88; */
  }
}

.triangular-borders {
  position: relative;
  z-index: 10;
}

.triangular-borders::before,
.triangular-borders::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(
      45deg,
      transparent 33.333%,
      rgb(250, 248, 245) 33.333%,
      rgb(250, 248, 245) 66.667%,
      transparent 66.667%
    ),
    linear-gradient(
      -45deg,
      transparent 33.333%,
      rgb(250, 248, 245) 33.333%,
      rgb(250, 248, 245) 66.667%,
      transparent 66.667%
    );
  background-size: 12px 40px;
  background-repeat: repeat-x;
}

.triangular-borders::before {
  top: -20px;
}

.triangular-borders::after {
  bottom: -20px;
  transform: rotate(180deg);
}