#text {
    display: inline-block;
    color: #FBCC34;
}

#cursor {
    display: inline-block;
    width: 3px;
    height: 55px;
    background-color: #FBCC34;
    animation: blink .45s step-end infinite;
}

@media only screen and (max-width: 768px) {
    #cursor {
        display: inline-block;
        width: 3px;
        height: 30px;
        background-color: #FBCC34;
        animation: blink .45s step-end infinite;
    }
}

@keyframes blink {

    from,
    to {
        background-color: transparent;
    }

    50% {
        background-color: #FBCC34;
    }
}

/* 11. hover-border-1 */
.hover-border-1:active, .hover-border-1:hover, .hover-border-1:focus {
    outline: 0!important;
    outline-offset: 0;
  }
  .hover-border-1::before,
  .hover-border-1::after {
    position: absolute;
    content: '';
  }
  

.hover-border-1::before,
.hover-border-1::after {
    width: 0;
    height: 0;
    transition: .55s;
    background: #1C2A39;
    border-radius: 10px;
    z-index: 1;
}

.hover-border-1::before {
    top: 0;
    left: 0;
}

.hover-border-1::after {
    bottom: 0;
    right: 0;
}

.hover-border-1:hover::before,
.hover-border-1:hover::after {
    width: 100%;
    height: 100%;
}