@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
  @import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
body{
    font-family: 'IBM Plex Mono', monospace;
    height: 100vh;
    max-height: 100vh;
    padding: 0px;margin:0px;
   
    background-image: linear-gradient(135deg,
    rgb(251, 212, 255),
    #dfdeff,
    #c7e0ff,
    #e4faff,
    #c5dfff,
    rgb(223, 255, 244));
    background-size: 400% 400%;
	animation: gradient 7s ease infinite;
	height: 100vh;
    display:flex;align-items:center;justify-content:center;
/*
    background-image: url('6200438.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;*/
}

h1{
    font-weight: normal;
    font-family: 'Sacramento', cursive;
    font-size: 40px;
    text-align: center;
    color: rgb(93, 93, 93);
}
@keyframes gradient {
	0% {
		background-position: 0% 25%;
	}
	25% {
		background-position: 25% 50%;
	}
	50% {
		background-position: 50% 75%;
	}
    75% {
		background-position: 75% 100%;
	}
    100% {
		background-position: 0% 26%;
	}
}

.h5{
    text-decoration: none;
    color: rgb(92, 92, 92);
    font-size: larger;
    text-align: center;
    
}

.bi{
    height: 50px !important;
}

a{
    text-decoration: none;
}
.icon{
    height: 30px;
    margin: 20px;
}
.logo{
    width: 200px;
    margin:auto;
}
.in-card{
    text-align: center;margin:auto
}
.logo-div{
    position:absolute;
    top: 0;
    display: flex;
    padding: 20px;
    margin-bottom: 50px;
}
.profile-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.profile-img .in-card {
    background-image: url("assets/user-circles-set.png");
    background-size: cover;
    background-position: center;
    height: 190px;
    width: 190px;
    border-radius: 50%;
    margin-top: 25%;
    
    box-shadow: 4px 4px 30px 2px rgba(89, 89, 89, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.profile-img .in-card svg {
    width: 50%;
    height: 50%;
    opacity: 0.6;
}

.profile-info {
    text-align: center;
    margin-top: 10px;
}

.profile-info .name {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.profile-info .role {
    font-size: 16px;
    color: #777;
}







.card{
    height: 90px;
    width: 160px;
    backdrop-filter: blur(10px);
    background-color:rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 4px 4px 30px 2px rgba(89, 89, 89, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 0.1px solid rgb(226, 226, 226);
}
.card-2{
    width: 100%;
    height: 50px;
    margin-top: 40px;
    backdrop-filter: blur(10px);
    background-color:rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin:30px auto;
    border: 1px solid rgb(226, 226, 226);
    box-shadow: 4px 4px 30px 2px rgba(89, 89, 89, 0.1);
}
.ionicon, .bi{
    color: rgb(54, 118, 255) !important;
    width: 40px;
    margin: auto;
}
.container-grid{
    display: grid; 
    justify-content: center;
    /*border: 2px solid blue;*/
    margin: auto;
    gap: 50px;
    grid-template-columns: auto auto auto auto;
    max-width: 800px;
}
.container{
    max-width: 800px;
    margin:auto;
    text-align: center;
}
@media (max-width:480px) {
    .container-grid{
        display: grid;
        grid-template-columns: auto auto ;
        gap: 20px;
        max-width: 90%;
        width: 90%;
    }
    .card{
        width: 120px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin:auto
    }
    .logo{
        width: 140px;
    }
    .h5{
        font-size: medium;
        font-weight: 600;
    }
    h1{
        font-size: xx-large;
    }
    .profile-img .in-card {
        height: 100px;
        width: 100px;
        margin-top: 200px;
    }

    .profile-info .name {
        font-size: 14px;
    }

    .profile-info .role {
        font-size: 12px;
    }
}


/*balls*/
.ball-1,.ball-2,.ball-3,.ball-4{
    position: absolute;
    z-index: -1;
}
.ball-1{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-image: linear-gradient(50deg,rgb(195, 195, 255),white);
}

.ball-2{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background-image: linear-gradient(50deg,rgb(195, 226, 255),white);
}
.ball-3{
    height: 120px;
    width: 120px;
    border-radius: 50%;
    background-image: linear-gradient(50deg,rgb(255, 168, 168),white);
}
.ball-4{
    height: 120px;
    width: 120px;
    border-radius: 50%;
    background-image: linear-gradient(50deg,rgb(255, 195, 244),white);
}