:root {
  --primary-color: #53bc73;
  --secondary-color: #365144;
  --secondary-g-color: #305142ea;
  --secondary-g-color-2: #364a51;
  --bright-color: #1c26317e;
  --bright-g-color: #23211bdc;
  --bright-g-color-2: #1b0805e1;
  --highlight-color: #53bc73;
  --subtle-color: #222421;
  --background-color: #222421;
  --background-color-2 : #121313;
  --background-color-3 : #060707;
  --text-color: #f2f2f2dc;
  --shadow-color: #1b1b1b60;
  --semi-transparent-color: #2224217d;
  --glass-color: #12141389;
  --glass-color-2: #111b1ba5;
  --glass-border-color: #484b49;
  --glass-border-color-2: #263b2b8f;
  --glass-glow: 0 0 0.7rem 0.1rem var(--highlight-color), 0 0 1.2rem 0.4rem transparent;
  --text-shadow: 1px 1px 4px var(--shadow-color);
  --button-box-shadow: 0 0 0 0.1rem var(--highlight-color), 0 0 0 0.25rem transparent;
  --button-box-light: 0 0 0 0.1rem var(--primary-color), 0 0 0 0.25rem transparent;
  --bs-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.1);
  --bs-box-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
}

* {
  scrollbar-color: var(--primary-color) transparent;
  scrollbar-width: thin;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  background-image: linear-gradient(to right, var(--background-color), var(--background-color-2), var(--background-color-3));
  color: var(--text-color);
  margin-bottom: 0px;
  font-family: Verdana, sans-serif;
  font-optical-sizing: auto;
  object-fit: cover;
}

.parallax {
    will-change: transform;
    transition: transform 0.1s ease-out; 
}

.font-serif {
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
}

.font-code {
  font-family: 'Courier New', monospace;
  font-size: 16px;
}

.font-fun {
  font-family: 'Franklin Gothic Medium', sans-serif;
}

.font-bold {
  font-family: 'Trebuchet MS', sans-serif;
}

h1 { font-size: 3rem !important; }
h2 { font-size: 2rem !important; }
h3 { font-size: 1.75rem !important; }
h4 { font-size: 1.5rem !important; }
h5 { font-size: 1.25rem !important; }
h6 { font-size: 1.1rem !important; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

.text-large, .text-lg {font-size: 1.5rem;}
.text-medium, .text-md {font-size: 1.25rem;}
.text-shadow{text-shadow: 0 0 3px var(--shadow-color);}

.scroll-x {
  overflow-x: scroll;
  overflow-y: hidden;
}

.container-fluid, .container {
  border: none !important;
  outline: none !important;
}

.btn {
  background-color: var(--primary-color);
}

.btn:hover {
  background-color: var(--secondary-color);
  color: var(--text-color);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: var(--button-box-shadow);
  color: var(--text-color);
}

.btn-primary {
  background-color: var(--highlight-color);
  color: var(--background-color-2);
  border-color: var(--background-color-2);
}

.btn-primary:hover {
  background-color: var(--secondary-color);
  border-color: var(--highlight-color);
  color: var(--text-color);
}

.btn-primary:focus, .btn-primary:active:focus {
  color: var(--background-color-2);
  box-shadow: var(--button-box-light);
  background-color: var(--highlight-color);
}

.btn-outline {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background-color: transparent;
}

.btn-outline:hover {
  color: var(--text-color);
  border-color: var(--text-color);
}

.btn-outline:focus, .btn-outline:active:focus {
    box-shadow: var(--button-box-shadow);
    color: var(--text-color);
}

.navbar-brand {
  color: var(--highlight-color) !important;
}

.nav-link {
  color: var(--primary-color) !important;
  text-shadow: var(--text-shadow)
}

a {
  color: var(--primary-color) !important;
  text-shadow: var(--text-shadow)
}

a:hover {
  color: var(--highlight-color) !important;
}

a:focus {
  color: var(--highlight-color) !important;
}

p {
    text-shadow: var(--text-shadow)
}

.no-shadow {
  text-shadow: none;
}

.border-subtle {
  border-color: var(--subtle-color) !important;
}

.border-text {
  border-color: var(--text-color) !important;
}

.border-stylized {
  border-color: var(--text-color) !important;
  border-style: groove;
}

.color-primary {
  color: var(--primary-color);
}

.color-secondary {
  color: var(--secondary-color);
}

.color-highlight {
  color: var(--highlight-color);
  text-shadow: 0 0 2px var(--highlight-color);
}

.color-subtle {
  color: var(--subtle-color);
}

.secondary-fill {
  background-color: var(--secondary-color);
}

.secondary-g-fill {
  background-image: linear-gradient(120deg, var(--secondary-color), var(--secondary-g-color), var(--secondary-g-color-2));
}

.bright-g-fill {
  background-image: linear-gradient(120deg, var(--bright-color), var(--bright-g-color), var(--bright-g-color-2));
}

.background-fill {
  background-color: var(--background-color-2);
}

.semi-transparent-fill {
  background-color: var(--semi-transparent-color);
}

.linear-gradient-fill-t-r {
  background-image: linear-gradient(to right, var(--background-color-2), transparent);
}

.linear-gradient-fill-t-b {
  background-image: linear-gradient(to bottom, var(--background-color-2), transparent);
}

#overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.overlay-1 {
  width: 75%;
  height: 100%;
}

