Google drive logo version 1 in CSS and HTML

Create the Google Drive logo in CSS and HTML (version 1.0). Still a little rough. Hopefully, I'll come out with a new version to even out the edges.

by William Green

HTML

<div id="projectContainer">
    <div id="driveSuperContainer">
        <div id="driveContainer">
            <div id="lineOne"></div>
            <div id="lineTwo"></div>
            <div id="lineThree"></div>
        </div>
    </div>
</div>

CSS

#projectContainer {
    background-color:#ddd;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
#driveSuperContainer {
    width:100%;
    position:absolute;
    top:-webkit-calc(50% - 64px);
    top:-moz-calc(50% - 64px);
    top:-ms-calc(50% - 64px);
    top:-o-calc(50% - 64px);
    top:calc(50% - 64px);
}
#driveContainer {
    width:128px;
    height:128px;
    margin:auto;
    background-color:transparent;
}

#lineOne {
    /*yellow line*/
    background-color: #FDCF49;
    width: 15px;
    position: relative;
    left: 64px;
    top: 19px;
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    transform: rotate(-35deg);
    height: 50px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}
#lineTwo {
    /*blue line*/
    background-color: #3B81F7;
    position: relative;
    margin: auto;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    width: 55px;
    height: 15px;
}
#lineThree {
    /*green line*/
    height: 50px;
    background-color: #0CA65E;    
    position: relative;
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    transform: rotate(35deg);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    bottom: 47px;
    left: 43px;
    width: 15px;
}