@import url(http://fonts.googleapis.com/css?family=Megrim);

$line-size: 1px;

$color-init: #F9D423;
$color-first: #FE4365;
$color-second: #C7F464;
$color-third: #4ECDC4;
$color-fourth: #556270;

$megrim: 'Megrim', cursive;

html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .line {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        transform-origin: left top;

        &.first {
            background: $color-first;
        }

        &.second {
            background: $color-second;
        }

        &.third {
            background: $color-third;
        }

        &.fourth {
            background: $color-fourth;
        }
    }

    .mask {
        position: absolute;
        z-index: 2;

        &.horizontal {
            width: 100%;
            height: calc(50% - #{$line-size});

            &.top {
                top: 0;
            }

            &.bottom {
                bottom: 0;
            }
        }

        &.vertical {
            height: 100%;
            width: calc(50% - #{$line-size});

            &.right {
                right: 0;
            }

            &.left {
                left: 0;
            }
        }

        &.top-right {
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 271px 200px 0;
        }

        &.bottom-left {
            left: 0;
            bottom: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 200px 0 0 271px;

            transform-origin: top right;
        }

        &.top-left {
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 200px 271px 0 0;
        }

        &.bottom-right {
            bottom: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 200px 271px;
        }
    }

    &.first {
        background: $color-init;

        .mask {
            background: $color-init;
        }
    }

    &.second {
        background: $color-first;

        .mask {
            background: $color-first;
        }
    }

    &.third {
        background: $color-second;

        .mask {
            &.top-right {
                border-color: transparent $color-second transparent transparent;
            }

            &.bottom-left {
                border-color: transparent transparent transparent $color-second;
            }
        }
    }

    &.fourth {
        background: $color-third;

        .mask {
            &.top-left {
                border-color: $color-third transparent transparent transparent;
            }

            &.bottom-right {
                border-color: transparent transparent $color-third transparent;
            }
        }
    }
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: $color-fourth;

    h1 {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        padding: 0;
        transform: translateX(-50%) translateY(-50%);
        font-family: $megrim;
        font-size: 80px;
        color: white;
        text-align: center;

        .underline {
            position: relative;
            display: block;
            width: 160px;
            height: 5px;
            background: white;
            margin-top: 20px;
            left: 50%;
            transform: translateX(-48%);
        }
    }
}