/**********************/
/*********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);
}