:root {
    --c-darker: #231F20;
    --c-darker: black;
    --c-dark: #5B5B5B;
    --c-medium: #848484;
    --c-light: #D1D1D1;
    --c-lighter: #F5F5F5;
    
    --green: #00ffc2;
    --blue: #0d6efd;
    --indigo: #6610f2;
    --pink: #ff4aed;
    --red: #E82525;
    --orange: #fd7e14;
    --yellow: #ffc107;
    
    --essays-color: #F5F5F5;
    --essay-color: #fffbec;
    --glossary-color: #FFF2DC;
    --about-color: lavender;

    --full-width: calc(100vw - (100vw - 100%));
    --full-height: calc(var(--vh, 1vh) * 100);
    --header-height:75px;
    --top-height: calc(185px - var(--header-height));
    --top-height_s: calc(90px - var(--header-height));
    --row-gap: 60px;
    --row-gap-small: 24px;
    --row-gap-medium: 55px;

    --main-gutter: 20px;
    --main-margin: 20px;
    --main-padding: 16px;
    --main-padding_s: 12px;

    --main-transition: 300ms ease-in-out;
    --main-transition-fast: 150ms ease-in-out;
    --button-transition: 250ms ease-in-out;

}
/* ==============================================
   GLOBAL STYLES
   ============================================== */

*:focus {
  outline: none !important;
}
a, a:hover, a:focus {
  display: inherit;
}

[data-template="about"],
[data-template="about"] + footer {
    background-color: var(--about-color);
}
[data-template="essays"],
[data-template="essays"] + footer {
    background-color: var(--essays-color);
}
[data-template="essay"],
[data-template="essay"] + footer {
    background-color: var(--essay-color);
}
[data-template="glossary"],
[data-template="glossary"] + footer {
    background-color: var(--glossary-color);
}



/* ==============================================
   COLOR UTILITIES
   ============================================== */

/* Text Colors */
.t-black { color: black; }
.t-darker { color: var(--c-darker); }
.t-dark { color: var(--c-dark); }
.t-light { color: var(--c-light); }
.t-lighter { color: var(--c-lighter); }
.t-white { color: white; }

.t-green { color: var(--green); }
.t-blue { color: var(--blue); }
.t-indigo { color: var(--indigo); }
.t-pink { color: var(--pink); }
.t-red { color: var(--red); }
.t-orange { color: var(--orange); }
.t-yellow { color: var(--yellow); }

/* Background Colors */
.bg-black { background-color: black; }
.bg-darker { background-color: var(--c-darker); }
.bg-dark { background-color: var(--c-dark); }
.bg-medium { background-color: var(--c-medium); }
.bg-light { background-color: var(--c-light); }
.bg-lighter { background-color: var(--c-lighter); }
.bg-white { background-color: white; }

.bg-green { background-color: var(--green); }
.bg-blue { background-color: var(--blue); }
.bg-indigo { background-color: var(--indigo); }
.bg-pink { background-color: var(--pink); }
.bg-red { background-color: var(--red); }
.bg-orange { background-color: var(--orange); }
.bg-yellow { background-color: var(--yellow); }

/* ==============================================
   VISUAL TRANSITIONS
   ============================================== */

  /* Define a transition duration during page visits */
/* html.is-changing .transition-fade {
  transition: opacity 0.525s;
  opacity: 1;
} */

/* Define the styles for the unloaded pages */
/* html.is-animating .transition-fade {
  opacity: 0;
} */
html.is-animating #swup {
  opacity: 0 !important;
}

/* ==============================================
   GRID STYLES
   ============================================== */

  .main-grid {
  display: grid;
  width: var(--full-width);
  /* overflow-X: hidden; */
  grid-auto-rows: min-content;
  grid-template-columns: repeat(18, 1fr); 
  column-gap: var(--main-gutter); 
}


.sec-grid {
  display: inherit;
  grid-column: 1/-1;
  /* overflow-x: hidden; */
  grid-auto-rows: min-content;
  grid-template-columns: inherit; 
  column-gap: inherit; 
}

.full-grid {
  grid-column: 1/-1;
}

.full-grid-important {
  grid-column: 1/-1 !important;
}

.central-grid_s {
  display: inherit;
  column-gap: inherit; 
  grid-column: 5/-5;
  grid-template-columns: repeat(10, 1fr); 
}

.central-grid {
  display: inherit;
  column-gap: inherit; 
  grid-column: 4/-4;
  grid-template-columns: repeat(12, 1fr); 
}

