@import url("./main.css");

.project-main{
    display: grid;
    grid-template-columns: 65% 35%;
    padding-left: 2.5vw;
    padding-top: 20px; 
    height:calc(100vh - 110px);
}

.old-projects{
    width: 100%;
    height:calc(100vh - 130px);

    display: flex;
    flex-direction: column;
    overflow: auto;
    padding-top:10px;
}

.about-header{
    font-size: 20px;
    color:var(--menu-hover-color);
    letter-spacing: -1px;
    margin-top:0;
}

.old-project{
    display: flex;
    justify-content:center;
    text-align: center;
    height:100%;
    margin-right:50px;
    border-radius: 10px;
    align-items: center;
    /*background-color:#f9f9f9;*/
    background-color: var(--menu-bg-color);
    color:var(--font-color);
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);

}

.mobile-newprojects{
    display:none;   
}

.newprojects{
    height:100%;
    width: 100%;
    padding-top:10px;
    overflow-y: auto;
}

.new-project {
    display: flex;
    flex-direction: column;
    padding:20px;
    /*justify-content:center;*/
    margin-right:10px;
    background-color: var(--menu-bg-color);
    color:var(--font-color);
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);
}

.new-project h2{
    margin-top:0;
}

.newproject-name{
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

.mobile-old-projects{
    margin-left:20px;
    margin-right:20px;   
    margin-bottom:20px;
    margin-top:50px;
}

.mobile-old-project{
    background-color: var(--menu-bg-color);
    color : var(--font-color);
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);
    padding:20px;
}

.mobile-newprojects-2
{
    margin-left:20px;
    margin-right:20px;
}

.mobile-he{
    margin-bottom:20px;
}

@media screen and (max-width:1028px){
    .project-main{
        display: grid;
        grid-template-columns: 100%;
    }

    .main-header{
        margin-right:2.5vw;
    }

    .newprojects{
        display:none;
    }

    .mobile-newprojects{
        display: contents;
    }

    .old-project{
        margin-right:2vw;
    }

    .new-project{
        margin-right:2vw;
    }

}

@media screen and (max-width:600px){
    .new-project:last-child{
        margin-bottom:20px;
    }

    .new-project{
        margin-right:0;
    }
}