CSS light bulb!

CSS light bulb, hey I had a cool idea so light the light bulb for me ;)

by William Green

HTML

<div id="projectContainer">
    <div id="lightbulbSuperContainer">
    <div id="lightbulbContainer">
        <div id="lineOne"></div>
        <div id="lineTwo"></div>
        <div id="lineThree"></div>
        <div id="circle"></div>
        <div id="rectangle"></div>
        <div id="rectangleTwo"></div>
        </div>
    </div>
</div>

CSS

#projectContainer {
    background-color:#ddd;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
#lightbulbSuperContainer {
    position:absolute;
    top:30%;
    width:100%;
}
#lightbulbContainer {
    display:table;
    margin:auto;
}
#circle {
    background-color:#FFCB3A;
    width:150px;
    height:150px;
    -webkit-border-radius:50%;
    border-radius:50%;
    margin:auto;
}
#rectangle {
    background-color:#FFCB3A;
    width:75px;
    height:100px;
    -webkit-border-top-left-radius:20%;
    -webkit-border-top-right-radius:20%;
    border-top-left-radius:20%;
    border-top-right-radius:20%;
    margin:auto;
    position:relative;
    bottom:50px;
}

#lineOne {
    background-color:#FFCB3A;
    height:50px;
    width:5px;
    transform:rotate(-35deg);
    float:left;
    position:relative;
    bottom:35px;
}

#lineTwo {
    background-color:#FFCB3A;
    height:65px;
    width:5px;
    margin:auto;
    position:relative;
    bottom:65px;
    margin-bottom:-55px;
}

#lineThree {
    background-color:#FFCB3A;
    height:50px;
    width:5px;
    transform:rotate(20deg);
    float:right;
    position:relative;
    bottom:40px;
}

#rectangleTwo {
    background-color:#B5B5B5;
    width:75px;
    height:30px;
    position:relative;
    bottom:50px;
    margin:auto;
    -webkit-border-bottom-left-radius:20%;
    -webkit-border-bottom-right-radius:20%;
    border-bottom-left-radius:20%;
    border-bottom-right-radius:20%;
}