body{
    margin:0;
    font-family: 'Raleway', sans-serif;
}

.container{
    min-height:100vh;
    padding: 50px;
    box-sizing: border-box;
}

.whiteText{
    color:white;
}
.flex{
    display:flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.flexeven{
    display:flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
}

.blue{
    color:#11A6FA;
}

.lightblue{
    background:#f1f6fb;
}

.container .text{
    text-align: center;
    font-size:30px;
    font-weight: 100;
    z-index:1;
}

@media only screen and (max-width: 768px) {
    .container .text{
        font-size:20px;
    }
}

a{
    color: white;
    text-decoration: none;

    z-index: 1;
}
.container .button{
    padding:10px;
    border:solid white 3px;
    max-width: 600px;
    color: white;
    text-decoration: none;
}
.container .button:hover{
    cursor: pointer;
    background:rgba(255,255,255,0.25);
}

.m20{
    margin:20px;
}
.m50{
    margin:20px;
}
.icon{
    position:relative;
    top:5px;
}
.skills{
    display: flex;
}
.skills .skill{
    padding:10px;
}
.split{
    width:100%;
    display: flex;
    flex:1;
    margin-top: 50px;
}

@media only screen and (max-width: 768px) {
    .split{
        flex-direction: column;
    }
}

.graph{
    flex:1;
    padding:10px;
}
.bar{
    width:90%; 
    height:25px;
    background:#EEEEEE;
    display:flex;
    color:#969696;
    font-size:12px;
    text-align: right;
    margin-bottom: 10px;

}
.bar .title{
    background:#2e95d0;
    padding:6px;
    color:white;
    vertical-align: middle;
    width: 60px;
    text-align: center;
}
.bar .percent{
    flex:1;
    text-align: right;
    padding:6px;
}
.bar .fill{
    background:#5BC1FC;
}

.width-9{
    width: calc(90% - 60px);
}
.width-8{
    width: calc(80% - 60px);
}
.width-7{
    width: calc(70% - 60px);
}
.width-6{
    width: calc(60% - 60px);
}
.width-5{
    width: calc(50% - 60px);
}
.width-4{
    width: calc(40% - 60px);
}
.width-3{
    width: calc(30% - 60px);
}

.about{
    flex:1;
}
.about .title{
    font-size:24px;
    text-align: center;
}
.about p{
    text-align: center;
    margin: auto;
    max-width: 500px;
    color:#585757;
}
.about .profile{
    margin: auto;
    height:200px;
    width:200px;
    background-image: url("profile.png");
    background-size: contain;
}
.about a{
    color:#cbc1c1;
}
footer{
    background:#252934;
    color:white;
    text-align: center;
    padding:50px;
}
footer .button{
    background:rgba(255,255,255,0.1);
    width:42px;
    display: inline-block;
    font-size: 28px;
    padding:10px;
}
footer .button:hover{
    background:rgba(255,255,255,0.25);
}
.works{
    display:flex;
    justify-content: center;
    flex-direction: row;
    color:white;
    font-size: 24px;
    flex-wrap: wrap;
}
.overlay{
    height: 100%;
}
.overlay:hover{
    background: rgba(0,0,0,0.5);
}
.work .title{
    background: #5bc1fc;
    padding: 10px;
    width: 100px;
    font-size: 20px;
    border-bottom-right-radius:20px;
}
.work .desc{
    visibility: hidden;
    padding:20px;
}
.work:hover .desc{
    visibility: visible;
}
.work{
    flex:1;
    max-width: 400px;
    min-width: 400px;
    height:300px;
    margin:10px;
}
.vrprojectbg{
    background:url(vr.jpg);
    background-size:cover;
}
.gamebg{
    background:url(game.jpg);
    background-size:cover;
}
.ahhtiger{
    background:url(ahhtiger.png);
    background-size:cover;
}
.houwei{
    background:url(houwei.jpg);
    background-size:cover;
}
.sushihibachi{
    background:url(sushihibachi.jpg);
    background-size:cover;
}
.leetquest{
    background:url(leetquest.jpg);
    background-size:cover;
}
#particles-js{
    position:absolute;
    top:0;
    background:#252833;
    height:100%;
    width:100%;
}
.yiphealth{
    background:url(yiphealth.png);
    background-size:cover;
}