glass.css

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    scroll-behavior: smooth

}
main{
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    background: linear-gradient(to right top,#63e0ff,#6b81ff);
display: flex;
align-items:center;
    transition: all .3s ease-in-out;
    justify-content: center;
}

h1{
    color:#426696;
    font-size: 3rem;
    font-weight: 600;
    opacity: .8;
}
h2, p{
    color:#659ec6;
    opacity: .8;
    font-weight: 60;

}
h3{
    color:#426696;
    opacity: .8;
    font-weight: 60;

}
#glas{
display: flex;
    /* padding: 18%;
    margin: 5% 18% 0% 18%; */

background-color:rgb(255, 255, 255);
min-height: 80vh;
width: 60%;
background: linear-gradient(to right bottom,rgba(255,255,255,1),rgba(255,255,255,0.5));
border-radius: 2%;
z-index: 4;
backdrop-filter: blur(2px);
transition: all .3s ease-in-out;

}
.tri1,
.tri2,.tri3,.tri4{
    /* min-height: 100vh; */
background-color:rgb(255, 255, 255);
background: linear-gradient(to right bottom,rgba(255,255,255,0.8),rgba(255,255,255,0.3));

height: 190px;
width: 190px;
/* border-right: 60px solid transparent ;
border-bottom: 60px solid linear-gradient(to right bottom,rgba(255,255,255,0.7),rgba(255,255,255,0.3));;
border-left: 60px solid transparent ; */
position:absolute;
transform:translate(-50%,-50%);
z-index:3;

}


.tri1{
    top: 5%;
    left:  80%;
animation: tri1 12s infinite linear;
}

.tri2{
    top: 60%;
    left: 80%;
    border-radius: 50%;
    animation: tri2 8s infinite linear;
}
.tri3{
    top: 15%;
left:15%;
transform: translate(-50%,-50%);
height: 20px;
   animation: tri3 14s infinite linear;
   background: transparent;
}
.tri3::before,.tri3::after{
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    background: linear-gradient(to right bottom,rgba(255,255,255,0.7),rgba(255,255,255,0.3));


}
.tri3::before{
    transform: rotate(-45deg);
}
.tri3::after{
    transform: rotate(45deg);
}
.tri4{
    top: 75%;
    left: 16%;
    
height: 0px;
width: 0px;
    border-right: 100px solid transparent ;
    border-bottom:140px solid rgba(255,255,255,0.5);
    border-left: 100px solid transparent ;
    animation: tri4 10s infinite linear;
}
@keyframes tri2{
    0%{
        transform: translate(-50%,20%) rotate(0deg);
    }
    25%{
        transform: translate(-10%,-20%) rotate(180deg);
    } 50%{
        transform: translate(-20%,-10%) rotate(180deg);
    }
    100%{
        transform: translate(-50%,20%) rotate(360deg);
    }
}
@keyframes tri1{
    0%{
        transform: translate(-50%,90%) rotate(0deg);
    }
    25%{
        border-radius: 20%;

        transform: translate(-90%,-10%) rotate(45deg);   
    }
    50%{

        transform: translate(40%,5%) rotate(120deg);
    }
    75%{

         transform: translate(50%,60%) rotate(180deg);

    }
    90%{
        transform: translate(40%,4%) rotate(280deg);
    }
100%{
    transform: translate(-50%,90%) rotate(360deg);

}
}
@keyframes tri4{
    0%{
        transform: translate(-50%,-50%) rotate(0deg);
    }
    25%{
        transform: translate(-30%,-10%) rotate(90deg);   
    }
    50%{
        transform: translate(10%,-25%) rotate(120deg);
    }
    75%{
        transform: translate(-60%,-10%) rotate(180deg);

    }
    90%{
        transform: translate(-25%,10%) rotate(360deg);
    }
100%{
    transform: translate(-50%,-50%) rotate(360deg);

}
}
@keyframes tri3{
    0%{
        transform: translate(-50%,-50%) rotate(0deg);
    }
    25%{
        transform: translate(30%,20%) rotate(90deg);   
    }
    50%{
        transform: translate(40%,30%) rotate(180deg);
    }
    75%{
        transform: translate(60%,20%) rotate(40deg);

    }
    90%{
        transform: translate(-25%,40%) rotate(180deg);
    }
100%{
    transform: translate(-50%,-50%) rotate(360deg);

}
}
/* left */
.img{
    max-width: 70%;
    width: 200px;
    height: 150px;
border-radius: 50%;
}

.dashbord{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    background: linear-gradient(to right bottom,rgba(255,255,255,0.7),rgba(255,255,255,0.3));

border-radius: 20px;
}
.games{
    flex: 2;
}
.link{
    display: flex;
    margin: 20px 0px;
    padding: 10px 50px;
    transition: all .4s ease-in-out;
    align-items: center;
    
}
.link:hover
{
   margin: 20px 10px;
   padding: 0px 100px;

    transition: all .5s ease-in-out;
    
}
.link h2{
    padding: 0px 50px;
}
.pro{
    display: flex;
    background: linear-gradient(to right top,#63e0ff,#6b81ff);
    border-radius: 20px;
    color: white;
    align-items: center;
    padding: 0px 15px;
    margin: 0px 20px;
    font-weight: 700px;
}
.pro h2{
    color:#ffffff;
    opacity: .8;
    font-weight: 800;

}
/* right */

.card{
    display: flex;
    align-items: center;
    margin: 30px 80px;
    padding: 40px 30px;
    background: linear-gradient(to right bottom,rgba(255,255,255,0.7),rgba(255,255,255,0.3));
border-radius: 20px;
transition: all .4s ease-in-out;

}
.card:hover
{
   margin: 30px 30px;
    transition: all .5s ease-in-out;
border-radius: 0px;
    
}
.card-info{
   display: flex;
   flex-direction: column;
   padding: 10px 50px;
line-height: 25px;
}

.status{
    /* display: flex;
    flex-direction: column;
    align-items:flex-start; */
    margin: 55px 80px;
font-size: 2.25rem;
}
.status input{
    border: .1px solid rgb(210, 242, 255);
    border-radius: 20px;
    background: linear-gradient(to right bottom,rgba(255,255,255,0.8),rgba(255,255,255,0.3));
    padding: 8px 60px;
margin: 8px 0px;


}
.progress{
    background-color: rgb(255, 255, 255);
background: linear-gradient(to right bottom,rgba(255,255,255,0.8),rgba(71, 164, 207, 0.3));
    display: flex;
height: 20px;
width:350px;
border-radius: 20px;
margin-top: 20px;

}
.progress .fill{
    flex: 60%;
    height: 20px;
    width:350px;
    background-color: #6b81ff;
border-radius: 20px;
    
    }
    .progress .unfil{
        height: 20px;
    width:350px;
    flex: 40%;
    }.progress .fill1{
        flex: 95%;
        height: 20px;
border-radius: 20px;
width:350px;
        background-color: #6b81ff;
        }
        .progress .unfil1{
            height: 20px;
        width:350px;
        flex: 5%;
        }.progress .fill2{
            flex: 80%;
border-radius: 20px;
            height: 20px;
            width:350px;
            background-color: #6b81ff;
            }
            .progress .unfil2{
                height: 20px;
            width:350px;
            flex: 20%;
            }