@media (max-width: 768px){
  .overlay-1{
    width: 95%;
  }
}

.text-theme {
  border-color: var(--text-color);
  color: var(--text-color);
}

.glass-theme {
  background-color: var(--glass-color);
  border-color: var(--glass-border-color) !important;
  color: var(--text-color) !important;
  text-shadow: 
    1px 1px 2px #1a1a1af0
    1px 1px 4px #1a1a1ac5
    0px 0px 5px #1a1a1af0
    0px 0px 20px #1a1a1a89;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 2px;
  
}

a.glass-theme:hover, button.glass-theme:hover {
  background-color: var(--glass-color);
  border-color: var(--highlight-color) !important;
  box-shadow: var(--glass-glow);
  text-shadow: 0px 0px 8px var(--highlight-color);
}


.glass-theme-2 {
  background-color: var(--glass-color-2);
  border-color: var(--glass-border-color-2) !important;
  color: var(--highlight-color) !important;
  text-shadow: 0px 0px 5px #c9c9c989;
}

.glass-theme-2:hover {
  background-color: var(--glass-color-2);
  border-color: var(--highlight-color) !important;
  box-shadow: var(--glass-glow);
  color: var(--highlight-color) !important;
  text-shadow: 0px 0px 8px var(--highlight-color);
}

