:root {
  --fullwidth: clamp(700px, 90vw, 1440px);
  --wrapperwidth: 100%;
  --gaps: 2.5rem;
  --nav-height: 3rem;
  --nav-width: 12vw;
  --border-radius: 2rem;
  
  --font-size-1: clamp(32px, 3vw, 41px);
  --font-size-2: clamp(25px, 2.5vw, 32px);
  --font-size-3: clamp(22px, 2vw, 24px);
  --font-size-4: clamp(18px, 1.5vw, 20px);
  --font-size-5: clamp(16px, 1vw, 18px);
  --font-size-normal: var(--font-size-4);

  --font-primary: "Work Sans";
  --font-secondary: "Roboto";

  --transitions: background-color 0s;

  --primary: 33, 255, 208;
  --secondary: 106, 104, 104;
  --light: 20, 20, 20;
  --white: 255, 250, 250;
  --gray: 13, 13, 13;
  --black: 7, 7, 7;
  --red: 150, 15, 15;
  --green: 86, 199, 145;
  --nav-color: rgba(var(--secondary), 0);
  --font-color: rgba(var(--white), 1);

  --shadow: var(--black);

  --padding-1: 1rem;
  --padding-2: 2rem;
  --padding-3: 3rem;

  --line-height-1: 1;
  --line-height-2: 1.5;
  --line-height-3: 2;

  /* grid */
  --grid-5: 1fr 1fr 1fr 1fr 1fr;
  --grid-4: 1fr 1fr 1fr 1fr;
  --grid-3: 1fr 1fr 1fr;
  --grid-2: 1fr 1fr;
  --grid-1: 1fr;

  --grid-4-to-1: 4fr 1fr;
  --grid-3-to-1: 3fr 1fr;
  --grid-2-to-1: 2fr 1fr;

  --grid-4-to-1-r: 1fr 4fr;
  --grid-3-to-1-r: 1fr 3fr;
  --grid-2-to-1-r: 1fr 2fr;

  --layout-grid: 15vw 1fr calc(var(--gaps)*0);
  --layout-gaps: var(--gaps);
  --layout-areas: "nav main";

  --reverse: 2;

  --number-of-auto-columns: 4;

  --foreground: rgba(var(--white), 1);
  --background: rgba(var(--secondary), 1);

  --bg: rgba(var(--secondary), 1);
  --col: rgb(var(--white));
  --nav-active: 1rem;
  --flexwrap: nowrap;

  /* --parallaxTransform: translate3D(-570px, 0x); */
  --divider-basis: 1 1 300%;

  --desktop-display: inherit;
  --mobile-display: none;
  --divider-display: var(--desktop-display);
}

/* tablet */
@media screen and (max-width: 1180px) and (min-width: 721px) {
  :root {
    --fullwidth: clamp(300px, 95vw, calc(100% - 0rem));
    --wrapperwidth: var(--fullwidth);
    --nav-width: 16vw;
    --gaps: clamp(1rem, 2.25vw, 1.5rem);


    --padding-1: 0rem;
    --padding-2: 1rem;
    --padding-3: 2rem;

    --number-of-auto-columns: 3;

    --grid-4-to-1: 3fr 1fr;
    --grid-3-to-1: 2fr 1fr;
    --grid-2-to-1: 1fr 1fr;

    --grid-4-to-1-r: 1fr 3fr;
    --grid-3-to-1-r: 1fr 2fr;
    --grid-2-to-1-r: 1fr 1fr;

    --layout-grid: 1fr;
    --layout-areas: "main";
    --layout-gaps: calc(var(--gaps)*.5);

    --nav-active: -1.75rem;
    --divider-basis: 1 1 60%;
    
    --desktop-display: none;
    --mobile-display: inherit;
    --divider-display: inherit;

    --border-radius: 1.5rem;
  }

}
/* mobile */
@media screen and (max-width: 720px) {
  :root {

    --fullwidth: clamp(300px, 95vw, calc(100vw - 2rem));
    --wrapperwidth: var(--fullwidth);
    --gaps: clamp(1rem, 2.25vw, 1.75rem);

    /* mobile typography */
    --padding-1: 0rem;
    --padding-2: 1rem;
    --padding-3: 1.5rem;

    /* grid columns on mobile */
    --grid-5: 1fr 1fr 1fr;
    --grid-4: 1fr 1fr;
    --grid-3: 1fr;
    --grid-2: 1fr;

    --grid-4-to-1: 2fr 1fr;
    --grid-3-to-1: 1fr 2fr;
    --grid-2-to-1: 0fr 100%;

    --grid-4-to-1-r: 1fr 2fr;
    --grid-3-to-1-r: 2fr 1fr;
    --grid-2-to-1-r: 100% 0fr;

    --layout-grid: 1fr;
    --layout-gaps: 0;
    --layout-areas: "main";
    --number-of-auto-columns: 2;

    --reverse: inherit;
    --flexwrap: wrap;

    /* --parallaxTransform: translate3D(calc(-100vw / 2 + 16px), calc(-100vh / 2 + 0 */
    --divider-basis: 0;
    
    --desktop-display: none;
    --mobile-display: inherit;
    --divider-display: var(--desktop-display);

    --border-radius: 1.5rem;
  }
}

