@import url(https://cdn.simplecss.org/simple.min.css);
@import url(prism.css); /* Code highlighting, can be reconfigured on prism's site */

/* Global variable overrides simple.css */
:root,
::backdrop {
  --standard-border-radius: 0px;
}
.notice {
  border: 1px solid var(--border);
  border-radius: 0px;
}
header > nav a,
header > nav a:visited {
  text-decoration: underline;
}
article {
  border: 0px solid var(--border);
}

/* Unit Mag Specific Styling */
@font-face {
  font-family: archivo;
  src: url(../fonts/archivoBlack.woff2);
}
.archivo {
  font-family: archivo;
}
@font-face {
  font-family: necto;
  src: url(../fonts/nectoMono.woff2);
}
.necto {
  font-family: necto;
}
.caps {
  text-transform: uppercase;
}
.center {
  text-align: center;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: archivo;
}
.three-column-grid {
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  align-items: start;
  gap: 2rem;
  text-align: center;
}
@media (max-width: 800px) {
  .three-column-grid {
    grid-template-columns: 1fr;
  }
}
a {
  opacity: 1;
  transition: opacity 0.15s ease-in;
}
a:hover,
a:focus {
  opacity: 0.5;
  transition: opacity 0.15s ease-in;
  text-decoration: underline;
}
a:active {
  opacity: 0.8;
  transition: opacity 0.15s ease-out;
}

/* Default color for light mode */
.logo {
    color: #212121; /* Dark gray */
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .logo {
        color: #dcdcdc; /* Light gray */
    }
}


/* dim and grow transition classes from Adam's Tachyons */
.dim {
  opacity: 1;
  transition: opacity 0.15s ease-in;
}
.dim:hover,
.dim:focus {
  opacity: 0.5;
  transition: opacity 0.15s ease-in;
}
.dim:active {
  opacity: 0.8;
  transition: opacity 0.15s ease-out;
}
.grow {
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.25s ease-out;
}
.grow:hover,
.grow:focus {
  transform: scale(1.05);
}
.grow:active {
  transform: scale(0.9);
}

/* WORK THIS OUT - JXDV custom classes*/
.underline-jxdv {
  background-image: linear-gradient(120deg, #7ebd42 0%, #7ebd42 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 88%;
  transition: background-size 0.25s ease-in;
}
.three-cg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
}
.tc {
  text-align: center;
}