* { box-sizing: border-box; }
html, 
body { 
    width: 100%; 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
    color:  white;
    font-family: sans-serif;
}
header {
    text-align: center;
    margin:  50px auto;
}
body {
    background: #222;
    overflow: hidden;
}
.circle {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
}
#circleWhite {
    background: #ddd;
}
#circleRed {
    background: firebrick;
}
#circleBlue {
    background: cornflowerblue;
    transition: .2s linear;
}