.central-grid_l {
  display: inherit;
  column-gap: inherit; 
  grid-template-columns: repeat(14, 1fr); 
  grid-column: 4/-4;
  }
  
  
  .top-height-align {
    padding-top: var(--top-height);
  }
  
  .top-height-align-small {
    padding-top: var(--top-height_s);
  }
  /* ==============================================
  MEDIA & VISUAL STYLES
  ============================================== */
  
  /* Image Styles */
  .img-cover {
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .img-contain {
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  /* Aspect Ratios */
  .ratio-9_16 { aspect-ratio: 9/16; }
  .ratio-2_3 { aspect-ratio: 2/3; }
  .ratio-4_5 { aspect-ratio: 4/5; }
  .ratio-1_1 { aspect-ratio: 1/1; }
  .ratio-5_4 { aspect-ratio: 5/4; }
  .ratio-3_2 { aspect-ratio: 3/2; }
  .ratio-16_9 { aspect-ratio: 16/9; }
  
  /* Visual Effects */
  
  /* Safari bug fix */
  .media-alpha { opacity: .85; will-change: opacity;}
  
  
  /* ==============================================
  SPACING UTILITIES
  ============================================== */
  .row-gap { 
    margin-bottom: var(--row-gap); 
  }
  
  .row-gap-small { 
    margin-bottom: var(--row-gap-small); 
  }
  
  /* Padding Utilities */
  .pad { padding: 12px; }
  
  
  .pad-t_s { padding-top: .5rem; }
  .pad-t { padding-top: 1rem; }
  .pad-b { padding-bottom: 1rem; }
  .pad-b_xxl { padding-bottom: 8rem; }
  .pad-r_m { padding-right: 2rem; }
  
  .padding_l_r {
    padding-left: var(--main-padding);
    padding-right: var(--main-padding);
  }
  /* Margin Utilities */
  .mar { margin: 12px; }
  .mar-auto { margin: auto; }
  
  .mar-t_xxs { margin-top: 2px; }
.mar-t_xs { margin-top: .25rem; }
.mar-t_s { margin-top: .8rem; }
.mar-t { margin-top: 1rem; }
.mar-t_m { margin-top: 2rem; }
.mar-t_l { margin-top: 4rem; }
.mar-t_xl { margin-top: 6rem; }
.mar-t_xxl { margin-top: 8rem; }

.mar-r_xs { margin-right: .3333rem; }
.mar-r_s { margin-right: .5rem; }
.mar-r { margin-right: 1rem; }
.mar-r_m { margin-right: 1.5rem; }
.mar-r_l { margin-right: 1.5rem; }
.mar-r_xl { margin-right: 3rem; }

.mar-b_xs { margin-bottom: 8px; }
.mar-b_xxs { margin-bottom: 6px; }
.mar-b_s { margin-bottom: .5rem; }
.mar-b { margin-bottom: .75rem; }
.mar-b_xm { margin-bottom: 1.2rem; }
.mar-b_m { margin-bottom: 2rem; }
.mar-b_l { margin-bottom: 4rem; }
.mar-b_xxl { margin-bottom: 8rem; }
.mar-b_huge { margin-bottom: 12rem; }
.mar-b_em { margin-bottom: 1em; }

.mar-l_xs { margin-left: 3px; }
.mar-l_s { margin-left: .5rem; }
.mar-l { margin-left: 1rem; }
.mar-l_m { margin-left: 2rem; }
.mar-l-m { margin-left: 3rem; }
.mar-l_l { margin-left: 4rem; }

/* ==============================================
   LAYOUT & FLEX UTILITIES
   ============================================== */

/* Display Utilities */
.block { display: block !important; }
.inline { display: inline !important; }
.flex { display: flex !important; }

/* Flex Utilities */
.f-wrap { flex-wrap: wrap; }
.f-nowrap { flex-wrap: nowrap; }
.f-column { flex-direction: column; }

/* Justify Content */
.j-center { justify-content: center; }
.j-end { justify-content: end; }
.j-between { justify-content: space-between; }
.j-around { justify-content: space-around; }
.j-evenly { justify-content: space-evenly; }

/* Align Items */
.a-start { align-items: start; }
.a-center { align-items: center; }
.a-end { align-items: end; }

/* ==============================================
   POSITIONING UTILITIES
   ============================================== */

/* Position Utilities */
.p-fixed { position: fixed; }
.p-sticky { position: sticky; }
.p-relative { position: relative; }
.p-absolute { position: absolute; }

/* Position Placement */
.p-all { top: 0; right: 0; bottom: 0; left: 0; }
.p-top { top: 0; }
.p-right { right: 0; }
.p-bottom { bottom: 0; }
.p-left { left: 0; }

/* ==============================================
   VISIBILITY & STATE UTILITIES
   ============================================== */

/* Visibility Utilities */
.hide { display: none !important; }
.v-hide { visibility: hidden; }

/* Scrollbar Utilities */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { 
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}

/* Overflow Utility */
.stop { overflow: hidden; }

/* ==============================================
   HOVER & ACTIVE UTILITIES
   ============================================== */

@media (hover: hover) {
  a:hover, a:hover *, button:hover, button:hover * {
    color: var(--c-medium);
    transition: var(--button-transition);
  }
  
  a:hover, a:focus {
    text-decoration: none;
  }

  a:focus {
    outline: none;
  }

}

/* ============================================= */
/* RESPONSIVE STYLES */
/* ============================================= */

/* Tablet styles: 600px – 1200px */
@media (min-width: 600px) and (max-width: 1200px) {

}

/* Tablet styles: 1200px – 1400px */
@media (min-width: 1200px) and (max-width: 1400px) {

}

/* Screens styles bigger than 1900px */
@media (min-width: 1900px) {

}

/* Mobile styles: up to 700px */
@media only screen and (max-width: 700px) {

}