body{
    background-color:#1f242d;
    overflow: hidden;
}
.project{
    
    padding: 50px;
    text-align: center;
    
}
.project h1{
    color: #1f242d;
}
.proj-container{
    display:flex;
    justify-content:center;
    gap:30px;
}
.pro1{
    width:300px;
    margin:auto;
    background: #1f242d;
    color: #7cf03d;
    padding:20px;
    border-radius:10px;
}
.pro1 img{
    width: 100%;
    height: 100px;
    border-radius:10px;
}
.pro1 p{
    margin-top:10px;
    font-size:14px;
    background-color: #1f242d;
}
.button{
    display: inline-block;
    text-decoration: none;
    padding: 10px 30px;
    background-color: #7cf03d;
    border: 2px solid #7cf03d;
    border-radius: 40px;
    box-shadow: 0 0 10px #7cf03d;
    font-size: 16px;
    color: #1f242d;
    font-weight: 600;
    transition: .5s;
}
.button:hover{
    background:transparent;
    color: #7cf03d;
    box-shadow: none;
}
.anim{
    position: absolute;
    width: 100%; 
    height: 100%;
    display: flex;
    z-index: -1;
}
.anim .bar{
    width: 100%;
    height: 100%;
    background: #7cf03d;
    transform: translateY(100%);
    animation: show-bars .5s ease-in-out forwards;
    animation-delay: calc(.1s * var(--i));
}
@keyframes show-bars {
    100%{
       transform: translateY(0%);
    }
}