h2 
    span.blue G
    span.red o
    span.yellow o
    span.blue g
    span.green l
    span.red e
    span  
    span.blue M
    span.red i
    span.yellow c
    span  
    span.green I
    span.blue c
    span.red o
    span.yellow n
h3
    span.blue i
    span.red n
    span  
    span.yellow p
    span.green u
    span.blue r
    span.red e
    span  
    span.yellow c
    span.green s
    span.blue s
    

.display

    .google-mic
        .part
            .blue
        .part
            .red.one
            .red.two
            .yellow
        .part
            .green

$googleBlue: #4285F4;
$googleRed: #EA4335;
$googleYellow: #FBBC05;
$googleGreen: #34A853;
$size: 4em;

* {
    box-sizing: border-box;
}

body {
    font-family: 'Droid Serif', serif;
    letter-spacing: 0.3em;
}

h2, h3 {
    text-align: center;
    color: $googleBlue;
    
    .blue { color: $googleBlue; }
    
    .red  { color: $googleRed; }
    
    .yellow { color: $googleYellow; }
    
    .green { color: $googleGreen; }
}

.display {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    height: 80vh;
}

.google-mic {
    position: relative;
    padding-top: $size * .2;
    font-size: $size;
    width: $size;
    height: $size;
    border: 1px solid #ccc;
    
    
    .part {
        position: relative;
        display: flex;
        justify-content: center;
        
        .blue {
            background-color: $googleBlue;
            width: $size * 0.195;
            height: $size * 0.4;
            border-top-left-radius: 50% 30%;
            border-top-right-radius: 50% 30%;
            border-bottom-left-radius: 50% 30%;
            border-bottom-right-radius: 50% 30%;
        }
        
        .red {
            margin-top: -$size * .15;
            width: $size / 5;
            height: $size / 4.3;
            background-color: transparent;
            border: ($size * 0.05) solid $googleRed;
            border-right-color: transparent;
            border-left-color: transparent;
            border-top-color: transparent;
            
            &.one {
                border-bottom-left-radius: 100% 100%;
                border-right-width: 0;
            }
            
            &.two {
                border-bottom-right-radius: 100% 100%;
                border-left-width: 0;
            }
        }
        
        .yellow {
            position: absolute;
            margin-top: -$size * .15;
            width: $size / 4.9;
            height: $size / 4.3;
            background-color: transparent;
            border: ($size * 0.05) solid $googleYellow;
            border-right-color: transparent;
            border-left-color: transparent;
            border-top-color: transparent;
            border-bottom-left-radius: 100% 100%;
            border-right-width: 0;
            left: ($size / 3.4);
            -webkit-clip-path: polygon(0 1%, 100% 0%, 15% 100%, 0% 100%);
            clip-path: polygon(0 1%, 100% 0%, 15% 100%, 0% 100%);
        }
        
        .green {
            position: absolute;
            background-color: $googleGreen;
            width: $size * .05;
            height: $size * .09;
            z-index: -10;
            top: -$size * 0.01;
            left: ($size / 2) - ( ($size * .05) / 2);
        }
    }
}