body {
    font-family: Quicksand;
    margin: 40px;
    padding: 0;
    color: #fff;
    background-color: #080a6b;
    background: linear-gradient(0,#281130 0,#030133);
}

@red : #E2061B;
@blue: #20C2F7;
@green: #37D631;
@yellow: #ffcc00;

h1 {
    position: relative;
    font-size: 45px;
    margin: 15px 0;
    display: inline-block;
    
    &:after {
        content:'';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 2px;
        background-color: #fff;
        border-radius: 5px;
    }
}

.link-cont {
    position: relative;
    font-size: 24px;
}

.link {
    display: inline-block;
    position: relative;
    text-decoration: none;
    padding: 10px 0;
    color: #fff;
}

.link-wrapper {
    position: relative;
    display: block;
    padding: 20px 0;
}

.inner-wrapper {
    position: relative;
    display: inline-block;
}

/* hover styles */
.hover-1 {
    &:after {
        content:'';
        position: absolute;
        width: 100%;
        height: 3px;
        bottom: 0;
        left: 0;
        background-color: @red;
        transform: scaleX(0);
        transform-origin: bottom right;
        transition: transform 0.3s;
    }

    &:hover {
        &:after {
            transform-origin: bottom left;
            transform: scaleX(1);
        }
    }
}

.hover-2 { 
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 3px;
        transform: scaleX(0);
        background-color: @blue;

        transition: transform 0.3s;
    }

    &:hover {
        &:after {
            transform: scaleX(1);    
        }
    }
}

.hover-3 { 
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: @green;
        transform: scaleX(0);
        transform-origin: bottom left;

        transition: transform 0.3s;
    }

    &:hover {
        &:after {
            transform: scaleX(1);
        }
    }
}

.hover-4 {  
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 3px;
        background-color: @yellow;
        transform: scaleX(0);
        transform-origin: bottom right;

        transition: transform 0.3s;
    }

    &:hover {
        &:after {
            transform: scaleX(1);
        }
    }
}

.hover-5 {
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 3px;
        transform: scaleY(0);
        background-color: @red;

        transition: transform 0.3s;
    }

    &:hover {
        &:after {
            transform: scaleY(1);
        }
    }
}

.hover-6 {
    &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 50%;
        height: 3px;
        background-color: @blue;
        transform: scaleX(0);
        transform-origin: bottom left;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        left : 50%;
        height: 3px;
        background-color: @blue;
        transform: scaleX(0);
        transform-origin: bottom right;

        transition: transform 0.3s;
    }

    &:hover {
        &:before {
            transform: scaleX(1);
        }

        &:after {
            transform: scaleX(1);
        }
    }
}

.hover-7 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: @green;
        transform: scaleX(0);
        transform-origin: top left;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width : 100%;
        height: 3px;
        background-color: @green;
        transform: scaleX(0);
        transform-origin: bottom right;

        transition: transform 0.3s;
    }

    &:hover {
        &:before {
            transform: scaleX(1);
        }

        &:after {
            transform: scaleX(1);
        }
    }
}

.hover-8 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: @yellow;
        transform: scaleX(0);
        transform-origin: top left;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: @yellow;
        transform: scaleX(0);
        transform-origin: top left;

        transition: transform 0.3s;
    }

    &:hover {
    &:before,
        &:after {
            transform: scaleX(1);
        }
    }
}

.hover-9 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 3px;
        background-color: @red;
        transform: scaleX(0);
        transform-origin: top right;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 3px;
        background-color: @red;
        transform: scaleX(0);
        transform-origin: top right;

        transition: transform 0.3s;
    }

    &:hover {
    &:before,
        &:after {
            transform: scaleX(1);
        }
    }
}

.hover-10 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 3px;
        background-color: @blue;
        transform: scaleX(0);

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 3px;
        background-color: @blue;
        transform: scaleX(0);

        transition: transform 0.3s;
    }

    &:hover {
    &:before,
        &:after {
            transform: scaleX(1);
        }
    }
}

.hover-11 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 3px;
        transform: scaleY(0);
        background-color: @green;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 3px;
        transform: scaleY(0);
        background-color: @green;

        transition: transform 0.2s;
    }

    &:hover {
    &:before,
        &:after {
            transform: scaleY(1);
        }
    }
}

