Google Favicon in pure CSS and HTML

This is the Google Favicon in pure CSS and HTML.

by William Green

HTML

<div id="projectContainer">
    <div id="logoSuperContainer">
        <div id="logoContainer">
            <div id="googleFav">
                <div id="redCircleBorder"></div>
                <div id="orangeCircleBorder"></div>
                <div id="greenCircleBorder"></div>
                <div id="firstHalfBlueCircleBorder"></div>
            </div>
        </div>
    </div>
</div>

CSS

/*Created by William Green (15) in California*/
/*For any questions/comments, email [email protected]*/
#projectContainer {
    position:fixed;
    background-color:#ddd;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
html, body {
    padding:0;
    margin:0;
}
#logoSuperContainer {
    background-color:transparent;
    position:absolute;
    top:50%;
    width:100%;
}
#logoContainer {
    margin:auto;
    display:table;
    background-color:transparent;
}
#googleFav {
    display:table;
}
#redCircleBorder {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: transparent;
    border: 20px solid transparent;
    border-top-color: #E42C29;
}
#orangeCircleBorder {
    position:relative;
    width:50px;
    height:50px;
    border-radius:50%;
    background:transparent;
    border:20px solid transparent;
    border-left-color:#F9B10B;
    bottom:90px;
}
#greenCircleBorder {
    position:relative;
    width:50px;
    height:50px;
    border-radius:50%;
    background:transparent;
    border:20px solid transparent;
    border-bottom-color:#2E9C42;
    bottom:180px;
    -o-transform:rotate(25deg);
    -webkit-transform:rotate(25deg);
    -moz-transform:rotate(25deg);
    -ms-transform:rotate(25deg);
    transform:rotate(25deg);
    z-index:1000;
}
#firstHalfBlueCircleBorder {
    position:relative;
    width:50px;
    height:50px;
    border-radius:50%;
    background:transparent;
    border:20px solid transparent;
    border-right-color:#346DF1;
    bottom:270px;
    -o-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
}
#firstHalfBlueCircleBorder:before {
    content: '';
    width: 40px;
    height: 20px;
    background: #346DF1;
    display: block;
    position: relative;
    -o-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform:...