*:not(#header, #header *){
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}

body{
    margin:0;
    padding:0;
    overflow:hidden;
}

.area{
    overflow:hidden;
    margin-top:-50px;
}

#header{
    transition:0.5s;
}

.helpBox{
    background:rgba(255,255,255,0.85);
    position:absolute;
    font-family:Helvetica, Arial, sans-serif;
    top:50px;
    right:30px;
    padding:10px;
    height:430px;
    overflow:hidden;
    width:310px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    transition:0.5s;
}

.colourSquareExpl{
    width:20px;
    height:20px;
    line-height:20px;
    text-align:center;
    display:inline-block;
    color:white;
    font-size:12pt;
}

.toggleBox{
    position:absolute;
    width:270px;
    height:60px;
    background:rgba(255,255,255,0.6);
    line-height:60px;
    margin-left:10px;
    border-radius:3px;
}

.toggleShape{
    width:30px;
    height:30px;
    text-align:center;
    color:white;
    display:inline-block;
    margin:0 15px;
    cursor:pointer;
    vertical-align:middle;
    line-height:30px;
}

.colorPickBox{
    height:30px;
    cursor:pointer;
}

#colourCont{
    font-size:0;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}

.piSquare{
    display:inline-block;
}

.circle{border-radius:1000px}

#showInterface{
    background:rgba(255,255,255,0.9);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    background-image:url('downarrow.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:25px auto;
    width:120px;
    height:40px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    position:absolute;
    cursor:pointer;
    top:-430px;
    right:50px;
    transition:0.5s;
}