.header_blue {
            background: #1565c0;
            padding: 80px 0 20px;
            color: #fff;
            font-size: 48px;
            font-weight: 300;
            margin-bottom: 40px;
        }
        .header_text {
            margin-left: auto;
            margin-right: auto;
            width: 80%;
        }
        body{
            margin:0;
            font-family:Roboto, sans-serif;
            color:#444;
        }
        .unlockBtn:hover{
            box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
        }
        .unlockBtn {
            background: #2196f3;
            border: none;
            border-radius: 2px;
            box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
            min-height: 31px;
            min-width: 70px;
            padding: 2px 16px;
            text-align: center;
            text-shadow: none;
            text-transform: uppercase;
            -webkit-transition: all 280ms ease;
            transition: all 280ms ease;
            box-sizing: border-box;
            cursor: pointer;
            -webkit-appearance: none;
            display: inline-block;
            vertical-align: middle;
            font: 500 14px/31px Roboto,sans-serif!important;
            outline: 0!important;
            color:white;
        }
        .content-container{
            width:80%;margin:0 auto;
        }
        @font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'),local(Roboto-Light),url(http://fonts.gstatic.com/s/roboto/v15/Pru33qjShpZSmG3z6VYwnRJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'),local(Roboto-Light),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local(Roboto-Medium),url(//fonts.gstatic.com/s/roboto/v15/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local(Roboto-Medium),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}
        
body{
  background-image: url('bg.jpg') ;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	min-height: 100vh;
	background-attachment: fixed;
}
.lastStep-text{
  color: #a13630;
  font-size: 26px;
  margin-top: 10px;
  text-shadow: 5px;
  font-weight: 300;
  animation: bounceIn 0.5s ease-in ;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    text-shadow: white 0px 0px 3px,   white 0px 0px 3px,   white 0px 0px 3px,
             white 0px 0px 3px,   white 0px 0px 3px,   white 0px 0px 3px;
}

.ads{

  position: absolute;
  width: 100%;
  background-color: red;
  top: 770px;
  left: 0;
}
.bgani{
  position:  absolute;
  animation: bgani1 2s ease-in infinite;
}
@keyframes bgani1{
  0%  {
      left:1px;
    transform: scale(0.5);
      opacity: 0.1;
    }

  25%  { opacity: 0.1;transform: rotate(10deg);}
  50%  { opacity: 0.1;transform: rotate(50deg);}
  75%  { opacity: 0.1;transform: rotate(200deg);}
  100%  {left:100%;transform: scale(10); opacity: 0.1;}
}

.bgani2{
  position:  absolute;
  animation: bgani2 2s ease-in infinite;
}
@keyframes bgani2{
  0%  {
    top:100px;
      left:1px;
    transform: scale(1.5);
      opacity: 0.1;
    }

  25%  { opacity: 0.01;transform: rotate(10deg);}
  50%  { opacity: 0.01;transform: rotate(50deg);}
  75%  { opacity: 0.01;transform: rotate(200deg);}
  100%  {top:-20px;
    left:50%;transform: scale(10); opacity: 0.1;}
}

.bgani3{
  position:  absolute;
  animation: bgani3 2s ease-in infinite;
}
@keyframes bgani3{
  0%  {
    top:-20px;
      left:70%;
    transform: scale(0.5);
      opacity: 0.1;
    }

  25%  { opacity: 0.1;transform: rotate(10deg);}
  50%  { opacity: 0.1;transform: rotate(50deg);}
  75%  { opacity: 0.1;transform: rotate(200deg);}
  100%  {top:100px;
    left:1%;transform: scale(5); opacity: 0.1;}
}


.logo{
  margin: 15px;
  width: 180px;
  animation: pulse1 1s ease-in infinite;
} 
  
 

  @keyframes skew {
  0% {transform: skew(10deg, 10deg);  }
  25% {transform: skew(-10deg, -10deg);  }
  50% {transform: skew(10deg, 10deg);  }
  75% {transform: skew(-10deg, -10deg);  }
  100% {transform: skew(0deg, 0deg); }
}

}
@keyframes pulse2{
  0% {transform: scale(1);}
  25%  {transform: scale(1);}
  75%  {transform: scale(0.9);}
}

