/*================ GAMME COLOR ======================*/
:root{
  --back-color: #FFFF4D;
  --main-color: #000000;
}

/*================ ANIMATION ======================*/
@import url("/animation.css");

/*================ DESACT DEFAULT ======================*/
@import url("/default.css");

/*================ BODY ======================*/
html, body{
  margin: 0;
  padding: 0;
  scrollbar-color: var(--back-color) var(--main-color);
  background-color: var(--main-color);
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  position: relative;
  z-index: -33;
}

/*================ CLASSES COMMUNES ======================*/
@import url("/common.css");

/*================ STRUCTURE ======================*/

header{
  width: 100%;
  height: 93px;
  margin: 0;
  position: relative;
  top:0;
  z-index: 0;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  border-style: solid;
  border-width: 0 0 1.61px 0;

  border-color: var(--main-color);
  background-color: var(--back-color);

        h1{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          gap: 13.12px;
          padding-left: 13.12px;
          margin-bottom: 13.12px;
                img{
                  height: 50px;
                  width: auto;
                }

                .cool-name{
                  font-family: 'karrik';
                  font-size: 50px;
                  padding-top: 13.12px;

                  .trans-symbol{
                    font-family: 'velvelyne';
                    font-weight: bold;
                  }
                }

                .plain-name{
                  position: relative;
                  z-index: -33;
                  opacity: 0;
                  width: 0;
                }
        }

        nav > ul{
          width: auto;
          height: 100%;
          margin: 0;

          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          margin-right: 7.77px;
          margin-top: 13.12px;

                .textBtnStyle{
                  border-radius: 0;
                  width: 117px;
                }
        }

}

video{
  height: 110%;
  width: auto;
  position: absolute;
  inset: 0;
  z-index: -30;
}

.closedBackground{
  opacity: .5;
  mix-blend-mode: exclusion;
}

.openBackground{
  visibility: collapse;
}