/* hide .mobile elmeents and show .desktop elements on desktop/tablet */
.desktop {
  display: var(--desktop-display) !important;
}

.mobile {
  display: var(--mobile-display) !important;
}

/* responsive grid / flex columns */
[class*="grid-"] {
  display: grid;
}

.grid-5 {
  -ms-grid-columns: var(--grid-5);
  grid-template-columns: var(--grid-5);
  --number-of-auto-columns: 5;
}

.grid-4 {
  -ms-grid-columns: var(--grid-4);
  grid-template-columns: var(--grid-4);
  --number-of-auto-columns: 4;
}

.grid-3 {
  -ms-grid-columns: var(--grid-3);
  grid-template-columns: var(--grid-3);
  --number-of-auto-columns: 3;
}

.grid-2 {
  -ms-grid-columns: var(--grid-2);
  grid-template-columns: var(--grid-2);
  --number-of-auto-columns: 2;
}

.grid-1 {
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  --number-of-auto-columns: 1;
}

.grid-4-to-1 {
  grid-template-columns: var(--grid-4-to-1);
}

.grid-3-to-1 {
  grid-template-columns: var(--grid-3-to-1);
}

.grid-2-to-1 {
  grid-template-columns: var(--grid-2-to-1);
}

.grid-4-to-1-r {
  grid-template-columns: var(--grid-4-to-1-r);
}

.grid-3-to-1-r {
  grid-template-columns: var(--grid-3-to-1-r);
}

.grid-2-to-1-r {
  grid-template-columns: var(--grid-2-to-1-r);
}

.grid-auto {
  grid-template-columns: repeat(auto-fill, calc(var(--fullwidth) / var(--number-of-auto-columns) - 4rem));
}

@media screen and (max-width: 479px) {
  [class*="grid-"] {
    --number-of-auto-columns: 2;
  }

  .grid-auto {
    grid-template-columns: repeat(auto-fill, calc(var(--fullwidth) / var(--number-of-auto-columns) - 2rem));
    margin: auto;
  }

  .grid-4-to-1 {
    grid-template-columns: var(--number-of-auto-columns);
  }

  .grid-3-to-1 {
    grid-template-columns: var(--number-of-auto-columns);
  }

  .grid-2-to-1 {
    grid-template-columns: var(--number-of-auto-columns);
  }
}

.gaps {
  row-gap: var(--gaps);
  column-gap: var(--gaps);
  /* gap: var(--gaps); */
}

.rounded {
  border-radius: var(--border-radius) !important;
  -webkit-border-radius: var(--border-radius) !important;
  -moz-border-radius: var(--border-radius) !important;
  -ms-border-radius: var(--border-radius) !important;
  -o-border-radius: var(--border-radius) !important;
}

.max {
  width: 100% !important;
}

.padding-0 {
  padding: 0;
}

.padding-1 {
  padding: var(--padding-1);
}

.padding-2 {
  padding: var(--padding-2);
}

.padding-3 {
  padding: var(--padding-3);
}

/* font colors */
.primary-color {
  color: rgb(var(--primary));
}

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

.light-color {
  color: rgb(var(--light));
}

.white-color {
  color: rgb(var(--white));
}

.gray-color {
  color: rgb(var(--gray));
}

.black-color {
  color: rgb(var(--black));
}