.hover-12 {
    &:before {
        content:'';
        position: absolute;
        width: 100%;
        height: 3px;
        top: 0;
        left: 0;
        background-color: @yellow;
        transform: scaleX(0);
        transform-origin: top left;

        transition: transform 0.3s;
    }
    
    &:after {
        content:'';
        position: absolute;
        width: 100%;
        height: 3px;
        bottom: 0;
        right: 0;
        background-color: @yellow;
        transform: scaleX(0);
        transform-origin: bottom right;

        transition: transform 0.3s;
    }

    &:hover {
        &:before {
            transform-origin: top right;
            transform: scaleX(1);
        }
        
        &:after {
            transform-origin: bottom left;
            transform: scaleX(1);
        }
    }
}

.wrapper-13 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 50%;
        height: 3px;
        background-color: @red;
        transform: scaleX(0);
        transform-origin: top left;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left : 50%;
        height: 3px;
        background-color: @red;
        transform: scaleX(0);
        transform-origin: top right;

        transition: transform 0.3s;
    }

    .hover-13 {
        &:before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 50%;
            height: 3px;
            background-color: @red;
            transform: scaleX(0);
            transform-origin: bottom left;

            transition: transform 0.3s;
        }

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            left: 50%;
            height: 3px;
            background-color: @red;
            transform: scaleX(0);
            transform-origin: bottom right;

            transition: transform 0.3s;
        }
        
        &:hover {
            &:before,
            &:after {
                transform: scaleX(1);
            }
        }
    }

    &:hover {
        &:before,
        &:after {
            transform: scaleX(1);
        }
    }
}

.wrapper-14 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background-color: @blue;
        transform: scaleY(0);

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 3px;
        height: 100%;
        background-color: @blue;
        transform: scaleY(0);

        transition: transform 0.3s;
    }

    .hover-14 {
        padding: 10px;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 3px;
            background-color: @blue;
            transform: scaleX(0);

            transition: transform 0.3s;
        }

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 3px;
            background-color: @blue;
            transform: scaleX(0);

            transition: transform 0.3s;
        }
    }

    &:hover {
        &:before, 
        &:after {
            transform: scaleY(1);
        }

        .hover-14 {
            &:before,
            &:after {
                transform: scaleX(1);
            }
        }
    }
}

.wrapper-15 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background-color: @green;
        transform: scaleY(0);
        transform-origin: top left;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 3px;
        height: 100%;
        background-color: @green;
        transform: scaleY(0);
        transform-origin: bottom right;

        transition: transform 0.3s;
    }

    .hover-15 {
        padding: 10px;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: @green;
            transform: scaleX(0);
            transform-origin: top left;

            transition: transform 0.3s;
        }

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 3px;
            background-color: @green;
            transform: scaleX(0);
            transform-origin: bottom right;

            transition: transform 0.3s;
        }
    }

    &:hover {
        &:before, 
        &:after {
            transform: scaleY(1);
        }

        .hover-15 {
            &:before,
            &:after {
                transform: scaleX(1);
            }
        }
    }
}

.wrapper-16 {
    &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background-color: @yellow;
        transform: scaleY(0);
        transform-origin: bottom left;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 3px;
        height: 100%;
        background-color: @yellow;
        transform: scaleY(0);
        transform-origin: top right;

        transition: transform 0.3s;
    }

    .hover-16 {
        padding: 10px;
        
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: @yellow;
            transform: scaleX(0);
            transform-origin: top left;

            transition: transform 0.3s;
        }

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 3px;
            background-color: @yellow;
            transform: scaleX(0);
            transform-origin: bottom right;

            transition: transform 0.3s;
        }
    }

    &:hover {
        &:before, 
        &:after {
            transform: scaleY(1);
        }

        .hover-16 {
            &:before,
            &:after {
                transform: scaleX(1);
            }
        }
    }
}

.wrapper-17 {
    &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background-color: @red;
        transform: scaleY(0);
        transform-origin: bottom left;
        transition: transform 0.2s;

    }

    &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 3px;
        height: 100%;
        background-color: @red;
        transform: scaleY(0);
        transform-origin: top right;
        transition: transform 0.2s 0.2s;
    }

    .hover-17 {
        padding: 10px;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: @red;
            transform: scaleX(0);
            transform-origin: top left;
            transition: transform 0.2s 0.3s;
        }

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 3px;
            background-color: @red;
            transform: scaleX(0);
            transform-origin: bottom right;
            transition: transform 0.2s 0.1s;
        }
    }

    &:hover {
        &:before {
            transform: scaleY(1);
            transition: transform 0.2s 0.3s;
        } 
        
        &:after {
            transform: scaleY(1);
            transition: transform 0.2s 0.1s;
        }

        .hover-17 {
            &:before {
                transform: scaleX(1);
                transition: transform 0.2s;
            }
            
            &:after {
                transform: scaleX(1);
                transition: transform 0.2s 0.2s;
            }
        }
    }
}