/* ----------------y-GoogeleFonts Syne & Inter- */

/* html{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ff503f;
  padding: 0px;
  margin: 0px;
  
  } */

  span{
    display: none;
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    color: #ffffffdd;
    background-color: #00205b2a;
    opacity: 0;
  }
  span p{
    font-size: 13pt;
    font-family: 'Inter','Syne',Arial,sans-serifs;
  }
  span img{
    filter: invert(1) drop-shadow(3px 3px 10px #00205d);
    opacity: 0.1;
    display: block;
    position: absolute;
    transform: rotate(0deg);
    animation: rotateAndBounce 2s ease-in-out 9s infinite;
    animation-iteration-count: 3;
  }

  @media (orientation: landscape) {
    html {
      -webkit-text-size-adjust: 100%;
      height: 100vh !important;
      width: 100vw !important;
      overflow: hidden !important;
    }
    .sommaire{
      filter: blur(33px);
    }
    span{
      display: flex !important;
      opacity: 1 !important;
      height: 100vh !important;
      width: 100vw !important;
    }
  }
  @media (orientation: portrait) {
    html {
      -webkit-text-size-adjust: 100%;
    }
    body{
      filter: blur(0px);
    }
  }
body {
    font-family: "Inter", Arial, sans-serif;
    max-width: 100vw;
    min-width: calc(100% - 24.6px);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  div.sommaire{
    /* height: 933px; */
    height: 55rem;
    min-height: 85vh;
    max-height: 94vh;
    width: auto;
    min-width: 98vw;
  }
  
  header {
  height: 3rem;
  width: 98%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 6px;
  }

header img {
  height: 3rem;
  width: auto;
  filter: grayscale(0) opacity(100%) brightness(1) ;
  position: absolute;
  top: 5px;
  transition: 0.33s ease-in-out;
}
header img:hover {
  filter: grayscale(1) opacity(33%) brightness(142.420);
}

  section {
  padding: 12.3px 20px;
  background-color: aliceblue;
  background-color: rgba(240, 248, 255, 0.66);
  margin: 6.2px 12.3px;
  border-radius: 12.3px;
  min-height: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: -webkit-fill-available;
  }
  a {
  transition: 0.5s;
  }
  a:hover {
  font-weight: 700;
  }
  a:visited {
  /* color: #84bd00; */
  color: #ff503f;
  }


  h1{
  font-family: "Syne", Arial, sans-serif;
  font-optical-sizing: auto;
  color: #2b323f;
  margin: 0px 12.5px;
  padding: 0px;
  }
  li a{
  font-family: "Inter", sans-serif;
  letter-spacing: 0.005em;
  /* line-height: 1.3rem; */
  }
  footer {
  height: 36px;
  width: 100%;
  color: #f0f8ff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  font-family: "Inter", Arial, sans-serif;
  font-weight: 500;
  font-size: smaller;
  visibility: visible;
}
  footer p{
    padding: 10px 0px 0px 0px;
    height: auto;
    max-height: 36px;
    width: 98vw;
    display: inline-block;
    position: absolute;
    bottom: 0px;
  }
  @media only screen and (max-width: 700px) {
    footer p{
      padding: 10px 0px 0px 0px;
      line-height: 12.5pt;
      position:static;

    }
  }


  /* --------------LinearGradient - ylf */
@keyframes gradient {
0% {
    background-position: 0% 50%;
}
50% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
body {
background: linear-gradient(-45deg, #ebf1f2, #a2d4f2, #fff, #bde3f2);
background: -o-linear-gradient(135deg, #ebf1f2, #a2d4f2, #fff, #bde3f2);
background: linear-gradient(-45deg, #ebf1f2, #a2d4f2, #fff, #bde3f2);
background-size: 400% 400%;
animation: gradient 22s ease infinite;
/* height: 100vh;
overflow: hidden; */
}

@keyframes rotateAndBounce {
  0% {
      transform: rotate(0deg) scale(1);
  }
  25% {
      transform: rotate(-405deg) scale(1.333);
  }
  37%{
      transform: rotate(-405deg) scale(1.618);
  }
  42%{
      transform: rotate(-405deg) scale(1.333);
  }
  50% {
    transform: rotate(-405deg) scale(1.618);
}
  100% {
      transform: rotate(0deg) scale(1);
  }
}


/* -----------Fin-style-ylf */

/* Color Theme Swatches in Hex
.Blue-sky-as-a-background-on-a-clear-day.-1-hex { color: #82B8D9; }
.Blue-sky-as-a-background-on-a-clear-day.-2-hex { color: #A2D4F2; }
.Blue-sky-as-a-background-on-a-clear-day.-3-hex { color: #485359; }
.Blue-sky-as-a-background-on-a-clear-day.-4-hex { color: #BDE3F2; }
.Blue-sky-as-a-background-on-a-clear-day.-5-hex { color: #EBF1F2; }
lien color : https://color.adobe.com/fr/search?q=sky%20light */