@import url("../main.css");

body{
  position: relative;
}
:root{
  --header-height: 25vh;
  --top-left-menuBtn-height: 25px;
}
.container{
  padding-block-start: var(--header-height);
  background-color: transparent;
  backdrop-filter: blur(20px);  
}
.container *, footer{
  transition: animation 0.5s ease, translate 0.5s ease, opacity 0.5s ease;
}
.container2{
    position: fixed;
    height: 100dvh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: calc(var(--header-z-index) + 1);
    background-color: #fff;
    cursor: progress;

    img{
      height: 50px;
      margin-inline-start: 10px;
    }
}
.container2[data-inserted]{
  animation: fade-out 2s ease 2s forwards;
  pointer-events: none;
  user-select: none;

  & .Welcome{
    text-transform: capitalize !important;
  }
  & ~ .container{
    animation: fade-in 1.5s ease 1.5s;
    opacity: 1;

    & .Welcome{
      text-transform: capitalize !important;
    }
  }
}
.container2:not([data-inserted]) ~ .container{
  opacity: 0;
}
@keyframes fade-out{
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
header{
  padding-block-start: 10px;
  padding-block-end: 10px;
  width: 100%;
  overflow-x: clip;
  display: flex;
  height: var(--header-height);
  position: fixed;
  top: 0;
  gap: 1rem;
  background-image: linear-gradient(to right, #aed4f8 0%, #c4e3ef 1%, #79b6ef 100%);
  border-block-end: 2px solid white;
  z-index: var(--header-z-index);
  justify-content: space-between;
}
img{
  font-style: italic;
}
.logo__container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: 25px;
  gap: 5px;
  position: relative;
  width: 35%;
  user-select: none;
  align-self: center;

  .logo__wrapper{
    cursor: default;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.logo{
  background-image: url("/images/logos/Nouveau_logo-CECCE_jpg.jpg");
  background-size: cover;
  width: 100%;
  aspect-ratio: 3/1;
  user-select: none;
  pointer-events: none;
  border-radius: 10px;
  object-fit: cover;
}
h2#myName.Welcome{
  font-size: 1.757vw;
}
h1#myName2.Welcome{

  &::after{
    content: "";
    background-image: url("images/gif/ZKZg.gif");
    height: 50px;
    width: 50px;
    aspect-ratio: 1;
    object-fit: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    margin-inline-start: 15px;
  }
}
.Welcome{
  position: relative;
  text-transform: capitalize !important;
  width: 100%;
  display: -webkit-box;
  overflow: clip;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-wrap:balance;
  text-align: center;

  &::before{
    content: "Bienvenue";
    margin-inline-end: 5px;
    font-weight: 500;
  }
}
.headerMenu, .mainMenu, .gameMenu{
  display: flex;
  gap: 25px;
  padding-block-start: 10px;
  padding-inline-end: 25px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  height: fit-content;
  overflow: auto;

  & button.menuItem{
    border: 0;

    & p{
      font-size: 1em;
      bottom: -22px
    }
  }
  a.menuItem{

    &:hover{
      transform: scale(0.9);
      box-shadow: 0 0 20px white;

      & p{
        transform: scale(1.2);
        text-shadow: 0 0 10 #fff;
      }
    }
    &:active{
      transform: scale(0.8);
      box-shadow: 0 0 30px white;

      & p{
        transform: scale(1.4);
        text-shadow: 0 0 20 #fff;
      }
    }
  }
  & .menuItem{
    text-align: center;
    border-radius: 10px;
    background-color: white;
    aspect-ratio: 1;
    height: 4.539vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #112A46;
    text-decoration: none;
    position: relative;
    margin-block-end: 17px;
    transform-origin: center center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, text-shadow 0.3s ease;

    &.Exit{
      background-color: #9f4553;
    }
    & p{
      font-size: 0.703vw;
      display: -webkit-box;
      overflow: clip;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      position: absolute;
      bottom: -17.5px;
      font-weight: 500;
      user-select: none;
      transition: transform 0.3s ease;
    }
    &#theExitBtn{
      transition: filter 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;

      & p, s{
        transition: color 0.3s ease, transform 0.3s ease;
      }
      & img{
        transition: transform 0.3s ease;
        transform-origin: center center;
      }
      &:hover{
        box-shadow: 0 0 20px #ffffff;

        & p, s{
          color: #391818;
        }
      }
      &:active{
        box-shadow: 0 0 30px #fff;
      }
      & img{
        position: absolute;
      }
    }
    & img{
      width: 80%;
      object-fit: cover;
      margin-block: auto;
      user-select: none;
      pointer-events: none;

      &.y-full{
        height: 100%;
        border-radius: 10px;
      }
      &.full{
        width: 100%;
        height: 100%;
        border-radius: 10px;

        &.excess{
          height: 63px;
          width: 63px;
        }
      }
      &.big{
        padding: calc(0.732vw / 2);
      }
      &.exitBtn{
        background-color: #A91F1F;
        padding: 0.732vw;
        margin-inline: 10px;
        font-style: italic;
      }
    }
  }
}
[capital] {
  text-transform: capitalize !important;
}
.headerMenu{
  height: 100%;
}
label[for="headerMenu__Opener"]{
  display: none;
}
.menuLogo {
  /* background: red; */
  margin-inline-start: 15px;
  margin-block-start: 15px;
  height: var(--top-left-menuBtn-height);
  /* width: 20px; */
  cursor: pointer;
  aspect-ratio: 6 / 5;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;

  .rect {
    background: black;
    height: 20%;
    width: 100%;
    border-radius: 200px;
    position: absolute;
    left: 0;
    bottom: 50%;
    transform: translate(0, 50%);
    transition: transform 0.3s ease, bottom 0.3s ease;

    &.rectOne{
      transform: translate(0, 100%);
      bottom: 100%;
    }
    &.rectThree{
      transform: translate(0, 0);
      bottom: 0;
    }
  }
}
#headerMenu__Opener{
  opacity: 0;
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  top: 10px;
  left: 10px;
}
#headerMenu__Opener:checked ~ label[for="headerMenu__Opener"] .menuLogo{
  transform: translate(0, -10px);

  .rectOne {
    transform: rotate(45deg) translate(0, 0);
    bottom: 0;
  }
  .rectTwo {
    transform: rotate(45deg)  translate(0, 0);
    bottom: 0;
  }
  .rectThree {
    transform: rotate(-45deg)  translate(0, 0);
    bottom: 0;
  }
}
.long{
  width: 8.346vw;
  height: fit-content;
  position: relative;
  object-fit: cover;

  img{
    width: 100%
  }
}
main{
  background-color: transparent;
  height: calc(100vh - var(--header-height) - var(--top__jump-height));
  width: 75%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mainMenu{
  width: 65%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-block: 5%;

}
.black{
  background-color: #112A46 !important;
}
.green5bad3f{
  background-color: #5bad3f !important;
}
@media (max-width: 1024px) and (min-height: 1366px) {
  .headerMenu{
    width: 40%;
  }
  .Menu .menuItem{
    height: 10.539vw;
    width: fit-content;

    p{
      bottom: -35%;
      font-size: 2.2vw;
    }
  }
  h2#myName.Welcome {
    font-size: 2.757vw;
  }
  .logo__container {
    width: 45%;
    position: absolute;
    left: 0;
  }
  header{
    justify-content: flex-end;
  }
}

