@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,100);
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700,300,100);



body {
    cursor: none;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(29deg, black,black, red, rgb(0, 255, 0), blue, cyan, magenta, yellow, black, white);
    animation: gradientanimation 240s ease infinite;
    
}

@keyframes gradientanimation {
    0% {
        background-position: 0% 50%;
        background-size: 1500%;
    }

    50% {
        background-position: 100% 50%;
        background-size: 500%;
    }

    100% {
        background-position: 0% 50%;
        background-size: 1500%;
    }
}


a {
    color: white;
    text-decoration: none;
}

a:hover {
    text-decoration: line-through;
    font-weight: 100;
}

a:visited {
    color: white;
}

.mod {
    width: 350px;
    text-align: left;
    font-family: "Roboto";
    font-size: 20px;
    font-weight: 900;
    position: relative;
    user-select: none;
    color: white;
    mix-blend-mode: difference;

    .l2 {
        font-size: 100px;
    }

    .l3 {
        font-weight: 100;
    }

    .l4 {
        font-weight: 800;
    }
}

[class*="icono-arrow1"] {
    width: 20px;
    height: 20px;
    border-width: 4px 4px 0 0;
    border-style: solid;
    margin: 10px;

    &:before {
        right: 0;
        top: -3px;
        position: absolute;
        height: 4px;
        box-shadow: inset 0 0 0 32px;
        transform: rotate(-45deg);
        width: 23px;
        transform-origin: right top;
    }

    &[class*="-left"] {
        transform: rotate(45deg);

        &[class*="-up"] {
            transform: none;
        }

        &[class*="-down"] {
            transform: rotate(90deg);
        }
    }

    &[class*="-right"] {
        transform: rotate(-135deg);

        &[class*="-up"] {
            transform: rotate(-90deg);
        }

        &[class*="-down"] {
            transform: rotate(180deg);
        }
    }

    &[class*="-up"] {
        transform: rotate(-45deg);
    }

    &[class*="-down"] {
        transform: rotate(135deg);
    }
}

[class*="icono"] {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: white;
    mix-blend-mode: difference;
    box-sizing: border-box;

    &:after,
    &:before {
        content: "";
        box-sizing: border-box;
    }
}

.cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 50%;
  border: 2px solid white;
  transition: transform 0.3s ease;
  transform-origin: center center;
  pointer-events: none;
  z-index: 1000;
  mix-blend-mode: difference;
}

.grow, .grow-small {
  transform: scale(3);
  background: #fff;
  mix-blend-mode: difference;
  border: none;
}

.grow-small {
  transform: scale(1.5);
}