* {
  margin: 0;
  padding: 0;
  font-family: "Raleway", sans-serif;
  --bg: rgb(165, 165, 165);
  --title: rgba(255, 255, 255, 0.6);
  --charcoal: rgb(50, 50, 50);
  --charcoaltrans: rgba(50, 50, 50, 0.5);
  /* --blue: rgb(0, 55, 255); */
  --blue: #0029c0;
  --bluetrans: rgba(0, 55, 255, 0.5);
  scroll-behavior: smooth !important;
}

body {
  height: max-content;
  width: 100%;
  background-color: var(--bg);
  overflow-x: hidden;
}

/* body::before {
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("/img/repeat.png");
  background-repeat: repeat;
  background-size: 10rem;
  opacity: 0.04;
} */

.hide {
  display: none !important	;
}

.noselect {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  -moz-window-dragging: no-drag !important;
  -webkit-user-drag: none !important;
}

/* MARK: HEAD 
*/

.head {
  min-height: 30rem;
  width: 100%;
  height: 85svh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.head > img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.head div:has(> .title) {
  z-index: 5;
  padding-bottom: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.title {
  width: 100%;
  letter-spacing: 1vw;
  line-height: 1.4;
  opacity: 0.8;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  /* user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none; */
  /* outline: 2px dotted red; */
}

.ib {
  font-size: clamp(1.1rem, 10vw, 4rem);
  font-weight: 900;
  text-shadow: 0.2vw 0.4vw 2vw #000000;
}

.ibf {
  font-size: clamp(0.55rem, 5vw, 2rem);
  font-weight: 400;
  text-shadow: 0.2vw 0.4vw 2vw #000000;
}

a.title {
  font-weight: 400;
  text-shadow: 0.2vw 0.4vw 2vw #000000;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 2rem;
  letter-spacing: 0.3rem;
  width: fit-content;
}

a.title:hover {
  scale: 1.15;
}
a.title:active {
  scale: 1.2;
}

.event-close {
  position: absolute;
  right: 0.5rem;
  top: 0.25rem;
  background: transparent;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: #333;
}
.event-body {
  padding: 0.25rem 0.5rem 0.5rem 0.5rem;
}
.event-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.05rem;
  color: #111;
}
.event-desc {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  color: #333;
}
.event-meta {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.5rem;
}
.event-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.event-cta {
  background: var(--color-primary, #0029c0);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap; /* keep CTA text on one line */
}
.event-dismiss {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.08);
  color: #333;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap; /* keep dismiss text on one line */
}


.sm {
  z-index: 9;
  /* height: clamp(.5rem,3vw,3rem); */
  min-height: 1.5rem;
  height: 3.5svh;
  width: 100%;
  position: absolute;
  top: 2rem;
  left: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* outline: 2px dotted red; */
}

.sm button {
  all: unset;
}
.sm a,
.sm button {
  height: 100%;
  aspect-ratio: 1;
  margin-inline: 1rem;
  /* outline: 2px dotted lime; */
}

.sm * {
  height: 100%;
  /* filter: invert(1); */
}

.sm a:hover {
  scale: 1.1;
}
.sm a:active {
  scale: 1.1;
}

.sm a:focus-visible {
  scale: 1.2;
  outline: none;
  padding: 0.5rem;
  border-bottom: 2px solid var(--blue) !important;
}
/* .sm a:focus-visible * { 
  background-color: var(--bluetrans) !important;
} */

.insta {
  height: 85% !important;
}

.mail {
  height: 110% !important;
  text-shadow: 1px 1px 1px white;
}

.sm a:last-of-type {
  margin-right: 6rem;
}

@media (max-width: 900px) {
  .sm {
    height: 5vw;
    justify-content: center;
  }
  .sm a {
    margin-inline: 2vw;
  }
  .sm a:last-of-type {
    margin-right: 0;
  }
}

/* MARK: SVG
*/

.logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

/* MARK: QR
*/

.code {
  z-index: 9999;
  width: 100vw;
  height: 100svh;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.6);
  user-select: none;
  -webkit-user-drag: none !important;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.code img {
  z-index: 99999;
}

/* MARK: About 
*/

.about {
  /* width: 100%; */
  height: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  gap: 1rem;
  padding: 1rem;
  padding: 3rem;
  /* outline: 2px dotted red; */
}

.about p {
  width: 100%;
}

/* MARK: FILTER
*/

.content {
  width: 100%;
  height: max-content;
  /* min-height: 3rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  gap: 1rem;
  padding-inline: auto;
  padding-top: 4rem;
  /* outline: 2px dotted red; */
}

.bar {
  width: 100%;
  height: max-content;
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
}

.scrollBox {
  --distance: 5vw;
  --transparent: min(4vw, 5rem);
  --solid: min(7vw, 7rem);
  width: calc(100% - var(--distance) * 2);
  overflow-x: scroll !important;
  margin-inline: var(--distance);
  display: flex;
  justify-content: start;

  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    transparent var(--transparent),
    black var(--solid),
    black calc(100% - var(--solid)),
    transparent calc(100% - var(--transparent)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    transparent var(--transparent),
    black var(--solid),
    black calc(100% - var(--solid)),
    transparent calc(100% - var(--transparent)),
    transparent
  );

  cursor: grab;
  /* Hide scrollbar for IE, Edge add Firefox */
  -ms-overflow-style: none;
  scrollbar-width: none; /* For Firefox */
}
.scrollBox:active {
  cursor: grabbing;
}
.scrollBox::-webkit-scrollbar {
  display: none;
}

.content .categorie {
  width: max-content;
  gap: 2rem;
  padding-inline: 5vw;
  height: max-content;
  /* right: 0; */
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: no-wrap;
  white-space: nowrap;
  word-wrap: nowrap;
  /* transition: background-color 50ms linear; */
}

.content .categorie .filter:hover {
  scale: 1.1;
}
.content .categorie .filter:focus-visible {
  padding-bottom: 0.2rem;
  outline: none;
  scale: 1.2;
  height: fit-content;
  border-bottom: 2px solid var(--blue);
}

.bar.top {
  position: fixed;
  top: 0;
  padding-top: 1.5rem;
  padding-bottom: 0.75rem;
  background-color: var(--bg);
}
.bar.top .arrow {
  top: 1.5rem;
}

.categorie p {
  line-height: 1.4;
  font-weight: bold;
  cursor: pointer;
  color: white !important;
  text-shadow: 2px 2px 20px rgb(0, 0, 0);
  width: max-content;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.4rem;
}

.bar .arrow {
  z-index: 7;
  position: absolute;
  top: 0rem;
  left: 1vw;
  width: max-content !important;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: white;
  rotate: 90deg;
}
.bar .arrow.right {
  right: 1vw;
  left: auto;
  rotate: 270deg;
}

.bar .arrow::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--bg);
  filter: blur(6px);
}