@media (max-width: 820px) {
  .headerMenu{
    width: 40%;
  }
  .Menu .menuItem{
    height: 7.539vw;
    width: fit-content;

    p{
      bottom: -35%;
      font-size: 1.3vw;
    }
  }
  h2#myName.Welcome {
    font-size: 2.757vw;
  }
  .logo__container {
    width: 45%;
    position: absolute;
    left: 0;
  }
  header{
    justify-content: flex-end;
  }
  .mainMenu{
    width: 100%;
    justify-content: flex-end;
  }
}
@media (max-width: 430px){
  header .headerMenu {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    user-select: none;
    transform: translateY(var(--header-height));
    transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, width 0.3s ease, height 0.3s ease, top 0.3s ease;
  }
  #headerMenu__Opener:checked ~ header .logo__container ~ .headerMenu{
    transform: translateY(0);
    pointer-events: visible;
    opacity: 1;
    user-select: auto;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: linear-gradient(to right, #feffff 0%, #ddf1f9 1%, #a0d8ef 100%);
    top: 0;
  }
  #headerMenu__Opener:checked ~ header{
    height: 100%;
    width: 100%;
  }
  main {
    width: 100%;
  }
  .logo__wrapper{
    width: 75%;
  }
  .logo__container{
    height: 95%;
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translate(-50%, 0);
  }
  label[for="headerMenu__Opener"]{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  body header{
    justify-content: normal;
  }
  h2#myName.Welcome {
    font-size: 4vw;
  }
  .Menu .menuItem {
    height: 16.539vw;
    width: fit-content;
  }
  .Menu .menuItem p {
    font-size: 2.85vw;
  }
}
.secret{
  opacity: 0;
  user-select: none;
  cursor:default;
  display: none;
  transition: opacity 0.3s ease;

  &:hover {
    opacity: 1;
    user-select: auto;
    display: flex;
    cursor: pointer;
  }
}