.red-color,
.text-danger {
  color: rgb(var(--red));
}

.green-color {
  color: rgb(var(--green));
}

/* bg colors */
.bg-primary-color {
  background-color: rgb(var(--primary));
}

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

.bg-light-color {
  background-color: rgb(var(--light));
}

.bg-white-color {
  background-color: rgb(var(--white));
}

.bg-gray-color {
  background-color: rgb(var(--gray));
}

.bg-black-color {
  background-color: rgb(var(--black));
}

.red-color,
.bg-text-danger {
  background-color: rgb(var(--red));
}

.bg-green-color {
  background-color: rgb(var(--green));
}

/* font sizes */
.font-size-1 {
  font-size: var(--font-size-1);
}

.font-size-2 {
  font-size: var(--font-size-2);
}

.font-size-3 {
  font-size: var(--font-size-3);
}

.font-size-4 {
  font-size: var(--font-size-4);
}

.font-size-5 {
  font-size: var(--font-size-5);
}

/* font-weights */
.bold {
  font-weight: 700;
}

.bolder {
  font-weight: 900;
}

.regular {
  font-weight: 500;
}

.thin {
  font-weight: 300;
}

.ultrathin {
  font-weight: 200;
}

h1 {
  font-size: var(--font-size-1);
  font-weight: 700;
}

h2 {
  font-size: var(--font-size-2);
  font-weight: 700;
}

h3 {
  font-size: var(--font-size-3);
  font-weight: 500;
}

h4 {
  font-size: var(--font-size-4);
}

h5 {
  font-size: var(--font-size-5);
}

p, ul, li, a, label {
  font-size: var(--font-size-normal);
  line-height: 1.4;
  color: rgba(var(--white), 0.7);
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, label {
  font-family: var(--font-primary);
  margin: 0;
}

p, ul, li, a {
  font-family: var(--font-secondary);
  margin: 0;
}


body {
  background-image: url('../img/background.svg');
  background-repeat: repeat;
  background-size: 49px;
  background-color: rgba(var(--black));
  display: grid;
  grid-template-columns: var(--layout-grid);
  grid-template-areas: var(--layout-areas);
  gap: calc(var(--layout-gaps) * 2);
  justify-items: center;
  /* transform-style: preserve-3d; */
  /* perspective: 1000px; */
  /* perspective-origin: 100%; */

}

#wrapper {
  grid-area: main;
  /* transform-style: preserve-3d; */
  width: var(--wrapperwidth);
  /* margin: var(--gaps) calc(var(--gaps)*2); */
}

#parallaxWrapper {
  /* background-color: #111; */
  color: var(--font-color);
  
  /* height: 500px; */
  /* fallback for older browsers */
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  /* perspective: 300px; */
  /* -webkit-perspective: 300px; */
}

#main {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
}

nav {
  grid-area: nav;
  max-width: 100%;
}

ul.mainMenu {
  display: flex;
  flex-direction: column;
  position: fixed;
  list-style: '';
  top: var(--gaps);
  left: var(--nav-active);
  /* left: calc(var(--gaps) * -.025); */
  /* left: calc(0rem, 1vw, 1rem); */
  gap: 1rem;
  margin: 0;
  max-width: var(--nav-width);
  width: 100%;
  z-index: 1;
}

:is(.mobileMenu, .mainMenu) li {
  color: rgba(var(--secondary), 1);
  position: relative;
  padding-left: 1.5rem;
  transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
}
.mainMenu li.active:before {
  content: '';
  position: absolute;
  display: block;
  height: 60%;
  width: 3.5rem;
  padding: 0;
  background-color: rgb(var(--primary));
  left: 0;
  top: 20%;
  transform: translateX(calc(-100%));
  -webkit-transform: translateX(calc(-100%));
  -moz-transform: translateX(calc(-100%));
  -ms-transform: translateX(calc(-100%));
  -o-transform: translateX(calc(-100%));
}

:is(.mainMenu, .mobileMenu) li hr {
  position: relative;
  width: 90%;
  margin: 0;
  left: 0;
  border-color: rgba(var(--secondary), .2)
}

:is(.mainMenu, .mobileMenu) :is(li:hover, li.active) {
  color: rgba(var(--primary), 1);
}

