siggy #2 css

#sig{
    margin:75px auto;
    width:350px;
    position:relative;
}
#lines,#square{
    overflow:hidden;
    z-index:-1
}
#lines,#rand,#square{
    z-index:-1
}
.bubble,.bubble:before{
    -webkit-box-shadow:16px 0 0 0 var(--second-color);
    -moz-box-shadow:16px 0 0 0 var(--second-color)
}
#sig h2 span,.bubble:after,.bubble:before,.line:after,.line:before{
    content:""
}
#links,#quote,#sig h2{
    text-align:center
}
#square{
    width:280px;
    height:280px;
    transform:rotate(45deg);
    position:absolute;
    left:55px;
    top:-10px
}
.bubble,.bubble:after,.bubble:before{
    width:8px;
    height:8px;
    border-radius:100%;
    display:inline-block;
    background:var(--first-color)
}
.bubble{
    position:relative;
    margin-right:46px;
    margin-left:46px;
    margin-bottom:10px;
    box-shadow:16px 0 0 0 var(--second-color)
}
#lines,#rand,.bubble:after,.bubble:before{
    position:absolute
}
.bubble:before{
    left:-32px;
    box-shadow:16px 0 0 0 var(--second-color)
}
.bubble:after{
    right:-32px;
    -webkit-box-shadow:16px 0 0 0 var(--second-color);
    -moz-box-shadow:16px 0 0 0 var(--second-color);
    box-shadow:16px 0 0 0 var(--second-color)
}
#links a,#placeholder{
    border:1px solid var(--second-color)
}
#placeholder{
    width:350px;
    height:150px;
    background:var(--image) center no-repeat;
    padding:5px
}
#sig h2{
    font-family:Bangers,cursive;
    font-size:2em;
    margin:0 0 -10px;
    color:var(--second-color);
    text-shadow:-2px -2px 0 rgba(0,0,0,1);
    letter-spacing:3px
}
#sig h2 span{
    border-bottom:20px solid var(--first-color);
    display:inline-block;
    height:15px;
    padding:0 1em
}
#quote{
    background:var(--first-color);
    font-family:Poppins,sans-serif;
    color:#ffff;
    font-size:8px;
    width:80%;
    margin:-20px auto 0;
    padding:.5em 1em;
    text-transform:uppercase;
    line-height:10px
}
#rand{
    width:50px;
    height:50px;
    background:var(--second-color);
    -webkit-clip-path:polygon(50% 0,89% 15%,100% 61%,61% 96%,17% 75%,0 41%,26% 30%);
    clip-path:polygon(50% 0,89% 15%,100% 61%,61% 96%,17% 75%,0 41%,26% 30%);
    left:-20px;
    top:40px
}
#lines{
    width:100px;
    height:100px;
    right:-20px;
    bottom:30px
}
.line{
    height:1px;
    background:var(--first-color);
    margin-bottom:40px;
    position:relative;
    -webkit-box-shadow:0 6px 0 0 var(--first-color);
    -moz-box-shadow:0 6px 0 0 var(--first-color);
    box-shadow:0 6px 0 0 var(--first-color)
}
.line:after,.line:before{
    position:absolute;
    top:12px;
    height:.5px;
    background:var(--first-color);
    display:block;
    width:100%;
    -webkit-box-shadow:0 6px 0 0 var(--first-color);
    -moz-box-shadow:0 6px 0 0 var(--first-color);
    box-shadow:0 6px 0 0 var(--first-color)
}
.line:after{
    top:25px;
    height:1px
}
#links{
    margin-top:10px
}
#links a{
    display:inline-block;
    background:#fff;
    width:10px;
    height:10px;
    margin:0 3px
}