.bar .arrow:hover {
  transform: scale(1.1);
}
.bar .arrow:active {
  transform: scale(1.2);
}
.bar .arrow:focus-visible {
  outline: none;
}
.bar .arrow:focus-visible * {
  background-color: var(--blue) !important;
}

.bar .arrow * {
  width: 3rem;
  aspect-ratio: 1;
}

/* MARK: Motive
*/

.motive {
  position: absolute;
  min-width: 10rem;
  z-index: 9;
  top: 3rem;
  left: 5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  outline: 1px solid white;
  /* background-color: var(--bg); */
  background-color: rgb(200, 200, 200);
  box-shadow: 0px 0px 30px 3px var(--charcoal);
}

.motive p {
  /* color: var(--charcoal) !important; */
  color: rgb(30, 30, 30) !important;
  letter-spacing: 2px;
  font-weight: bold;
  text-shadow: 2px 2px 10px var(--charcoaltrans);
}
.motive p.blue {
  color: var(--blue) !important;
}

.motive p:hover {
  opacity: 1;
  transform: scale(1.2);
}

.motive p:focus-visible {
  outline: none;
  /* padding-bottom: 0.1rem; */
  margin-block: 0.2rem 0.4rem;
  width: fit-content;
  transform: scale(1.2);
  border-bottom: 2px solid var(--blue);
}

@media (max-width: 680px) {
  .head .categorie {
    justify-content: start !important;
  }
}

.categorie p.blue {
  color: var(--blue) !important;
  /* border-left: 2px solid var(--blue); */
}

/* MARK: GALERIE
*/

.galarie {
  width: 100%;
  display: -ms-flexbox; /* IE10 */
  display: flex;
  justify-content: space-evenly;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 4px 0;
  /* outline: 2px dotted red; */
}

#nothing {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  color: white;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 24%; /* IE10 */
  flex: 24%;
  max-width: 24%;
  /* padding: 0 4px; */
}

.column img {
  /* margin-top: 8px; */
  margin-block: 4px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 48%;
    flex: 48%;
    max-width: 48%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 98%;
    flex: 98%;
    max-width: 98%;
  }
}

/* MARK: ZOOM
*/

.zoom {
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: zoom-out;
  background-color: rgba(0, 0, 0, 0.8);
}

.zoom img {
  max-width: 80vw;
  max-height: 90vh;
}

/* MARK: ZOOM
*/

.scroll {
  z-index: 99;
  position: fixed;
  bottom: 3rem;
  right: 4rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background-color: var(--charcoal);
  opacity: 0.7;
  outline: 1px solid var(--bg);
  box-shadow: 0px 0px 70px 5px white;
  transition: background-color 100ms ease-in-out;
}

.scroll:hover {
  transform: scale(1.1);
  background-color: var(--blue);
}

.scroll:active {
  transform: scale(1.2);
  background-color: var(--blue);
}

.scroll * {
  /* filter: invert(); */
  transform: rotate(180deg);
}

.sudoup {
  z-index: 90;
  position: fixed;
  bottom: 3rem;
  right: 4rem;
  width: 3rem;
  height: 3rem;
  scale: 1.2;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background-color: transparent;
  opacity: 0;
  outline: none;
}

body:has(.sudoup:focus-visible) .scroll {
  display: flex;
  transform: scale(1.2);
  background-color: var(--blue);
}

.head .gradient {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10rem;
  background: var(--bg);
  font-weight: bold;
  background: linear-gradient(0deg, var(--bg) 19%, rgba(255, 255, 255, 0) 100%);
}

.head .gradientSide {
  z-index: 6;
  position: absolute;
  bottom: 0.75rem;
  width: 6%;
  height: 2rem;
  background: var(--bg);
}

.gradientSide.top {
  position: fixed !important;
  top: 1.25rem;
}

.head .gradientSideLeft {
  left: 0;
  background: linear-gradient(
    90deg,
    var(--bg) 20%,
    rgba(255, 255, 255, 0) 100%
  );
}
.head .gradientSideRight {
  right: 0;
  background: linear-gradient(
    270deg,
    var(--bg) 20%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* MARK: Mask 
*/

.mask {
  width: 100%;
  aspect-ratio: 1;
  background-color: white;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.mask.primary {
  background-color: var(--blue) !important;
}
.mask.tertiary {
  background-color: black !important;
}

.scrollTop .mask,
.nav .mask {
  width: 70%;
}