p {
  font-family: Arial;
  /*color: rgb(229 229 229); /* neutral-200 */
  color: rgb(203 213 225) /* slate-300 */
}

.custom-semibold {
  font-weight: 600;
  /*color: rgb(229 229 229); /* neutral-200 */
  color: rgb(203 213 225) /* slate-300 */
}

.custom-header {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.75rem;

  /*color: rgb(2 132 199); /* bg-sky-600 */
  /*background: linear-gradient(to right, rgb(29 78 216), rgb(3 105 161)); /* blue-700, sky-700*/
  /*background: linear-gradient(to right,  rgb(3 105 161), rgb(14 116 144)); /* sky-700, cyan-700*/
  background: linear-gradient(90deg, rgb(2 132 199), rgb(14 165 233), rgb(2 132 199)); /* sky-600, sky-500, sky-600*/
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.custom-subheader {
  display: flex;
  gap: 0.5rem;

  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.75rem;
  /*color: rgb(229 229 229); /* neutral-200 */
  color: rgb(203 213 225) /* slate-300 */
}

.custom-link {
  display: flex;
  gap: 0.5rem;

  font-family: Arial;
  color: rgb(14 165 233); /* sky-500 */

  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1)
}

.custom-link:hover {
  text-decoration: underline;
}

.custom-icon {
  width: 16px;
  height: 16px;
  
  margin-top: auto;
  margin-bottom: auto;
}

.custom-main-bg {
  background-color: rgb(24 24 27); /* zinc-900 */
  background-image: linear-gradient(120deg, rgba(255,255,255,0.02), transparent);
}

.custom-side-panel-a {
  /*background-color: rgba(39, 39, 42, 0.5); /* zinc-800 */
  background-image: linear-gradient(60deg, rgba(39,39,42,1), rgba(30,41,59,1)); /* zinc-800, slate-800 */
  border-radius: 0.5rem;

  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.custom-side-panel-b {
  /*background-color: rgba(39, 39, 42, 0.5); /* zinc-800 */
  background-image: linear-gradient(120deg, rgba(39,39,42,1), rgba(30,41,59,1)); /* zinc-800, slate-800 */
  border-radius: 0.5rem;

  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.custom-side-panel-c {
  /*background-color: rgba(39, 39, 42, 0.5); /* zinc-800 */
  background-image: linear-gradient(60deg, rgba(39,39,42,1), rgba(30,41,59,1)); /* zinc-800, slate-800 */
  border-radius: 0.5rem;

  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.custom-main-panel {
  position: relative;
  z-index: 20;
  
  border-radius: 0.5rem;
}

.custom-main-panel::before {
  /*display: none; /* UNCOMMENT BEFORE CONVERTING TO PDF*/

  content: "";
  position: absolute;
  z-index: -10;
  pointer-events: none;

  inset: 0;
  padding: 4px;
  border-radius: inherit;

  background: linear-gradient(
    150deg,
    rgba(30,41,59,1) 0%,
    rgba(39,39,42,1) 20%, 
    rgba(30,41,59,1) 40%,
    rgba(39,39,42,0) 60%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.custom-main-panel-shadow-box {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;

  border-radius: 0.5rem;

  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  -webkit-mask: linear-gradient(180deg, #fff, #fff0);
  mask: linear-gradient(180deg, #fff, #fff0);
}

.custom-main-panel-box {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.custom-main-panel-subpanel-a {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  
  background-image: linear-gradient(30deg, rgba(39,39,42,1), rgba(30,41,59,1)); /* sky-800, slate-800 */
  border-radius: 0.5rem;

  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.custom-main-panel-subpanel-b {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  
  background-image: linear-gradient(150deg, rgba(39,39,42,1), rgba(30,41,59,1)); /* sky-800, slate-800 */
  border-radius: 0.5rem;

  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.custom-separator-primary {
  width: calc(100%+0.25rem);
  height: 2px;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  margin-left: -0.125rem;
  margin-right: -0.125rem;

  background-image: linear-gradient(90deg, rgb(71 85 105), rgb(100 116 139), rgb(71 85 105)); /* slate-600, slate-500, slate-600 */
}

.custom-separator-secondary {
  width: calc(100%+0.25rem);
  height: 1px;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  margin-left: -0.125rem;
  margin-right: -0.125rem;

  background-image: linear-gradient(90deg, rgb(71 85 105), rgb(100 116 139), rgb(71 85 105)); /* slate-600, slate-500, slate-600 */
}


/* patterns */
.custom-radial-bg {
  
}

.custom-diagonal-bg-45 {
  background-size: 100px 100px;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,1), rgba(255,255,255,1) 1px, transparent 0, transparent 50%)
}

.custom-diagonal-bg-30 {
  --angle: 30deg;
  --size: 150px;

  --width: min(calc(var(--size) / abs(sin(var(--angle)))), 100vw);
  --height: min(calc(var(--size) / abs(cos(var(--angle)))), 100vh);

  background-size: var(--width) var(--height);
  background-image: repeating-linear-gradient(var(--angle), #fff, #fff 1px, transparent 0, transparent 50%)
}

.custom-diagonal-bg-120 {
  --angle: 120deg;
  --size: 150px;

  --width: min(calc(var(--size) / abs(sin(var(--angle)))), 100vw);
  --height: min(calc(var(--size) / abs(cos(var(--angle)))), 100vh);

  background-size: var(--width) var(--height);
  background-image: repeating-linear-gradient(var(--angle), #fff, #fff 1px, transparent 0, transparent 50%)
}

.custom-transparency-gradient-bg-120 {
  mask-image: linear-gradient(120deg, black 0%, transparent 50%);
}


/* animations */
.animate-custom-fadein {
  animation: fadeIn cubic-bezier(0.4, 0, 0.6, 1) 0.5s;
}

@keyframes fadeIn{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.animate-custom-fadein-and-slide-from-bottom-2 {
  animation: fadeInAndSlideFromBottom2 cubic-bezier(0.4, 0, 0.6, 1) 0.5s;
}

@keyframes fadeInAndSlideFromBottom2 {
  0% {
    opacity: 0;
    transform: translateY(2vh);
  }

  100% {
    opacity: 1;
    transform: translateY(0vh);
  }
}

.animate-custom-fadein-and-slide-from-bottom-4 {
  animation: fadeInAndSlideFromBottom4 cubic-bezier(0.4, 0, 0.6, 1) 0.5s;
}

@keyframes fadeInAndSlideFromBottom4 {
  0% {
    opacity: 0;
    transform: translateY(4vh);
  }

  100% {
    opacity: 1;
    transform: translateY(0vh);
  }
}


.animate-custom-fadein-and-slide-from-bottom-6 {
  animation: fadeInAndSlideFromBottom6 cubic-bezier(0.4, 0, 0.6, 1) 0.5s;
}

@keyframes fadeInAndSlideFromBottom6 {
  0% {
    opacity: 0;
    transform: translateY(6vh);
  }

  100% {
    opacity: 1;
    transform: translateY(0vh);
  }
}


.animate-custom-fadein-and-slide-from-top {
  animation: fadeInAndSlideFromTop cubic-bezier(0.4, 0, 0.6, 1) 0.5s;
}

@keyframes fadeInAndSlideFromTop {
  0% {
    opacity: 0;
    transform: translateY(-2vh);
  }

  100% {
    opacity: 1;
    transform: translateY(0vh);
  }
}