:is(.mainMenu, .mobileMenu) a {
  text-decoration: none;
  color: inherit;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(25px, 2.5vw, 27px);
}

:is(.mainMenu, .mobileMenu) .socials {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  gap: 0.5rem;
}

.mobileMenu {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  gap: 1rem;
  list-style: '';
  box-sizing: content-box;
  opacity: 0;
  align-content: center;
  justify-content: center;
  padding: 0;
  top: 0;
  right: 0;
  color: #676767;
  transition: all ease-in-out .5s;
  margin-right: 0;
  z-index: 3;
  background: #0F0F0F;
  height: 100vh;
  gap: 1rem;
  box-shadow: -12px 3px 22px #000000;
  transition: all .5s ease-in-out;
  -webkit-transition: all ease-in-out .5s;
  -moz-transition: all ease-in-out .5s;
  -ms-transition: all ease-in-out .5s;
  -o-transition: all ease-in-out .5s;
}

.mobileMenu li {
  font-weight: 600;
}

#navOpener {
  display: flex;
  z-index: 4;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background-color: rgba(27, 27, 27);
  border: 0;
  border-radius: 50%;
  height: 4rem;
  width: 4rem;
  box-shadow: rgba(0, 0, 0, 0.3) 1px 8px 13px;
  opacity: 1;
  transition: all ease-in-out 0.5s;
  justify-content: center;
  align-items: center;
}

#navCloser {
  z-index: 4;
  position: absolute;
  width: 3rem;
  height: 3rem;
  left: -3.5rem;
  line-height: 0;
  border: 0;
  border-radius: 50%;
  background-image: url("../img/rightArrow.png");
  background-color: rgba(var(--primary), 0.09) !important;
  background-size: 0.8rem;
  background-repeat: no-repeat;
  background-position: 53%;
  color: snow;
  font-weight: bolder;
  opacity: 0;
  transition: background-color 0.5s ease-in-out;
}

#navCloser:hover,
#navCloser:active {
  background-color: rgb(var(--primary));
}

@media (min-width: 769px) {
  #navCloser {
    display: none;
  }
}

.dividerCustom {
  display: flex;
  flex-wrap: var(--flexwrap);
  align-items: center;
  background: rgba(var(--light), .5);
  /* background: green; */
  padding-left: var(--gaps);
  overflow: hidden;
  margin: var(--gaps) 0;
  /* max-width: var(--fullwidth); */
  border-radius: var(--border-radius);
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  -ms-border-radius: var(--border-radius);
  -o-border-radius: var(--border-radius);
}

.dividerCustom h1 {
  font-family: "Work Sans";
  color: rgba(var(--white), 1);
  z-index: 1;
  font-weight: bolder;
  max-width: fit-content; /* supposed to be 15rem but 'Edit Category' is way too long */
  width: 100%;
  align-self: auto;
  margin: 1rem;
}

.dividerCustom hr {
  display: var(--divider-display);
  position: relative;
  right: clamp(-15rem, -10vw, 0rem);
  align-self: auto;
  /* flex: var(--divider-basis); */
  border-color: rgba(var(--white), .1);
  width: 100%;
}

.dividerCustom img {
  position: relative;
  z-index: 4;
  right: 4vw;
}

.dividerCustom.searchContainer {
  gap: 0 1rem;
  padding-bottom: 1rem;
}

.dividerCustom.searchContainer a.button {
  border-radius: var(--border-radius);
  padding: .625rem 2rem;
  line-height: 1;
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  -ms-border-radius: var(--border-radius);
  -o-border-radius: var(--border-radius);
}

.dividerCustom.searchContainer hr {
  right: 0;
  flex: 1 1 45%;
}

.dividerCustom.searchContainer input[type="search"] {
  margin-right: 1rem;
}

.tileGrid {
  display: inline-block;
  /* grid-template-columns: repeat(auto-fill, 20.5rem); */
  /* grid-auto-rows: 10px; */
  /* justify-content: center; */
  /* align-items: start; */
  margin: 0;
  padding: 0;
  max-width: var(--fullwidth);
  /* position: absolute; */
  column-count: var(--number-of-auto-columns);
}

.tiling {
  display: flex;
  width: 100%;
  gap: var(--gaps);
  /* height: 80vh; */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}