main{
  position: relative;
  z-index: -33;
  overflow: hidden;

      #homeContent{
        height: 66vh;
        width: 100%;
        position:relative;
        z-index: 0;
        display: grid;
        grid-template-columns: 2.5fr 2fr 1fr;
        grid-template-rows: 1fr 1.5fr;

              #titleSection{
                grid-column: 1;
                grid-row: 1;
                width: 100%;
                height: 100%;

                      h2{
                        text-transform: uppercase;
                        font-family: 'karrik';
                        font-size: 22px;
                        line-height: 1em;

                              small{
                                text-transform: none;
                                font-size: 15px;
                                font-family: 'velvelyne';
                                font-weight: bold;
                                line-height: 0.3em;
                                padding-left: 7.77px;
                              }
                      }
              }

              #hourSection{
                grid-column: 3;
                grid-row: 2;
                width: 100%;
                height: 77%;
                align-self: end;
                justify-self: end;
                padding: 0;

                      h3{
                        width: 100%;
                        padding-bottom: 13.12px;

                        font-family: 'karrik';
                        text-transform: uppercase;
                        font-weight: normal;
                        font-size: 14px;

                        border-radius: 0;
                        border-style: solid;
                        border-width: thin;

                        padding: 3.33px;
                        margin-bottom: 3.33px;
                        box-sizing: border-box;

                        border-color: var(--main-color);
                      }

                      ol{
                        padding-left: 3.33px;

                        font-family: 'karrik';
                        text-transform: uppercase;
                        font-weight: normal;
                        font-size: 11px;

                        strong{
                          font-family: 'velvelyne';
                          font-weight: bold;
                          font-size: 16.1px;
                        }

                        li{
                          margin-bottom: 7.77px;
                        }
                      }
              }

              address{
                grid-column: 2;
                grid-row: 1;
                width: 150%;
                font-size: 15px;
                padding-top: 33px;
              }

              #planSection{
                grid-column: 1 / 3;
                grid-row: 2;
                color: var(--back-color);
                justify-self: end;

                #planContainer{
                  width: 100%;
                  height: 100%;
                  margin-left: 13.12px;
                  margin-top: 0;
                }

                img{
                  position: relative;
                  z-index: 0;
                  width: 90%;
                  height: auto;
                }

                svg{
                  fill: currentColor;
                  position: absolute;
                  z-index: -1;
                  width: 90%;
                  height: auto;
                  top: 4.44px;
                  left: -1.61px;
                }
              }

              #extLinkSection{
                grid-column: 3;
                grid-row: 1;
                width: 77%;
                height: 133%;
                justify-self: end;

                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-end;
                margin-right: 16.1px;
                margin-top: 7.77px;
                gap: 13.12px;

                a{
                  cursor: alias;
                        img{
                          width: auto;
                          height: 55px;
                          pointer-events: none;
                        }
                }

              }
      }

      #statuSection{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        height: 20vh;

            .textBtnStyle{
              width: 66px;
              font-size: 11px;
              margin-right: 7.77px;
            }

            #statusDesc{
              width: 77%;
              padding: 7.77px;
              padding-right: 16.1px;
              font-size: 16.1px;
              line-height: 1.1em;

              small{
                font-size: 13.12px;
                line-height: 0.333em;
              }
            }

            #lolStatus{
              position: relative;
              z-index: 33;
              width: 40%;
              height: 50px;
              display: flex;
              flex-direction: row;
              align-items: center;

              font-family: 'karrik';
              text-transform: uppercase;
              font-size: 22px;
              line-height: 1em;

              padding-left: 16.1px;
              box-sizing: border-box;
              border-radius: 22px 0 0 22px;

              background-color: var(--main-color);
              color: var(--back-color);

                small{
                  font-size: 1px;
                  opacity: 0;
                }
            }
      }

      #extraContent{
        width: 100%;
        height:auto;
        position: relative;
        z-index: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;

              #aboutSection{
                padding: 13.12px;
                padding-right: 33px;
                font-size: 16.1px;
                line-height: 1.333em;
              }

              #eventSection{
                position: relative;
                z-index: -1;
                height: auto;
                width: 100%;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                gap: 0;
                padding-bottom: 16.1px;

                      #eventContent{
                        width: 100%;
                        max-height: 77vh;
                        margin-top: 7.77px;
                        overflow-y: scroll;
                        display: flex;
                        flex-direction: column-reverse;
                        align-items: flex-start;
                        justify-content: flex-start;
                        gap: 13.12px;

                        li{
                          width: 100%;
                          height: auto;
                          position: relative;
                          z-index: 33;

                          a{
                            width: 100%;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: space-around;
                          }

                          .iconBtnStyle{
                            position: absolute;
                            z-index: 34;
                            width: 33px;
                            height: 33px;
                            right: 1%;
                            top: 33px;
                          }

                          .icon{
                            transform: rotate(45deg);
                            pointer-events: none;
                          }
                        }

                        details{
                          padding: 0;
                          position: relative;
                          z-index: 0;
                          pointer-events: all;
                          width: 95%;
                          height: 99px;
                          border-radius: 33px;
                          border-style: solid;
                          border-width: thin;
                          border-color: var(--main-color);
                          background-color: var(--back-color);
                          color: var(--main-color);

                           summary {
                             padding-left: 33px;
                             padding-top: 7.77px;
                             height:50px;
                             position: relative;
                             z-index: 0;


                                   .title{
                                     position: relative;
                                     display: flex;
                                     flex-direction: row;
                                     justify-content: space-between;
                                     align-items: center;

                                     width: 77%;
                                     box-sizing: border-box;
                                     height: 16.1px;
                                     padding-top: 3.33px;
                                     padding-left: 33px;
                                     margin-bottom: 13.12px;

                                     font-family: 'velvelyne';
                                     font-weight: bold;
                                     font-size: 16.1px;

                                     p{
                                       margin: 0;
                                     }

                                     h4{
                                       margin: 0;
                                       font-family: 'velvelyne';
                                       font-weight: bold;
                                       font-size: 16.1px;
                                    }
                                  }

                                  .resume{
                                    font-family: 'velvelyne';
                                    font-weight: bold;
                                    font-size: 13.12px;
                                    text-transform: none;
                                    padding-left: 33px;
                                    width: 90%;
                                    height: 33px;

                                    border-radius: 16.1px;
                                    border-style: solid;
                                    border-width: thin;
                                    border-color: var(--main-color);
                                    box-sizing: border-box;
                                  }

                           }

                           ::marker{
                             color: var(--back-color);

                           }

                           .description{
                             margin-left: 44px;
                             margin-bottom: 33px;
                             height: auto;
                             width: 95%;
                             overflow-y: scroll;
                             background-color: var(--back-color);
                             border-radius: 16.1px;
                             border-style: solid;
                             border-width: thin;
                             border-color: var(--main-color);

                             margin-top: 44px;
                             padding: 13.12px;
                             padding-right: 33px;

                             box-sizing: border-box;


                             font-size: 13.12px;
                             font-family: 'velvelyne';
                             font-weight: bold;
                             text-transform: none;
                           }
                         }

                         details:hover{

                         }

                         details[open]{
                           height: auto;
                           border-color: var(--back-color);
                           color: var(--back-color);
                           background-color: var(--main-color);

                           summary .resume{
                             border-color: var(--back-color);
                           }

                           ::marker{
                             color: var(--main-color);
                           }

                           .description{
                             color: var(--main-color);
                           }
                         }
                }
              }
      }
}

#posterWindow{
  visibility: collapse;
  top: 5vh;
  left: 5vw;
}

#posterContainer{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

canvas{
  visibility: collapse;
  height: 110%;
  width: auto;
  position: absolute;
  inset: 0;
  z-index: -32;

  opacity: .5;
  filter: hue-rotate(13.12deg);
}