:root{
    --color1: #0FA3B1;
    --color2: #B5E2FA;
    --color2b: #c3d9e6;
    --color3: #F9F7F3;
}
body{
    background-color: var(--color3);
}
.card{
    width: min(400px, 90%);
    height: min(600px, 80%);
    position: relative;
    background-image: url(khalifa.jpg);
    background-size: cover;
    overflow: hidden;
}
.view, .exit{
    background-color: var(--color2);
    transition: all;
    position: absolute;

    transition: all 1s;
}
.view{
    bottom: 30px;
    right: 30px;
}
.exit{
    top: 10px;
    right: 30px;
    z-index: 2;
    animation: slideBtn 1s ease both;
}
.view:hover, .exit:hover{
    background-color: var(--color1);
    transition: all 1s;
}

.card h2{
    color: var(--color1);
}
.card p{
    color: rgb(175, 173, 173);
}
.details{
    width: 100%;
    height: min(550px, 95%);
    /* background-color: #5c5050; */
    position: absolute;
    left: 0;
    bottom: 0;
    background: #fff;
    display: none;
    /* z-index: -1; */
}
.open{
    display: block;
    animation: slide 1s ease both;
}
.close{
    display: block;
    animation: reverseSlide 1s ease both;
}
.active{
    color: #0ae90a;
    display: flex;
    align-items: center;
}
.dot{
    background: #0ae90a;
}
.icons i{
    font-size: 1.25rem;
}
.profilePic{
    width: 120px;
    height: 120px;
    right: 5px;
    top: -5px;
    position: absolute;
}
.profilePic img{
    width: 100%;
}

.detailContent{
    height: 186px;
    overflow: hidden;
}
.container{
    transition: all 0.6s;
}

@keyframes slide {
    from{
        transform: translateY(700px);
    }
    to{
        transform: translateY(0);
    }
}
@keyframes slideBtn {
    from{
        transform: translateY(-100px);
    }
    to{
        transform: translateY(0);
    }
}
@keyframes slideContact {
    from{
        transform: translateX(400px);
    }
    to{
        transform: translateX(0);
    }
}
@keyframes reverseSlide {
    from{
        transform: translateY(0);
    }
    to{
        transform: translateY(700px);
    }
}