.card {
    object-fit: contain;
    max-height: 70vh;
    width: 100%;
    height: fit-content;
    color: rgba(var(--white), 1);
    text-decoration: none;
    background-color: rgba(var(--gray));
    border-radius: var(--border-radius);
    -webkit-border-radius: var(--border-radius);
    -moz-border-radius: var(--border-radius);
    -ms-border-radius: var(--border-radius);
    -o-border-radius: var(--border-radius);
    transition: all .10s ease-in-out .10s;
    -webkit-transition: all .10s ease-in-out .10s;
    -moz-transition: all .10s ease-in-out .10s;
    -ms-transition: all .10s ease-in-out .10s;
    -o-transition: all .10s ease-in-out .10s;
    /* grid-row-end: span 30; */
    margin: 0 0 2rem 0;
    page-break-inside: avoid; /* Theoretically FF 20+ */
    break-inside: avoid-column; /* Chrome, Safari, IE 11 */
    display: table; /* Actually FF 20+ */
    border: solid 2px rgba(var(--black), 1);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
@media only screen and (max-width: 600px) {
    .card {
        margin: 0 0 1rem 0;
    }

    .dividerCustom.searchContainer {
      gap: 0;
    }

    .dividerCustom.searchContainer input[type="search"] {
      height: 3rem;
      border-radius: 1rem;
    }

    .dividerCustom.searchContainer a.button {
      content: url("../img/create.svg");
      background: none;
      order: 2;
      padding: 0;
      border-radius: 0;
    }

}

/* .card:before {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  border: solid 2px rgba(var(--primary), 0);
  box-shadow: 0 0 1rem 0rem rgba(var(--primary), 0);
} */

.card:hover {
  border: solid 2px rgba(var(--primary), 1);
  /*box-shadow: 0rem 1rem 2rem -1rem rgba(var(--primary), .75);*/
}



.card:nth-child(5n) {
  flex-basis: 100%;
}

.card img {
  object-fit: cover;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  z-index: -1;
  /* aspect-ratio: 332 / 246; */
  /* border-radius: var(--border-radius) var(--border-radius) 0 0;
  -webkit-border-radius: var(--border-radius) var(--border-radius) 0 0;
  -moz-border-radius: var(--border-radius) var(--border-radius) 0 0;
  -ms-border-radius: var(--border-radius) var(--border-radius) 0 0;
  -o-border-radius: var(--border-radius) var(--border-radius) 0 0; */
}

.content {
    display: flex;
    flex-direction: column;
    height: fit-content;
    /* padding-top: calc(var(--gaps) * .25);
    padding-right: calc(var(--gaps) * .75);
    padding-bottom: calc(var(--gaps) * .75);
    padding-left: calc(var(--gaps) * .75);*/
    padding: 0rem 1rem 1rem 1rem;
    /*gap: 0;*/
}

.content h4 {
  margin: 0;
}

.tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .25rem;
  align-items: start;
}

.chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  font-family: var(--font-primary);
  color: rgb(var(--primary));
  background-color: rgba(var(--primary), .1);
  padding: 0.3rem;
  box-sizing: border-box;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}


article {
  display: grid;
  grid-auto-columns: 1fr 1fr;
  gap: calc(var(--gaps)*1);
  width: calc(100% - var(--padding-1));
  max-width: var(--fullwidth);
  margin-bottom: var(--gaps);
  /* padding: 0 var(--padding-1); */
}

article header {
  display: flex;
  flex-direction: column;
  flex: 1;
}

article section {
  display: flex;
  flex-direction: row;
  max-width: calc(var(--fullwidth));
  gap: calc(var(--gaps)*.5);
  align-items: center;
}

.reverse :is(.textSection, .imageSection):first-child {
  order: var(--reverse);
}

.textSection {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gaps)*.25);
  padding: 0 var(--padding-1);
  align-items: start;
  /* width: 50%; */
}

.imageSection {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gaps)*.5);
  width: 100%;
}

.imageSection img {
  object-fit: cover;
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  -ms-border-radius: var(--border-radius);
  -o-border-radius: var(--border-radius);
}

.imageSection + .textSection {
  margin-top: .5rem;
}

.square img {
  aspect-ratio: 1;
}

.columns section {
  flex-direction: column;
}

header .heading span {
  line-height: 1.75;
}

