@charset "UTF-8";

* {
    margin: 0px;
    padding: 0px;
}

html {
    background-color: #333;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

canvas {
    position: fixed;
    /*z-index: -1;*/
    transition:
        top    0.5s cubic-bezier(0.075, 0.82, 0.165, 1.0),
        bottom 0.5s cubic-bezier(0.075, 0.82, 0.165, 1.0),
        left   0.5s cubic-bezier(0.075, 0.82, 0.165, 1.0),
        right  0.5s cubic-bezier(0.075, 0.82, 0.165, 1.0);
}

#layer {
    background-color: rgba(0, 0, 0, 1.0);
    color: whitesmoke;
    width: 100%;
    height: 100%;
    position: fixed;
    /*z-index: -1;*/
    transition: background-color 0.5s linear;
}

#layer.fade {
    background-color: rgba(0, 0, 0, 0.0);
    transition: background-color 0.5s linear;
}

#layer.hidden {
    display: none;
}

#uFang, #bFang {
    width: 100%;
    height: 50%;
    position: fixed;
    /*z-index: -1;*/
    overflow: hidden;
}

#uFang {
    top: 0px;
}

#bFang {
    bottom: 0px;
}

#uFang .fang, #bFang .fang {
    background-color: crimson;
    margin: 0px 1% 0px 1%;
    width: 8%;
    height: 100%;
    position: relative;
    float: left;
    transition:
        top    0.5s cubic-bezier(0.075, 0.82, 0.165, 1.0),
        bottom 0.5s cubic-bezier(0.075, 0.82, 0.165, 1.0);
}

#uFang .fang {
    top: -100%;
}

#bFang .fang {
    bottom: -100%;
}

#cUpLeft {
    top: -1px;
    left: -100%;
}

#cUpRight {
    top: -1px;
    right: -100%;
}

#cBottomLeft {
    bottom: -1px;
    left: -100%;
}

#cBottomRight {
    bottom: -1px;
    right: -100%;
}

#wrap {
    background-color: rgba(0, 0, 0, 0.0);
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
    overflow: auto;
    transition: background-color 0.5s linear;
}