*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    font-family:Arial, Helvetica, sans-serif ;
    background-color:#f6f6f6;
    color:#f37777;
    
}
main{
    width:90%;
    max-width:1100px;
    margin:auto;
    padding:60px 0;
}

#three-canvas{
    width:100%;
    height: 600px;
    margin: 40px 0;
    border-radius: 20px;
    overflow: hidden;
}
#three-canvas canvas{
    display:block;
    width: 100%;
    height: 100%;
}
section{
    margin-bottom: 70px;
}
h1{
    font-size: 60px;
    margin-bottom: 20px;
}
h2{
    font-size: 34px;
    margin-bottom: 20px;
}
p{
    font-size: 18px;
}
ul{
    padding-left: 22px;
}
li{
    margin-bottom: 10px;
}
@media(max-width:768px) {
    #page-wrapper{
        flex-direction: column;
    }
    .project-info{
        width: 100%;
        height: 260px;
        border-right: none;
        border-bottom: 2px solid rgba(27, 196, 243, 0.253);
    }
    #three-canvas{
        height: calc(100vh-260px);
    }
}