header {
  margin-bottom: 1rem;
}

.heading span {
  background-color: rgba(var(--primary), 1);
  box-shadow: 0.5rem 0 0px 0px rgba(var(--primary), 1), -0.5rem 0 0px 0px rgba(var(--primary), 1);
  position: relative;
  left: 0.5rem;
  line-height: 1.4;
  padding: 0.125rem .25rem 0 0;
  color: rgb(var(--black));
  line-break: auto;
  word-break: break-word;
}

.heading span:after {
  position: absolute;
  background-color: rgba(var(--primary), 1);
}

.heading.dark span {
  background-color: rgba(var(--primary), .125);
  box-shadow: 0.5rem 0 0px 0px rgba(var(--primary), .125), -0.5rem 0 0px 0px rgba(var(--primary), .125);
  color: rgba(var(--primary), 1);

}

.heading.dark span {
  background-color: rgba(var(--primary), .125);
}

.heading.darker span {
  background-color: rgba(var(--primary), .05);
  box-shadow: 0.5rem 0 0px 0px rgba(var(--primary), .05), -0.5rem 0 0px 0px rgba(var(--primary), .05);
  color: rgba(var(--primary), 1);

}

.heading.darker span {
  background-color: rgba(var(--primary), .05);
}

.meta {
  font-family: var(--font-secondary);
  font-size: var(--font-size-5);
  color: rgba(var(--white), .5);
}


.splide {
  max-width: var(--fullwidth);
  padding: 0;
  margin-bottom: 3rem;
}

.splide__pagination__page.is-active {
  background: rgb(var(--primary));
}

.splide__slide img {
  width: 100%;
}

/* buttons */

button[id-="navOpener"], input[type="submit"], .button {
  background-color: rgba(var(--primary), 0.125);
  color: rgba(var(--primary), 1);
  font-family: var(--font-primary);
  padding: 0.75rem 1.5rem;
  box-sizing: content-box;
  border: 0;
  outline: 0;
  margin: 0;
  display: block;
  width: fit-content;
  cursor: pointer;
  transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
}

.button:not([disabled]):hover {
  background-color: rgba(var(--primary), 0.25);
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}

.button.danger {
  color: rgb(var(--red));
  background-color: rgba(var(--red), 0.2);
  font-weight: 700;
  font-size: var(--font-size-normal);
}

.button.danger:hover {
  background-color: rgba(var(--red), 1);
  color: rgb(var(--black));
}

.icon.button {
  position: relative;
  background-color: unset;
  aspect-ratio: 1;
  border-radius: 1rem;
  /* border: 2px solid rgba(var(--primary), 0.2); */
}

