body{
    color: #fff;
}

/**********************/
/*********Fond*********/
/**********************/

body:before{
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#ffeb3b,#ffeb3b,#e91e63,#e91e63,#e91e63,#e91e63);
    clip-path: circle(13.5% at 30% 30%);
    z-index: -1;
}

body:after{
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#2196f3,#2196f3,#2196f3,#2196f3,#83d8ff,#83d8ff);
    clip-path: circle(12% at 72% 70%);
    z-index: -1;
}
  
/**********************/
/*********text*********/
/**********************/

main{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
  }
  
  .container{
    margin-top: 5%;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    padding: 50px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    overflow: hidden;
    backdrop-filter: blur(25px);
  }
  
  .container::before{
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
    transform: skewX(-15deg);
  }