LOLv333/style/responsive.css

/*===========================Moyen format : Tablette et petite fenêtres PC ===*/
@media(min-width: 650px){
  header{
    height: 60px;

          h1{
            margin-bottom: 5px;

                  img{
                    height: 40px;
                  }
          }
          nav > ul{

            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            height: 44px;
            margin-top: 16.1px;
            margin-right: 13.12px;
            min-width: 444px;
            box-sizing: border-box;

                  li{
                    height: 100%;
                  }

                  .textBtnStyle{
                    border-radius: 0;
                    width: 93px;
                    height: 100%;
                  }
          }
  }

  main{
    #homeContent{
      height: 77vh;
      grid-template-columns: 2fr 2fr 1fr;
      grid-template-rows: 0.7fr 2fr;

          #titleSection{
            height: 110%;
                  h2{
                    font-size: 27px;
                          small{
                            font-size: 20px;
                          }
                  }
          }

          #hourSection{
            grid-column: 1;
            width: 50%;
            height: 100%;
            justify-self: start;
          }

          address{
            padding-top: 16.1px;
          }

          #planSection{
            grid-column: 2 / 4;
                  #planContainer{
                    width: 110%;
                    height: auto;
                    margin-left: -88px;
                    margin-top: -50px;

                          @media(min-width: 800px){
                            margin-top: -88px;
                          }
                  }
          }

          #extLinkSection{
            justify-content: flex-start;
            padding-top: 33px;
          }

      }
      #statuSection{
            .textBtnStyle{
              font-size: 16.1px;
              width: 117px;
              margin-right: 33px;
            }

            #statusDesc{
              font-size: 16.1px;
            }
      }

      #extraContent{


              #aboutSection{

              }

              #eventSection{
                       #eventContent{
                         li{
                           .iconBtnStyle{
                              right: 3.33%;
                           }
                         }
                       }
              }
      }
    }
  }



/*===========================Grand format : écrans larges et grands ===*/
@media(min-width: 1300px){
  header{
    nav > ul{

      font-size: 27px;

            li{
              height: 100%;
            }

            .textBtnStyle{
              padding-left: 16.1px;
              width: 133px;
            }
    }
  }

  main{
    #homeContent{


          #titleSection{
            width: 90%;
          }

          #hourSection{
            height: 77%;
            width: 44%;

                  h3{
                    font-size: 20px;
                  }

                  ol{
                    font-size: 16.1px;
                          strong{
                            font-size: 22px;
                          }
                  }
          }

          address{
            font-size: 22px;
          }

          #planSection{
                  #planContainer{
                    width: 100%;
                    height: auto;
                    margin-left: -88px;
                    margin-top: -133px;
                  }
          }

          #extLinkSection{
            a img{
              height: 77px;
            }
          }

    }

    #statuSection{
            #statusDesc{
              padding-left: 77px;
              font-size: 20px;
            }
            #lolStatus{
              font-size: 33px;
              height: 77px;
              width: 50%;
              border-radius: 33px 0 0 33px;
              margin-left: -88px;
            }

            .textBtnStyle{
              font-size: 22px;
              margin-right: 33px;
              padding-left: 16.1px;
            }
    }

    #extraContent{
      height: 90vh;
      flex-direction: row;
      overflow: hidden;

            #aboutSection{
              font-size: 22px;
            }

            #eventSection{
                    #eventContent{
                            li{
                                    .iconBtnStyle{
                                      width: 44px;
                                      height: 44px;
                                      border-radius: 22px;
                                      right: 1.61%;
                                    }

                                    .icon{
                                      height: 22px;
                                    }
                            }

                            details{
                              summary{
                                .title{
                                  font-size: 22px;

                                  h4{
                                    font-size: 27px;
                                  }
                                }

                                .resume{
                                  font-size: 16.1px;
                                }
                              }
                              .description{
                                font-size: 16.1px;
                              }
                            }
                    }
            }
    }
  }


}