.edit {
  position: absolute;
  content: url("../img/edit.svg");
  min-width: 1rem;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.delete {
  position: absolute;
  content: url("../img/delete.svg");
  min-width: 1rem;
  /* height: 1rem; */
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.buttonSet {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

/* forms */

form {
  /* background-color: rgba(var(--light), .5); */
  padding: var(--gaps) 0;
  border-radius: var(--border-radius);
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  -ms-border-radius: var(--border-radius);
  -o-border-radius: var(--border-radius);
}


input:is([type="text"], [type="email"], [type="password"], [type*="datetime"], [type="file"], [type="search"], :disabled), select, .choices__inner {
  display: flex;
  flex-direction: row;
  background-color: rgba(var(--light), 1);
  color: rgba(var(--primary), 1);
  outline: 0;
  border: 0;
  line-height: 1;
  padding: .5rem 1rem;
  box-sizing: border-box;
  width: fit-content;
  font-family: var(--font-primary);
  font-size: var(--font-size-normal);
  transition: all .15s ease-in-out;
  -webkit-transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -ms-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
}

:is(input:is([type="text"], [type="email"], [type="password"], [type*="datetime"], [type="file"]), select):is(:hover, :focus) {
  border-radius: 1rem;
  background-color: rgba(var(--white), .125);
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}

select option {
  background-color: rgba(var(--light), 1);
}

input[type="file"] {
  padding: .5rem 0;
  width: 17rem;
}

input:is([type="text"], [type="email"], [type="password"], [type="datetime"])::placeholder {
  color: rgba(var(--white), .5);
}

input[type="search"] {
  position: relative;
  overflow: visible;
  border-radius: var(--border-radius);
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  -ms-border-radius: var(--border-radius);
  -o-border-radius: var(--border-radius);
}

input[type="search"]::after {
  content: url("../img/search.svg");
  display: block;
  visibility: visible;
  position: absolute;
  background-color: red;
  height: 1rem;
  width: 1rem;
  right: 0;
  top: 0;
  z-index: 10;
}

[hidden] {
  display: none !important;
}

input:disabled {
  background-color: rgb(var(--light));
  border: 0;
}

#editor{
  padding: .5rem; 
}

/* ChoicesJS */

.choices {
  margin: 0;
  font-size: var(--font-size-normal);
}

.choices__inner,
.choices__input,
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background-color: rgba(var(--light), 1);
  color: rgb(var(--primary));
  border: 0;
  font-family: var(--font-secondary);
  font-size: var(--font-size-normal);
  font-weight: normal;
  min-height: unset;
  min-width: 17rem;
  line-height: 1;
  margin: 0;
}

.choices__inner {
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  overflow: auto;
  flex-wrap: nowrap;
}

.choices__list--multiple .choices__item.is-highlighted {
  background-color: rgba(var(--primary), 0.3);
  display: none;
}
.choices__list--multiple .choices__item {
  border: 0;
  background: none;
  color: rgb(var(--primary));
  font-family: var(--font-secondary);
  font-size: var(--font-size-normal);
  font-weight: normal;
  border-radius: var(--border-radius);
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  -ms-border-radius: var(--border-radius);
  -o-border-radius: var(--border-radius);
  margin-right: 14px;
  margin-bottom: 0;
  position: relative;
}

.choices__list--multiple .choices__item:before {
  content: '';
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  padding: 0px 4px;
  background-color: rgba(var(--primary), 0.2);
  border-radius: var(--border-radius);

}

.choices[data-type*=select-multiple] .choices__button, .choices[data-type*=text] .choices__button {
  background-image: url("../img/cancel.svg");
  border: 0;
  background-size: 1rem;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: rgba(var(--primary), 0.2);
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  font-size: var(--font-size-normal);
}

/* socials */

.LinkedIn,
.Instagram,
.Facebook,
.Behance,
.Twitter,
.Github,
.Dribble,
.ArtStation {
  width: 1.5rem;
  position: relative;
  padding: 0;
  margin: 0;
  display: block;
}

.LinkedIn {
  content: url("../img/LinkedIn.svg");
}

.Instagram {
  content: url("../img/Instagram.svg");
}

.Facebook {
  content: url("../img/Facebook.svg");
}

.Behance {
  content: url("../img/Behance.svg");
}

.Twitter {
  content: url("../img/Twitter.svg");
}

.Github {
  content: url("../img/Github.svg");
}

.Dribble {
  content: url("../img/Dribble.svg");
}

.ArtStation {
  content: url("../img/ArtStation.svg");
}

.contentSection {
  padding: .25rem 1rem;
  border-radius: 1rem;
  background-color: rgba(var(--primary), 1);
  color: rgba(var(--black), 1);
}

/* parallax */
#parallaxWrapper {
  /* height: 500px; */
  /* fallback for older browsers */
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  /* perspective: 300px; */
  /* -webkit-perspective: 300px; */
}

#wrapper {
  position: relative;
  /* height: 500px; */
  /* fallback for older browsers */
  height: 100vh;
  /* -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; */
}

#parallaxBg {
  background-size: 49px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
/*   transform: translateZ(-600px) scale(6);
  -webkit-transform: translateZ(-600px) scale(6);
  -moz-transform: translateZ(-600px) scale(6);
  -ms-transform: translateZ(-600px) scale(6);
  -o-transform: translateZ(-600px) scale(6); */
}

main {
  position: absolute;
  /* left: 50%; */
  /* top: 50%; */
  /* transform: var(--parallaxTransform);
  -webkit-transform: var(--parallaxTransform);
  -moz-transform: var(--parallaxTransform);
  -ms-transform: var(--parallaxTransform);
  -o-transform: var(--parallaxTransform); */
}

.noscroll {
  overflow-y: hidden !important;
  height: 100% !important;
  width: 100%  !important;
  position: fixed !important;
  -webkit-overflow-scrolling:touch !important;
  pointer-events: none;
}