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

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

body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  overflow-y: hidden;
  position: relative;
  z-index: -33;
  box-sizing: border-box;
}
/*================ 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;
                }
        }

}

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

.cute-texture-video{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -33;
}

.cute-texture{
  position: absolute;
  width: 100%;
  height: 110%;
  top: 0; 
  left: 0;
  z-index: -33;
}

.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;

              aside{
                grid-row: 2;
                grid-column: 2;
                align-self: end;
                justify-self: end;
                color: var(--main-color);
                position: relative;

                z-index: 33;

                margin-bottom: 13.12px;
                margin-right: 13.12px;

                      #openMsg{
                        width: 33px;
                        height: 33px;
                        animation: float 1.61s infinite;
                        box-sizing: border-box;

                        border-radius: 13.12px;
                      }

                      #openMsg:hover{
                        animation: none;
                      }

                      #msgWindow{
                        border-style: none;
                        background-color: transparent;
                        position: fixed;
                        top: 117px;
                        left: 33px;
                        animation: none;
                        z-index: 1312;
                        margin: 0;

                              .floatingWindow{
                                width: 277px;
                                height: auto;
                                margin-top: 33px;

                                text-transform: none;
                                font-size: 15px;
                                font-family: 'velvelyne';
                                font-weight: bold;
                                padding-bottom: 13.12px;
                                border-width: 3.33px;
                                border-style: double solid solid;

                                      p{
                                        padding: 7.77px;
                                        padding-right: 16.1px;

                                              strong{
                                                font-family: 'karrik';
                                                font-weight: normal;
                                                text-transform: uppercase;
                                                font-size: 16.1px;
                                              }
                                      }
                              }
                      }

                      #msgWindow::backdrop{
                        background-color: var(--back-color);
                        opacity: .333;
                        width: 100vw;
                        height: 100vh;
                        box-sizing: border-box;
                      }

              }

              #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%;
                        margin-bottom: 16.1px;

                        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-top: 16.1px;
                        }
                      }
              }

              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;

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

                #planContainer{
                  width: 100%;
                  height: max-content;
                  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;
                        }
                }

              }

              #adhesionSection{
                visibility: collapse;
                grid-column: 1;
                grid-row: 2;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;

                .textBtnStyle{
                  position: relative;
                  z-index: 33;
                  width: 90%;
                  height: 33px;
                  font-size: 13.12px;
                  margin-top: 13.12px;
                }

                #addUserWindow{
                        border-style: none;
                        background-color: transparent;
                        position: fixed;
                        top: 77px;
                        left: 16.1px;
                        animation: none;
                        z-index: 1312;
                        margin: 0;

                              .floatingWindow{
                                width: 333px;
                                height: auto;
                                margin-top: 33px;

                                text-transform: none;
                                font-size: 15px;
                                font-family: 'velvelyne';
                                font-weight: bold;
                                padding-bottom: 13.12px;
                                border-width: 3.33px;
                                border-style: double solid solid;

                                      p{
                                        padding: 7.77px;
                                        padding-right: 16.1px;

                                              strong{
                                                font-family: 'karrik';
                                                font-weight: normal;
                                                text-transform: uppercase;
                                                font-size: 16.1px;
                                              }
                                      }
                              }
                      }

                      #addUserWindow::backdrop{
                        background-color: var(--back-color);
                        opacity: .333;
                        width: 100vw;
                        height: 100vh;
                        box-sizing: border-box;
                      }
              }
      }

      #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: 33px;
              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: 100%;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                gap: 0;
                padding-bottom: 16.1px;
                padding-right: 16.1px;

                overflow-y: scroll;

                        h3{
                          position: relative;
                          margin-bottom: 7.77px;
                        }


                        article{
                                h4{
                                  padding: 16.1px;
                                }

                                a{
                                  margin-right: 33px;
                                }

                                .date{
                                  padding: 16.1px;
                                }
                        }

                        .solidBox{
                          width: 100%;
                          height: auto;
                          display: flex;
                          flex-direction: row;
                          justify-content: space-between;
                          align-items: center;
                          padding: 0;
                          box-sizing: border-box;
                          flex-shrink: 0;
                        }

                        .solidBox:has(details[open]){
                          color: var(--back-color);
                          background-color: var(--main-color);
                          border-color: var(--back-color);
                          border-radius: 16.1px;
                          margin-top: 7.77px;
                          overflow: hidden;
                          margin-bottom: 7.77px;

                          details{
                            cursor: default;
                          }

                        }

                        .iconBtnStyle{
                          width: 33px;
                          height: 33px;

                          .icon{
                            transform: rotate(45deg);
                          }
                        }

                        details{
                          width: 100%;
                          height: 100%;
                          cursor: copy;
                          overflow: hidden;

                                summary{
                                  display: flex;
                                  flex-direction: row;
                                  align-items: center;
                                  justify-content: space-between;
                                  width: 100%;
                                  box-sizing: border-box;
                                  list-style-type: none;
                                  padding: 16.1px;
                                }

                                article{
                                  width: 100%;
                                  cursor: default;
                                  text-transform: none;
                                }
                        }
                }
      }
}