@keyframes bounceIn{
  0%{
    opacity: 0;
    transform: scale(0.3) translate3d(0,0,0);
  }
  50%{
    opacity: 0.9;
    transform: scale(1.1);
  }
  80%{
    opacity: 1;
    transform: scale(0.89);
  }
  100%{
    opacity: 1;
    transform: scale(1) translate3d(0,0,0);
  }
}
.text-lastStep{
  max-width: 500px;
  color: white;
}

:root{

  --background:radial-gradient(black,#3b54c9);

  --backgroundUsername:linear-gradient(to left top,#a13630,#16d72b);
  
  --platform:linear-gradient(to left top,#a13630,#16d72b);
  --SelectedPlatform:linear-gradient(to left top,#b34039,#9c383c);

  --UserFoundText:white;  
  --LogoFound:#a13630;

  --SelectedPlatformHoverShadow1:#16d72b;
  --SelectedPlatformHoverShadow2:#16d72b;
  --SelectedPlatformHoverShadow3:#a13630;
  --SelectedPlatformHoverShadow4:white;
  --SelectedPlatformHoverShadow5:#b34039;


  --buttons:linear-gradient(to left top,#a13630,#16d72b);
  --buttonsHover:linear-gradient(to left top,#b34039,#9c383c);
  --ProBar:#a13630;
  

  --textshadow1: #16d72b;
  --textshadow2: #16d72b;
  --textshadow3: #a13630;
  --textshadow4: #a13630;
  --textshadow5: #a13630;


  --boxshadow1:#16d72b;
  --boxshadow2:#16d72b;
  --boxshadow3:white;
  --boxshadow4:#b34039;
  --boxshadow5:#b34039;

 
  --keyframesShadow1:#16d72b;
  --keyframesShadow2:#a13630;
  --keyframesShadow3:white;
  --keyframesShadow4:#b34039;
  --keyframesShadow5:#b34039;

  --keyframesShadow6:#16d72b;
  --keyframesShadow7:#a13630;
  --keyframesShadow8:white;
  --keyframesShadow9:#b34039;
  --keyframesShadow10:#b34039;
  

  
}

.main{
 backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);

/*background:var(--background);*/
width:650px;
height: 500px;
position: relative;
margin-top: 50px;

padding: 10px;
border-radius: 45px;
border-width: 1px;
border-color: white;
border-style: solid;
-webkit-background-clip: padding-box;
background-clip: padding-box;
box-shadow: 0 0 5px var(--boxshadow1),
        0 0 2px var(--boxshadow2),
        0 0 4px var(--boxshadow3),
        0 0 5px var(--boxshadow4),
        0 0 7px var(--boxshadow5);
        animation: neon 1s ease-in infinite;
}
@keyframes neon{
  25%{box-shadow: 0 0 5px var(--keyframesShadow1),
        0 0 2px var(--keyframesShadow2),
        0 0 4px var(--keyframesShadow3),
        0 0 5px var(--keyframesShadow4),
        0 0 7px var(--keyframesShadow5);}
  75%{box-shadow: 0 0 5px var(--keyframesShadow6),
        0 0 12px var(--keyframesShadow7),
        0 0 14px var(--keyframesShadow8),
        0 0 16px var(--keyframesShadow9),
        0 0 20px var(--keyframesShadow10);}    
}
.step{
  width: 60px;
  height: 60px;
 background-color: transparent;
 border-radius: 50%;
 margin-top: -40px;

}
.step-icon{
  position: absolute;
  animation: leftAmination 4s infinite;
  margin-top: -130px;
  
}
@keyframes leftAmination {
  0% { top: 80px;}
25% {  top: 100px;}
50% {  top: 80px;}
75% {  top: 100px;}
  100% { top: 80px;}
}

.step1{
  
  width: 450px;
  height: 450px;
}
.step1-text{
  color: whitesmoke;
  font-size: 26px;
  margin-top: 10px;
  text-shadow: 5px;
  font-weight: 300;
  animation: bounceIn 0.5s ease-in ;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    

    
}
.u-i {
  position: absolute;
  left: 50%;
  margin-left: -230px;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background:var(--backgroundUsername);
  box-shadow: none;
  border: none;
  width:355x;
  height: 90px;
  padding: 0 15px 0 70px;
  color: white;
  font-size: 28px;
  border-radius: 30px;
  font-weight: bold;
    animation: bounceIn 0.5s ease-in ;
    
}
.username-icon{
  left: 10px;
  top:25px;
  position: absolute;
  width:40px;
  z-index: 2;
    animation: bounceIn 0.5s ease-in ;
    filter:invert(90%);
}
.inputbox{
  position: relative;

  width: 450px;
  height: 100px;

}
.selectedPlatform{
  width: 105px;
  height: 80px;
  background:var(--SelectedPlatform);
  display: inline-table;
  margin-top: 20px;
  border-radius: 40px;
  padding-top: 25px;
  
  border-style: solid;
  border-width: 1px;
  border-color: whitesmoke;
  box-shadow: 0 0 5px var(--SelectedPlatformHoverShadow1),
        0 0 5px var(--SelectedPlatformHoverShadow2),
        0 0 10px var(--SelectedPlatformHoverShadow3),
        0 0 15px var(--SelectedPlatformHoverShadow4),
        0 0 30px var(--SelectedPlatformHoverShadow5);
    
    animation: skew 0.5s ;
  animation-fill-mode: forwards;
    
}
.platform{
  width: 105px;
      height: 80px;
      background:var(--platform);
      display: inline-table;
      margin-top: 20px;
      border-radius: 40px;
      padding-top: 25px;
      
      
}
.platform:hover{
  cursor: pointer;
    background-color: #778899;
    box-shadow: 0 0 5px var(--SelectedPlatformHoverShadow1),
        0 0 5px var(--SelectedPlatformHoverShadow2),
        0 0 10px var(--SelectedPlatformHoverShadow3),
        0 0 15px var(--SelectedPlatformHoverShadow4),
        0 0 30px var(--SelectedPlatformHoverShadow5);
        

}
@keyframes pulse{
  25%  {transform: scale(0.9);}
  75%  {transform: scale(1);}
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

.bnt{
  width:250px;
  height: 40px;
  background:var(--buttons);
  font-size: 26px;
  color: white;
  padding: 10px;
  margin-top: 10px;
  border-radius: 40px;
  box-shadow: 0 0 5px black;
  
  animation:wobble-hor-top 1s ;
}

@keyframes wobble-hor-top{
  0%,100%{transform:translateX(0);transform-origin:50% 50%}
  15%{transform:translateX(-30px) rotate(6deg)}
  30%{transform:translateX(15px) rotate(-6deg)}
  45%{transform:translateX(-15px) rotate(3.6deg)}
  60%{transform:translateX(9px) rotate(-2.4deg)}
  75%{transform:translateX(-6px) rotate(1.2deg)}}





.bnt:hover{
  cursor: pointer;
    animation: pulse 0.5s ease-in infinite;
    background:var(--buttonsHover);
    box-shadow: 0 0 5px var(--SelectedPlatformHoverShadow1),
        0 0 5px var(--SelectedPlatformHoverShadow2),
        0 0 10px var(--SelectedPlatformHoverShadow3),
        0 0 15px var(--SelectedPlatformHoverShadow4),
        0 0 30px var(--SelectedPlatformHoverShadow5);
}
@keyframes pulse{
  25%  {transform: scale(0.9);}
  75%  {transform: scale(1);}
}

.step2{
  margin-top: 50px;
  width:300px;
  height: 200px;
  animation: pulse 0.5s ease-in infinite;
}
@keyframes step2animation1{
  25%  {transform: rotate(-2deg);}
  75%  {transform:  rotate(2deg);}
}


.seaching-text{
  font-size: 26px;
  animation: pulse1 1s ease-in infinite;
  color:white;
}
.userfound-text{
    font-size: 26px;
    color:var(--UserFoundText);
    font-weight: bold;
    text-shadow: 0 0 5px var(--textshadow1),
        0 0 5px var(--textshadow2),
        0 0 10px var(--textshadow3),
        0 0 15px var(--textshadow4),
        0 0 20px var(--textshadow5);
        animation: pulse2 1s ease-in infinite;
}


.searching-box{
  width: 280px;

  background:var(--buttons);
  border-style: solid;
  border-width: 1px;
  border-radius: 45px;
  border-color: white;
  color: white;
  font-size: 32px;
  padding: px;
  padding-top: 10px;
  padding-bottom:  10px;
  animation: pulse1 0.5s ease-in infinite;
  animation: skew 0.5s ease-in infinite;

  box-shadow: 0 0 5px var(--boxshadow1),
        0 0 5px var(--boxshadow2),
        0 0 10px var(--boxshadow3),
        0 0 15px var(--boxshadow4),
        0 0 30px var(--boxshadow5);
}
.searching-platform
{
  width: 60px;
      height: 60px;
      background-color: var(--LogoFound);
      border-style: solid;
      border-width: 4px;
      border-radius: 45px;
      border-color: #e4e4e4;
      margin-top: 30px;
      animation: pulse1 0.5s ease-in infinite;
      animation: skew 0.5s ease-in infinite;
}
@keyframes pulse1{
  25%  {transform: scale(0.98);}
  75%  {transform: scale(1);}
}




.step3{
  margin-top: 50px;
  width:300px;
  height: 200px;
}
.imgcheck{
  width:150px;
animation:slit-in-diagonal-1 .45s ease-out both;
filter:brightness(200%);
}
@keyframes slit-in-diagonal-1{
  0%{transform:translateZ(-800px) rotate3d(1,1,0,90deg);animation-timing-function:ease-in;opacity:0;}
  54%{transform:translateZ(-160px) rotate3d(1,1,0,87deg);animation-timing-function:ease-in-out;opacity:1}
  100%{transform:translateZ(0) rotate3d(1,1,0,0);animation-timing-function:ease-out}}
.slide-in-blurred-bottom{animation:slide-in-blurred-bottom .6s cubic-bezier(.23,1.000,.32,1.000) both}
@keyframes slide-in-blurred-bottom{0%{transform:translateY(1000px) scaleY(2.5) scaleX(.2);transform-origin:50% 100%;filter:blur(40px);opacity:0}100%{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}

.SelectedAmount-box
{
  width: 250px;
      height: 120px;
      background:var(--buttons);
      border-radius: 40px;
position: relative;
color: white;
}
.SelectedAmount-box-text{
  position: absolute;
  width: 100%;
color: white;
      border-radius: 40px;
      top:-10px;
}

.gems-Amount{
  position: relative;
  width: 250px;
  padding-top: 6px;
  padding-bottom: 6px;
  background:var(--buttons);
  border-radius: 40px;

  margin-top: 10px;
  border-width: 2px;
  border-style: solid;
  border-color: #f1f2f3;
color: white;
  border-radius: 40px;
}
.gems-Amount:hover{
  cursor: pointer;
  background:var(--buttonsHover);
  box-shadow: 0 0 5px var(--boxshadow1),
        0 0 5px var(--boxshadow2),
        0 0 10px var(--boxshadow3),
        0 0 15px var(--boxshadow4),
        0 0 30px var(--boxshadow5);
}
.gems-Amount-Selected{
  position: relative;
  width: 250px;
  padding-top: 6px;
  padding-bottom: 6px;
  background:var(--SelectedPlatform);
  border-radius: 40px;
  margin-top: 10px;
  border-width: 3px;
  border-style: solid;
  border-color: white;
  animation: searchAnimation 0.5s linear ;
  box-shadow: 0 0 5px var(--boxshadow1),
        0 0 5px var(--boxshadow2),
        0 0 10px var(--boxshadow3),
        0 0 15px var(--boxshadow4),
        0 0 30px var(--boxshadow5);
        color: white;
}

.gemstext{
  font-size: 24px;
  font-weight: 900;
  position: relative;
  animation: flip-in-hor-top 0.5s ease-in  ;
  color: white;
}
.gemstext1{
  font-size: 24px;
  font-weight: 900;
}
@keyframes flip-in-hor-top{
  0%{transform:rotateX(-80deg);opacity:0}
  100%{transform:rotateX(0);opacity:1}}

@keyframes searchAnimation{
0%  {    left:0px }
25%  {    left:5px}
50%  {    left:-5px}
75%  {    left:5px}
100%  {    left:0px }
}
.sake{
  position: relative;
  
}

.bnt2{
  width:250px;
  height: 30px;
  background:var(--buttons);
  font-size: 26px;
  color: white;
  padding-top:  10px;
    padding-bottom:   10px;
  margin-top: 200px;
  border-radius: 40px;
  box-shadow: 0 0 5px black;
  animation: pulse 0.5s ease-in ;
}
.bnt2:hover{
  cursor: pointer;
  animation: pulse 0.5s ease-in infinite;
    background:var(--buttonsHover);
    box-shadow: 0 0 5px var(--SelectedPlatformHoverShadow1),
        0 0 5px var(--SelectedPlatformHoverShadow2),
        0 0 10px var(--SelectedPlatformHoverShadow3),
        0 0 15px var(--SelectedPlatformHoverShadow4),
        0 0 30px var(--SelectedPlatformHoverShadow5);
}

.bnt3{
  width:250px;
  height: 40px;
  background:var(--buttons);
  font-size: 26px;
  color: white;
  padding-top:  5px;
    padding-bottom:   5px;
  margin-top: 25px;
  border-radius: 40px;
  box-shadow: 0 0 5px white;
  animation:wobble-hor-top 1s ;
  
}
.bnt3:hover{
  cursor: pointer;
  animation: pulse 0.5s ease-in infinite;
    background:var(--buttonsHover);
    box-shadow: 0 0 5px var(--SelectedPlatformHoverShadow1),
        0 0 5px var(--SelectedPlatformHoverShadow2),
        0 0 10px var(--SelectedPlatformHoverShadow3),
        0 0 15px var(--SelectedPlatformHoverShadow4),
        0 0 30px var(--SelectedPlatformHoverShadow5);
}

.main3{
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);

/*background:var(--background);*/
  width: 400px;
  height: 300px;
  position: relative;
  border-radius: 45px;
  border-width: 1px;
  border-color: white;
margin-top: 60px;
  border-style: solid;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  box-shadow: 0 0 5px var(--boxshadow1),
        0 0 2px var(--boxshadow2),
        0 0 4px var(--boxshadow3),
        0 0 5px var(--boxshadow4),
        0 0 7px var(--boxshadow5);
        animation: neon 1s ease-in infinite;

}
.main5{
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);

/*background:var(--background);*/
  width: 600px;
  height: 440px;
  position: relative;

  border-radius: 45px;
  border-width: 1px;
  border-color: white;
  border-style: solid;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  margin-top: 50px;
  color: white;
  box-shadow: 0 0 5px var(--boxshadow1),
        0 0 2px var(--boxshadow2),
        0 0 4px var(--boxshadow3),
        0 0 5px var(--boxshadow4),
        0 0 7px var(--boxshadow5);
        animation: neon 1s ease-in infinite;
}

.lastStep-card{
  margin-top: 20px;
  width: 180px;
  height: 155px;

  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);

/*background:var(--background);*/
  border-radius: 45px;
  border-style: solid;
  border-width: 5px;
  border:1px white;
  
        box-shadow: 0 0 5px var(--boxshadow1),
        0 0 5px var(--boxshadow2),
        0 0 20px var(--boxshadow3),
        0 0 35px var(--boxshadow4),
        0 0 50px var(--boxshadow5);
  animation: pulsel 2s ease-in infinite;
  color: white;
}
@keyframes pulsel{
0%  {transform: scale(1);}
25%  {transform: scale(0.95);}
50%  {transform: scale(1);}
75%  {transform: scale(0.95);}
100%  {transform: scale(1);}
}



.setting-icon{
  
  animation: step2animation 3s  linear infinite;
}
@keyframes step2animation{
  0%  {transform: rotate(0deg);}
  100%  {transform:  rotate(360deg);}
}
.sloading{
    filter: invert(60%);
  animation: Asloading 2s  linear infinite;
}
@keyframes Asloading{
  0%  {transform: rotate(0deg);}
  100%  {transform:  rotate(360deg);}
}

.pro-bg{
  margin-top: 10px;
  width: 250px;
  height: 15px;
  background-color: #cccccc;
  border-radius: 8px;
  text-align: left;
}
.pro-bar{
  margin-top: 10px;
  width: 0px;
  height: 15px;
  background-color: var(--ProBar);
  border-radius: 8px;
}
.probar40{
  animation: prostep 1s  linear;
  animation-fill-mode: forwards;
}
@keyframes prostep{
  0%  {width: 0px;}
  100%  {width: 25%;}
}
.probar60{
  animation: prostep2 1s  linear;
  animation-fill-mode: forwards;
}
@keyframes prostep2{
  0%  {width: 25%;}
  100%  {width: 40%;}
}
.probar40-75{
  animation: prostep40-75 1s  linear;
  animation-fill-mode: forwards;
}
@keyframes prostep40-75{
  0%  {width: 40%;}
  100%  {width: 75%;}
}
.probar75-90{
  animation: prostep75-90 1s  linear;
  animation-fill-mode: forwards;
}
@keyframes prostep75-90{
  0%  {width: 75%;}
  100%  {width: 98%;}
}
.main4{
 
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  width: 200px;
  height: 150px;
  margin-top:-270px;
  position: relative;
  border-radius: 45px;
  border-width: 1px;
  border-color: white;
  border-style: solid;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  box-shadow: 0 0 5px var(--boxshadow1),
        0 0 2px var(--boxshadow2),
        0 0 4px var(--boxshadow3),
        0 0 5px var(--boxshadow4),
        0 0 7px var(--boxshadow5);
        animation: neon 1s ease-in infinite;
        
}


.gemsgen{
  width: 100px;
  background: linear-gradient(to left top,#a13630,#16d72b);
  border-radius: 40px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 22px;
  font-weight: 900;
  color: whitesmoke;
  margin-bottom: 5px;
}
.gemsgenname{
  font-size: 22px;
  font-weight: 900;
  color: whitesmoke;
}

@keyframes scale-in-center{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:1}}


@media only screen and (max-width:680px) {
  .grid-container {
    display: grid;
    grid-template-columns: auto auto;
    
  }
 

  body{
  background-image: url('bg.jpg') ;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	min-height: 100vh;
	background-attachment: fixed;
  
}
  .main{
    backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);

/*background:var(--background);*/
  width:350px;
  height: 500px;
  position: relative;
margin-top: 50px;
  border-radius: 45px;
  border-width: 1px;
  border-color: white;
  border-style: solid;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  box-shadow: 0 0 5px var(--boxshadow1),
        0 0 2px var(--boxshadow2),
        0 0 4px var(--boxshadow3),
        0 0 5px var(--boxshadow4),
        0 0 7px var(--boxshadow5);
  }

  .step1{
    
    width: 300px;
    height: 350px;
  }
  .step1-text{
    color: whitesmoke;
    font-size: 18px;
    margin-top: 10px;
    text-shadow: 5px;
    font-weight: 300;
      animation: bounceIn 0.5s ease-in ;
      
  }
  .u-i {
    position: absolute;
    left: 50%;
    margin-left: -150px;
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background:var(--backgroundUsername);
    box-shadow: none;
    border: none;
    width:200px;
    height: 90px;
    padding: 0 15px 0 70px;
    color: white;
    font-size: 20px;
    border-radius: 30px;
    font-weight: bold;
      animation: bounceIn 0.5s ease-in ;
  }
  .username-icon{
    left: 10px;
    top:25px;
    position: absolute;
    width:40px;
    z-index: 2;
      animation: bounceIn 0.5s ease-in ;
      filter:invert(90%);
  }
  .inputbox{
    position: relative;

    width: 280px;
    height: 80px;

  }
  .selectedPlatform{
    width: 130px;
    height: 65px;
    background:var(--SelectedPlatform);
    display: inline-table;
    margin-top: 25px;
    border-radius: 40px;
    padding-top: 12px;
    
    border-style: solid;
    border-width: 1px;
    border-color: whitesmoke;
    
        box-shadow: 0 0 5px var(--SelectedPlatformHoverShadow1),
        0 0 5px var(--SelectedPlatformHoverShadow2),
        0 0 10px var(--SelectedPlatformHoverShadow3),
        0 0 15px var(--SelectedPlatformHoverShadow4),
        0 0 30px var(--SelectedPlatformHoverShadow5);
        animation: skew 0.5s ;
  animation-fill-mode: forwards;


  }
  .platform{
    width: 130px;
        height: 65px;
        background:var(--platform);
        display: inline-table;
        margin-top: 25px;
        border-radius: 40px;
        padding-top: 12px;
          
  }
  .bnt{
    width:250px;
    height: 40px;
    background:var(--buttons);
    font-size: 26px;
    color: white;
    padding: 0px;
    margin-top: 11px;
    border-radius: 40px;
    box-shadow: 0 0 5px black;
    animation:wobble-hor-top 1s ;
  }
  .main3{
    width: 300px;
    height: 300px;
  }

  .main5{

    width: 300px;
    height: 470px;
  }

  .text-lastStep{
      margin-top: 10px;
width: 265px;
text-align: center;

color: white;

  }
  .logo{
    margin-top: 20px;
    width: 180px;
    animation: pulse1 1s ease-in infinite;
  }
}




@media only screen and (max-width:380px) {
  .grid-container {
    display: grid;
    grid-template-columns: auto auto;
    
  }

  body{
  background-image: url('bg.jpg') ;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	min-height: 100vh;
	background-attachment: fixed;
  
}
  .main{

  width:260px;
  height: 500px;
  
}

  .step1{
    
    width: 250px;
    height: 350px;
  }
  .step1-text{
    color: whitesmoke;
    font-size: 14px;
    margin-top: 10px;
    text-shadow: 5px;
    font-weight: 300;
      animation: bounceIn 0.5s ease-in ;
      
  }
  .u-i {
    position: absolute;
    left: 50%;
    margin-left: -140px;
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background:var(--backgroundUsername);
    box-shadow: none;
    border: none;
    width:170px;
    height: 90px;
    padding: 0 15px 0 50px;
    color: white;
    font-size: 18px;
    border-radius: 30px;
    font-weight: bold;
      animation: bounceIn 0.5s ease-in ;
  }
  .username-icon{
    left: 10px;
    top:25px;
    position: absolute;
    width:40px;
    z-index: 2;
      animation: bounceIn 0.5s ease-in ;
      margin-left:-5px;
      filter:invert(90%);
  }
  .inputbox{
    position: relative;

    width: 280px;
    height: 80px;

  }
  .selectedPlatform{
    width: 110px;
    height: 65px;
    background:var(--SelectedPlatform);
    display: inline-table;
    margin-top: 25px;
    border-radius: 40px;
    padding-top: 12px;
    
    border-style: solid;
    border-width: 1px;
    border-color: whitesmoke;
    
        box-shadow: 0 0 5px var(--SelectedPlatformHoverShadow1),
        0 0 5px var(--SelectedPlatformHoverShadow2),
        0 0 10px var(--SelectedPlatformHoverShadow3),
        0 0 15px var(--SelectedPlatformHoverShadow4),
        0 0 30px var(--SelectedPlatformHoverShadow5);
        animation: skew 0.5s ;
  animation-fill-mode: forwards;

  
  }
  .platform{
    width: 110px;
        height: 65px;
        background:var(--platform);
        display: inline-table;
        margin-top: 25px;
        border-radius: 40px;
            border-width: 1px;
        padding-top: 12px;
          
  }
  .bnt{
    width:200px;
    height: 40px;
    background:var(--buttons);
    font-size: 26px;
    color: white;
    padding: 10px;
    margin-top: 10px;
    border-radius: 40px;
    box-shadow: 0 0 5px black;
    animation:wobble-hor-top 1s ;
  }
  .searching-box{
    width: 220px;
    background:var(--buttons);
    border-style: solid;
    border-width: 1px;
    border-radius: 45px;
    border-color: white;
    color: white;
    font-size: 32px;
    padding-top: 10px;
    padding-bottom:  10px;
    animation: pulse1 0.5s ease-in infinite;
    animation: skew 0.5s ease-in infinite;
     box-shadow: 0 0 5px var(--boxshadow1),
        0 0 5px var(--boxshadow2),
        0 0 20px var(--boxshadow3),
        0 0 35px var(--boxshadow4),
        0 0 50px var(--boxshadow5);
  }
  .step2{
    margin-top: 50px;
    width:240px;
    height: 200px;
    animation: pulse 0.5s ease-in infinite;
  }
  .step3{
    margin-top: 50px;
    width:240px;
    height: 200px;
  }
  .SelectedAmount-box {
    width: 220px;
    height: 120px;
    background:var(--buttons);
      border-radius: 40px;
    position: relative;
}
.gems-Amount-Selected {
    position: relative;
    width: 180px;
    padding-top: 6px;
    padding-bottom: 6px;
    background:var(--SelectedPlatform);
    border-radius: 40px;
    margin-top: 10px;
    border-width: 3px;
    border-style: solid;
    border-color: white;
    animation: searchAnimation 0.5s linear;
    box-shadow: 0 0 5px var(--boxshadow1),
        0 0 5px var(--boxshadow2),
        0 0 10px var(--boxshadow3),
        0 0 15px var(--boxshadow4),
        0 0 30px var(--boxshadow5);
}
.gems-Amount {
    position: relative;
    width: 180px;
    padding-top: 6px;
    padding-bottom: 6px;
    background:var(--buttons);
    border-radius: 40px;
    margin-top: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: #f1f2f3;
}
.bnt2 {
    width: 215px;
    height: 40px;
    background:var(--buttons);
    font-size: 26px;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 220px;
    border-radius: 40px;
    box-shadow: 0 0 5px black;
    animation: pulse 0.5s ease-in ;
}
  .main3{
    backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);

/*background:var(--background);*/
    width: 260px;
    height: 300px;
  }

  .main5{
    backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);

/*background:var(--background);*/
    width: 260px;
    height: 470px;
  }

  .text-lastStep{
      margin-top: 10px;
width: 265px;
text-align: center;

color: white;
  }
  .logo{
    margin-top: 1px;
    width: 180px;
    
  }
  .bnt3{
    width:200px;
    height: 40px;
    background:var(--buttons);
    font-size: 26px;
    color: white;
    padding: 10px;
    margin-top: 25px;
    border-radius: 40px;
    box-shadow: 0 0 5px white;
    animation:wobble-hor-top 1s ;
   
        
  }
} 
::placeholder{
  color: white;
  opacity: 0.6;
}

.protection {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-top:11px;
  cursor: pointer;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-shadow: 0 0 5px var(--textshadow1),
        0 0 5px var(--textshadow2),
        0 0 15px var(--textshadow3),
        0 0 20px var(--textshadow4),
        0 0 21px var(--textshadow5);
  color: white;
  animation: bounceIn 0.5s ease-in ;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
}


.protection input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: red;
  border-radius: 40px;
  
}


.protection:hover input ~ .checkmark {
  background-color: #E74B4B;
}


.protection input:checked ~ .checkmark {
  background: linear-gradient(to left top,#a13630,#16d72b);
}


.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


.protection input:checked ~ .checkmark:after {
  display: block;
}


.protection .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}