/* @font-face {
                    font-family: 'JetBrains Mono';
                    src: url('JetBrainsMono-VariableFont_wght.ttf');
                    src: url('JetBrainsMono-VariableFont_wght.woff') format('woff'),
                        url('JetBrainsMono-VariableFont_wght.tff')  format('truetype'),
                } */
                  
                  body {
                      display: flex;
                      min-height: 100vh;
                      flex-direction: column;
                      /* background: #00C9FF; */
                      /* background: linear-gradient(130deg, #e3ffe7 0%, #d9e7ff 100%); */
                      background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);


                      color: #fff;
                  }

                  main {
                      flex: 1 0 auto;
                  }
                  
                  .blur {
                      /* background-color: #ffffff4eca; */
                      backdrop-filter: blur(57px);
                      width: 100vw;
                  }
                  
                  .nav {
                      display: grid;
                      grid-template-columns: 1fr 1fr;
                  }

                  *{
                    font-family: "Century Gothic", sans-serif;
                  }

                  #search_bar {
                      height: 5vh;
                  }
                  
                  .page-footer {
                      background: #212121;
                  }
                  
                  .header {
                      position: fixed;
                  }
                  
                  footer {
                      position: fixed;
                      bottom: 0;
                  }
                  
                  a i {
                      color: #8307c1;
                  }
                  
                  .nav :nth-child(1) {
                      display: flex;
                      align-items: center;
                      margin-left: 3vw;
                  }
                  
                  .nav :nth-child(2) {
                      display: flex;
                      justify-content: end;
                      align-items: center;
                      margin: 2vh 5vw 2vh 0;
                  }
                  
                  .footer-play {
                      height: 4vh;
                      display: grid;
                      grid-template-columns: 20% 25% 10% 45%;
                  }
                  
                  .footer-music {
                      height: 8vh;
                      background: #8307c1;
                      display: grid;
                      grid-template-columns: 20% 60% 20%;
                  }
                  
                  .fixed-action-btn {
                      bottom: 9vh
                  }
                  
                  .align-center {
                      display: flex;
                      align-items: center;
                  }
                  
                  .justify-center {
                      justify-content: center;
                  }
                  
                  .align-center i {
                      color: #8307c1;
                  }
                  
                  .footer-play :nth-child(1) i {
                      transform: scale(0.6);
                  }
                  
                  .footer-play :nth-child(1),
                  .footer-play :nth-child(3) {
                      justify-content: center;
                  }
                  
                  .footer-play :nth-child(2) {
                      justify-content: end;
                  }
                  
                  .footer-white {
                      color: #fff;
                      font-size: 2vh;
                  }
                  
                  .footer-gray {
                      color: #BCBCBC;
                  }
                  
                  .footer-music div div {
                      height: 5vh;
                      width: 5vh;
                      background-color: #fff;
                      border-radius: 9px;
                  }
                  
                  .footer-music div i {
                      transform: scale(1.2);
                  }
                  
                  .footer-texte {
                      display: grid;
                      grid-template-columns: 1fr;
                  }
                  
                  .footer-texte :nth-child(1) {
                      display: flex;
                      align-items: flex-end;
                  }
                  
                  body .inscription {
                      font-size: 3vh;
                      margin-left: 5vw;
                  }
                  
                  h1,
                  a,
                  input:not([type]):focus:not([readonly])+label,
                  input[type=text]:focus:not([readonly])+label,
                  input[type=password]:focus:not([readonly])+label,
                  input[type=email]:focus:not([readonly])+label,
                  input[type=url]:focus:not([readonly])+label,
                  input[type=time]:focus:not([readonly])+label,
                  input[type=date]:focus:not([readonly])+label,
                  input[type=datetime]:focus:not([readonly])+label,
                  input[type=datetime-local]:focus:not([readonly])+label,
                  input[type=tel]:focus:not([readonly])+label,
                  input[type=number]:focus:not([readonly])+label,
                  input[type=search]:focus:not([readonly])+label,
                  textarea.materialize-textarea:focus:not([readonly])+label {
                      color: rgb(255, 255, 255);
                      font-family: "Century Gothic", sans-serif;
                  }
                  
                    a{
                        font-weight: 600;
                    }

                  body .abonnement-choix {
                      font-size: 2vh;
                      font-family: "Century Gothic", sans-serif;
                  }
                  
                  .btn {
                      background-color: rgb(255, 255, 255);
                  }
                  
                  #btn-inscription {
                      margin-top: 2.5vh;
                  }
                  
                  #select {
                      color: rgb(255, 255, 255);
                  }
                  
                  #inscription-marge {
                      margin: 0 10vw;
                  }
                  
                  .btn:hover {
                      background-color: #999;
                  }
                  
                  input:not([type]):focus:not([readonly]),
                  input[type=text]:focus:not([readonly]),
                  input[type=password]:focus:not([readonly]),
                  input[type=email]:focus:not([readonly]),
                  input[type=url]:focus:not([readonly]),
                  input[type=time]:focus:not([readonly]),
                  input[type=date]:focus:not([readonly]),
                  input[type=datetime]:focus:not([readonly]),
                  input[type=datetime-local]:focus:not([readonly]),
                  input[type=tel]:focus:not([readonly]),
                  input[type=number]:focus:not([readonly]),
                  input[type=search]:focus:not([readonly]),
                  textarea.materialize-textarea:focus:not([readonly]),
                  input:not([type]).valid,
                  input:not([type]):focus.valid,
                  input[type=text].valid,
                  input[type=text]:focus.valid,
                  input[type=password].valid,
                  input[type=password]:focus.valid,
                  input[type=email].valid,
                  input[type=email]:focus.valid,
                  input[type=url].valid,
                  input[type=url]:focus.valid,
                  input[type=time].valid,
                  input[type=time]:focus.valid,
                  input[type=date].valid,
                  input[type=date]:focus.valid,
                  input[type=datetime].valid,
                  input[type=datetime]:focus.valid,
                  input[type=datetime-local].valid,
                  input[type=datetime-local]:focus.valid,
                  input[type=tel].valid,
                  input[type=tel]:focus.valid,
                  input[type=number].valid,
                  input[type=number]:focus.valid,
                  input[type=search].valid,
                  input[type=search]:focus.valid,
                  textarea.materialize-textarea.valid,
                  textarea.materialize-textarea:focus.valid {
                      /* couleur de la bordure du champs avec border-color */
                      border-color: rgb(255, 255, 255);
                      box-shadow: 0 1px 0 0 rgb(255, 255, 255);
                  }
                  
                  .account-image {
                      background-color: white;
                      border-radius: 5px;
                      width: 40vw;
                      height: 15vh;
                  }
                  
                  #link-inscription {
                      color: white;
                      margin-left: 1vw;
                      border-bottom: solid 1px;
                  }
                  
                  .carousel a div {
                      height: 20vh;
                      background-color: #fff;
                      border-radius: 10px;
                  }
                  
                  .titre {
                      font-size: 5vh;
                      margin-left: 15vw;
                      margin-top: 5vh;
                  }
                  
                  .carousel-item-p {
                      color: #fff;
                  }
                  
                  .grid-for-all {
                      display: grid;
                      margin-top: 40px;
                      grid-template-columns: 2fr 2fr 2fr 2fr 2fr 2fr;
                      margin: 10vh 5vw 0 5vw;
                  }
                  
                  .grid-for-actu {
                      display: grid;
                      grid-template-columns: 2fr 2fr 2fr 2fr 2fr 2fr;
                      margin: 10vh 5vw 0 5vw;
                  }
                  
                  .div-image {
                      background-color: #fff;
                      border-radius: 10px;
                      height: 150px;
                      width: 150px;
                  }
                  
                  @media only screen and (max-width: 1050px) {
                      .grid-for-all {
                          display: grid;
                          margin-bottom: 30px;
                          grid-template-columns: 3fr 3fr 3fr 3fr;
                      }
                      .grid-for-actu {
                          display: grid;
                          grid-template-columns: 3fr 3fr 3fr 3fr;
                      }
                  }
                  
                  @media only screen and (max-width: 700px) {
                      .grid-for-all {
                          display: grid;
                          grid-template-columns: 4fr 4fr 4fr;
                      }
                      .grid-for-actu {
                          display: grid;
                          grid-template-columns: 4fr 4fr 4fr;
                      }
                  }
                  
                  @media only screen and (max-width: 525px) {
                      .carousel a div {
                          height: 10vh;
                          width: 30vw;
                          background-color: #fff;
                      }
                      .grid-for-all {
                          display: grid;
                          grid-template-columns: 6fr 6fr;
                      }
                      .grid-for-actu {
                          display: grid;
                          grid-template-columns: 6fr 6fr;
                      }
                      
                      .div-image {
                          background-color: #fff;
                          border-radius: 10px;
                          height: 125px;
                          width: 125px;
                      }
                  }