/* * RESET */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: inherit;
}

html {
  hanging-punctuation: first last;
  /* color-scheme: dark light; */
}

body {
  min-height: 100vh;
}

img,
picture,
svg,
video {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  font-style: italic;
  shape-margin: 1rem;
  /*
    for having a low-rez image while it loads
    on the image, you set a
    style="background-image: url(low-rez-version)"
  */
  background-repeat: no-repeat;
  background-size: cover;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

style {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    /* scroll-padding-top: 3rem; */ /** IN THEME.CSS */
  }
}

.notransition * {
  transition: none !important;
}

*[hidden] {
  display: none !important;
}

*[disabled] {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

/** GRID */
.grid {
  display: grid;
}

.grid.dual-columns {
  grid-template-columns: repeat(auto-fill, minmax(100px, 2fr));
}

/** FLEX */
.flex {
  display: flex;
}

.flex.column {
  flex-direction: column;
}

.flex.center {
  align-items: center;
  justify-content: center;
}

.flex.align-center {
  align-items: center;
}

.flex.justify-center {
  justify-content: center;
}

.flex.justify-start {
  justify-content: start;
}

.flex.justify-end {
  justify-content: end;
}

.flex.space-between {
  justify-content: space-between;
}

.flex.space-around {
  justify-content: space-around;
}

.flex.space-evenly {
  justify-content: space-evenly;
}

.self-center {
  justify-self: center;
}

.self-start {
  justify-self: start;
}

.self-end {
  justify-self: end;
}

/** TEXT-ALIGN */

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

/** FONTS */

.italic {
  font-style: italic;
}

.lowercase {
  text-transform: lowercase;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

/** COLORS */

.black {
  color: black;
}

.gray {
  color: gray;
}

.white {
  color: white;
}

.red {
  color: red;
}

.green {
  color: rgb(39, 196, 122);
}

/* !BORDERS */

.border-top {
  border-top: 1px solid black;
}

.border-bottom {
  border-bottom: 1px solid black;
}

.border-top-bottom {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.border-top-bottom-dashed {
  border-top: 1px dashed #d3d3d3;
  border-bottom: 1px dashed #d3d3d3;
}

.open-sans-light {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300; /* <weight>: Use a value from 300 to 800 */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.open-sans-regular {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; /* <weight>: Use a value from 300 to 800 */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.open-sans-medium {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500; /* <weight>: Use a value from 300 to 800 */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.open-sans-semi-bold {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600; /* <weight>: Use a value from 300 to 800 */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.open-sans-bold {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700; /* <weight>: Use a value from 300 to 800 */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.open-sans-extra-bold {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800; /* <weight>: Use a value from 300 to 800 */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}