html {
  height:100%;
}



body {
  margin:0;
}

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

.content {
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.0);
  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}

h1 {
  font-family:monospace;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}


.bl{
background-color: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 8px 15px 0px;
border-radius: 12px;
-webkit-border-radius: 15px;
color: rgba(255, 255, 255, 0.75);
margin: auto;
width: 90%;
}

.bl2{
background-color: rgba(255, 255, 255, 0);
backdrop-filter: blur(30px);
border-radius: 12px;
-webkit-border-radius: 23px;
color: rgba(255, 255, 255, 0.75);
margin: auto;
width: 90%;
}


.bl3{
background-color: #1E90FF;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 8px 15px 0px;
border-radius: 5px;
-webkit-border-radius: 5px;
color: rgba(255, 255, 255, 0.75);
margin: auto;
width: 90%;
}



.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 90%;
    margin: auto;
    border-radius: 15px;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

img {
            border-radius: 10px
}

.container {
    padding: 2px 16px;
}


.seey {
}
#animation {
-webkit-animation:fadeInUpBig 1s .2s ease both;
-moz-animation:fadeInUpBig 1s .2s ease both;
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity:0;
-webkit-transform:translateY(2000px)
}
100% {
opacity:1;
-webkit-transform:translateY(0)
}
}
@-moz-keyframes fadeInUpBig {
0% {
opacity:0;
-moz-transform:translateY(2000px)
}
100% {
opacity:1;
-moz-transform:translateY(0)
}
}

.uiright {
padding-left:86%;
}


.box {       
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            transition: 0.3s;
            width: 80%;
            margin: 10% auto 0;
            padding: 2% 5%;
            border-radius: 10px
        }
        
        
.in{
margin: 10% auto 0;
}