.glass-fill {
  backdrop-filter: blur(10px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  border: 1px solid;
}

.glass-fill div {
  pointer-events: none;
}

.tiny-font {
  font-size: 6px;
}

.hatch {
    background-image:
    repeating-linear-gradient(
      -45deg,
      var(--primary-color) 0px,
      var(--primary-color) 1px,
      transparent 1px,
      transparent 50%
    );
    background-size: 15px 15px;
}

.hatch-secondary {
    background-image:
    repeating-linear-gradient(
      -45deg,
      var(--secondary-color) 0px,
      var(--secondary-color) 1px,
      transparent 1px,
      transparent 50%
    );
    background-size: 15px 15px;
}

.hatch-subtle {
    background-image:
    repeating-linear-gradient(
      -45deg,
      var(--subtle-color) 0px,
      var(--subtle-color) 2px,
      transparent 2px,
      transparent 50%
    );
    background-size: 10px 10px;
}

.crosshatch {
  background-image:
    repeating-linear-gradient(
      45deg,
      var(--primary-color) 0px,
      var(--primary-color) 1px,
      transparent 1px,
      transparent 50%
    ),
    repeating-linear-gradient(
      -45deg,
      var(--primary-color) 0px,
      var(--primary-color) 1px,
      transparent 1px,
      transparent 50%
    );
  background-size: 10px 10px;
}

.dither {
  position: relative;
}

.dither::after {
  content: ''; position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  background-color: transparent;
  background-image:
    radial-gradient(circle, var(--secondary-color) 3px, transparent 3px),
    radial-gradient(circle, var(--secondary-color) 3px, transparent 3px);
  mask-image: linear-gradient(230deg, transparent, transparent, black);
  background-size: 15px 15px;
  animation: scroll-background 15s linear infinite;
}

@keyframes scroll-background {
  from { background-position: 0 0 }
  to { background-position: 15px -15px }
}

.png-overlay-primary {
  overflow: hidden;
}

.png-overlay-primary img {
  filter:drop-shadow(0px 1000px 0 var(--primary-color));
  transform: translateY(-1000px);
}

.png-overlay-secondary {
  overflow: hidden;
}

.png-overlay-secondary img {
  filter:drop-shadow(0px 1000px 0 var(--secondary-color));
  transform: translateY(-1000px);
}

.png-overlay-highlight {
  overflow: hidden;
}

.png-overlay-highlight img {
  filter:drop-shadow(0px 1000px 0 var(--highlight-color));
  transform: translateY(-1000px);
}

.png-overlay-subtle {
  overflow: hidden;
}

.png-overlay-subtle img {
  filter:drop-shadow(0px 1000px 0 var(--text-color));
  transform: translateY(-1000px);
}

.png-overlay-shadow {
  overflow: hidden;
}

.png-overlay-shadow img {
  filter:drop-shadow(0px 1000px 0 var(--shadow-color));
  transform: translateY(-1000px);
}

.radial-transparency-mask {
  mask-image: radial-gradient(ellipse at center, black 50%, transparent 80%);
}

.card-img-top {
  width: 100%;
  height: 10vh;
  object-fit: cover;
}

.img-invert img {
  filter: invert(100%);
}

.img-fill-gridbox {
  width:100%; height:100%; display:block; object-fit:cover; pointer-events:none; z-index:-1;
}

.index-grid {
  display:grid; gap: 2px; 
  width: 100%; height: 100%;
  max-height: 100%; max-width: 100%;
  grid-template-columns: 0.2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.2fr ;
  grid-template-rows: 0.1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.1fr;
}

.ten-by-ten-grid {
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
}

.ten-by-ten-grid > *{
  aspect-ratio: 4 / 3;
}

.development-grid {
  grid-template-columns: 2fr 1fr 1fr 1fr;
}

.item-grid {
  display: grid;
  grid-template-columns: auto repeat(10, 10vw) auto;
  grid-template-rows: repeat(10, 10vw);
}

.nav-grid {
  display: grid;
  grid-template-columns: auto;
}

.grid-responsive {
  display: grid;
  grid-template-columns: 0.5fr repeat(10, 1fr) 0.5fr;
  grid-template-rows: 0.5fr repeat(10, 1fr) 0.5fr;
  width: 100%; min-height: 100%;
}

@media (max-width: 768px){
  .grid-responsive {
    min-height: 120% !important; 
    grid-template-rows: 0.5fr repeat(14, 1fr) 0.5fr !important;
  }
}

/*Specific grid placements*/

.g-1-name {
  grid-column: 5 / 13;
  grid-row: 4 / 7;
}

.g-1-intro-text {
  grid-column: 6 / 11;
  grid-row: 7 / 11;
}

.g-1-logo-img {
  grid-column: 10 / 12;
  grid-row: 3 / 7;
}

@media (max-width: 768px){
  .g-1-name {
    grid-column: 2 / 12;
    grid-row: 4 / 6;
  }

  .g-1-intro-text {
    grid-column: 2 / 12;
    grid-row: 6 / 9;
  }

  .g-1-logo-img {
    grid-column: 2 / 12;
    grid-row: 1 / 4;
  }
}

.g-2-portrait {
  grid-column: 2 / 12;
  grid-row: 1 / 7;
}

.g-2-text {
  grid-column: 2 / 12;
  grid-row: 7 / 12;
}

@media (max-width: 768px){
  .g-2-portrait {
    grid-column: 2 / 12;
    grid-row: 1 / 8;
  }

  .g-2-text {
    grid-column: 2 / 12;
    grid-row: 8 / 15;
  }
}

.g-3-workitems {
  grid-column: 3 / 11;
  grid-row: 2 / 12;
}

@media (max-width: 768px){
  .g-3-workitems {
    grid-column: 2 / 12;
    grid-row: 2 / 15;
  }
}

.g-4-decoration {
  grid-column: 1 / 4;
  grid-row: 2 / 12;
}

.g-4-contact-info {
  grid-column: 5 / 9;
  grid-row: 8 / 12;
}

.g-4-email {
  grid-column: 5 / 9;
  grid-row: 4 / 5;
}

.g-4-email-img {
  grid-column: 5 / 9;
  grid-row: 3 / 4;
}

.g-4-phone {
  grid-column: 5 / 9;
  grid-row: 6 / 7;
}

.g-4-phone-img {
  grid-column: 5 / 9;
  grid-row: 5 / 6;
}


@media (max-width: 768px){
  .g-4-decoration {
    grid-column: 2 / 6;
    grid-row: 2 / 10;
  }

  .g-4-contact-info {
    grid-column: 2 / 12;
    grid-row: 11 / 14;
  }
}

.work-item {
  width: 28rem;
  height: 32rem;
  margin: 3rem;
}

.work-item-btn {
  align-self: flex-end;
}

.contact-img {
  max-height: 5rem;
}