@font-face {
  font-family: "ClashGrotesk-Semibold";
  src: url("../fonts/ClashGrotesk/ClashGrotesk-Semibold-e92b650cec52278e9bab345917566776.woff2") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "ClashGrotesk-Regular";
  src: url("../fonts/ClashGrotesk/ClashGrotesk-Regular-c72b2cb9e9de61d0d5815cd4d444766e.woff2") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "PressStart";
  src: url("../fonts/PressStart2P-Regular-43d7500ebddca14e957e69bc7d8aec8f.woff2") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "ClashGrotesk-Medium";
  src: url("../fonts/ClashGrotesk/ClashGrotesk-Medium-bd04730778752dfd1295c6d189fcb446.woff2") format("opentype");
  font-display: swap;
}

:root {
  --color-yellow: rgba(242, 175, 92, 1);
  --color-oringe: rgba(214, 64, 64, 1);
  --color-magenta: rgba(197, 3, 73, 1);
  --color-white: rgba(255, 255, 255, 1);
  --color-blue: rgba(20, 24, 115, 1);
  --color-dark-blue: rgba(20, 26, 64, 1);

  --font-theme-sombre: #fff;

  --background-theme-sombre: radial-gradient(
    circle farthest-corner at top center,
    rgba(0, 0, 0, 1) 0%,
    rgba(20, 24, 115, 0.7) 100%
  );

  --background-theme-clair: linear-gradient(
    170deg,
    var(--color-blue) 0%,
    var(--color-blue) 20%,
    var(--color-magenta) 31%,
    var(--color-oringe) 38%,
    var(--color-yellow) 51%,
    rgba(242, 175, 92, 0) 100%
  );

  --bg-gradient-yellow: linear-gradient(
      330deg,
      var(--color-yellow) 0%,
      var(--color-oringe) 68%
    );
  
  --background-footer: rgb(197, 3, 73);
  --dark-unie-background: rgb(20, 26, 64);
  --header-background: rgba(246, 235, 235, 0.31);

  --font-sans-serif:  "ClashGrotesk-Medium", sans-serif;
  --font-title-regular: "ClashGrotesk-Regular", sans-serif;
  --font-title-bold: "ClashGrotesk-Semibold", sans-serif;
  --font-decorative: "PressStart";
  /* Accessibility */

  --ac-focus : #4dfff8;
}

html {
  scroll-behavior: smooth;

  :focus-visible, 
  a:focus-visible {
    outline: 5px solid var(--ac-focus);
    text-decoration: underline;
    text-underline-offset: 3px;
    scale: 1.05;
    border-radius: 3px;
  }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 1000;
  text-decoration: none;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

#logo {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 2vw 1em;
  padding: 0;
  filter: brightness(1.5);

  & img {
    width: 23%;
    max-width: 170px;
    margin-left: 2%;
    margin-top: 50px;
  }
}

.logo-desktop {
    display: none;
}

.logo-mobile {
  display: block;
}

  
/* Borders */
/* .bordercolorB1, 
.border-pink {
  box-shadow: 0 0 2px #fff, inset 0 0 4px #fff, 0 0 16px var(--color-magenta),
    inset 0 0 16px var(--color-magenta), 0 0 28px var(--color-magenta), inset 0 0 16px var(--color-magenta);
}

.bordercolorB2, 
.border-oringe {
  box-shadow: 0 0 2px #fff, inset 0 0 4px #fff, 0 0 16px #f24b4b,
    inset 0 0 16px #f24b4b, 0 0 28px #f24b4b, inset 0 0 16px #f24b4b;
}

.bordercolorB3, 
.border-gold {
  box-shadow: 0 0 2px #fff, inset 0 0 4px #fff, 0 0 16px #f2af5c,
    inset 0 0 16px #f2af5c, 0 0 28px #f2af5c, inset 0 0 16px #f2af5c;
}

.bordercolorB4, 
.border-blue {
  box-shadow: 0 0 2px #fff, inset 0 0 4px #fff, 0 0 16px #141873,
    inset 0 0 16px #141873, 0 0 28px #141873, inset 0 0 16px #141873;
} */

body {
  font-family: var(--font-sans-serif);
  font-size: 18px;
  background: var(--background-theme-sombre);
  color: var(--font-theme-sombre);
}

main {
  box-sizing: border-box;
  padding-top: 40px;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

section, 
.section {
  width: 100%;
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: 2vw 1em;

  /* border: solid green 1px; */

  &.full-width {
    width: 100%;
    max-width: unset;
  }
}

.no-break {
  white-space: nowrap;        /* Prevents wrapping at all */
  overflow-wrap: normal;      /* Prevents word breaking */
  word-break: normal;         /* Default behavior */
  hyphens: none;              /* Prevents automatic hyphenation */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title-bold),  fantasy, sans-serif;
  color: var(--font-theme-sombre);
  line-height: 1.5;
  font-weight: normal;
}

p,
a,
td {
  text-decoration: none;
}

p {
  line-height: 1.5;
  font-size: 18px
}

ul { 
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 18px
}

address {
  font-style: normal;
}

.button {
  font-family: var(--font-title-bold);
  background: none;
  cursor: pointer;
  min-height: 50px;
  padding: 0px 44px;
  border-radius: 88px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  color: whitesmoke;
  border: 2px white solid;
  transition: all .3s ease-in-out;
  gap: 16px;

  &:hover {
    /* text-decoration: underline;
    text-underline-offset: 3px; */
    scale: 1.05;
  }

  &:focus-visible {
    border-radius: 88px;
  }

  &.white {
    &:hover {
      border: 2px var(--color-magenta) solid;

      i {
        color: var(--color-white);
      }
    }
  }

  &.yellow {
    &:hover {
      border: 2px var(--color-yellow) solid;
    }
  }
  &.dark {
    color: var(--color-white);
    border: 3px var(--color-magenta) solid ;
    background: var(--dark-unie-background);
    &:hover {
      /* border: 3px var(--color-magenta) solid; */
      color: var(--color-magenta);
    }
  }
}

@media (min-width: 768px) {

  h1 {
    font-size: 3em;
  }

  h2 {
    font-size: 2.5em;
  }

  h3 {
    font-size: 2em;
  }

  h4 {
    font-size: 1.5em;
  }

  p, ul, li {
    line-height: 1.5;
    font-size: 1em;
  }

}

/* Desktop only (1024px and up) */
@media (min-width: 1024px) {
  section {
    padding: 2vw;
  }

  h1 {
    font-size: 4em;    /* Change with REM */
  }

  h2 {
    font-size: 3em;
  }

  h3 {
    font-size: 2.5em;
  }

  h4 {
    font-size: 1.5em;
  }

  .logo-mobile {
  display: none;
  }

  .logo-desktop {
    display: block;
  }

}