nuitdelinfo_2021/static/scss/layouts/quicksearch.scss

#quicksearch{
  position: fixed;
  display: none;
  padding: 30px;
  overflow: auto;
  padding-top: 100px;
  height: 100vh;
  z-index: 9999;
  width: -webkit-fill-available;
  background: rgba(0,0,0,0.9);
  top: 0;
  left: 0;
  &:target{
    display: block !important;
  }
  .close{
    position: absolute;
    right: 20px;
    top: 20px;
    transition: all ease-in-out 0.3s;
    i{
      font-size: 70px;
      color: $light;
    }
    &:hover{
      transform: rotateZ(90deg);
    }
  }
  .search-bar{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    input{
      width: 80%;
      background: transparent;
      color: $light;
      font-size: 30px;
      border: none;
      border-bottom: 3px solid $light;
      padding: 15px;
      &::placeholder{
        color: $light2;
        font-size: 30px;
      }
    }
    i{
      font-size: 50px;
      color: $light;
      cursor: pointer;
    }
  }
  .fast-search{
    margin-top: 50px;
    h2{
      text-align: center;
      font-size: 35px;
    }
    .flex-search{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      .search-col{
        flex: 0 1 30%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &:first-child, &:nth-child(2){
          border-right: 2px solid $accent;
        }
        .titre{
          text-align: center;
          font-size: 28px;
          color: $accent;
          margin: 15px 0;
        }
        .search-card{
          display: flex;
          width: 85%;
          margin: auto;
          margin-top: 20px;
          background: $background4;
          align-items: center;
          img{
            width: 50px;
          }
          .name{
            font-size: 20px;
            margin-left: 15px;
          }
        }
      }
    }
  }
}

@media all and (max-width: 1060px){
  .search-col, .flex-card .card{
        flex: 0 1 45% !important;
  }
}

@media all and (max-width: 750px){
  .search-col, .flex-card .card{
        flex: 0 1 90% !important;
  }
}