@import "../../variables";

#page-404-container {
    .content-svg {
        font: 13.5em "Monoton";
        width: 100%;
        height: 180px;
    }
    .content {
        text-align: center;
        height: 66vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .content-title {
        text-align: center;
        font-weight: bold;
        color: grey;
        opacity: 0.6;
    }
    a {
        display: inline-block;
        text-transform: uppercase;
        font-size: 1em "Roboto";
        font-weight: 300;
        border: 1px solid $color-primary;
        border-radius: 4px;
        color: $color-primary;
        margin: 20px 0;
        padding: 8px 14px;
        text-decoration: none;
        opacity: 0.6;
    }
    .text {
        fill: none;
        stroke: white;
        stroke-dasharray: 8% 29%;
        stroke-width: 5px;
        stroke-dashoffset: 1%;
        animation: stroke-offset 5.5s infinite linear;
    }
    .text:nth-child(1) {
        stroke: $color-secondary;
        animation-delay: -1;
    }
    .text:nth-child(2) {
        stroke: $color-secondary;
        animation-delay: -2s;
    }
    .text:nth-child(3) {
        stroke: $color-primary;
        animation-delay: -3s;
    }
    .text:nth-child(4) {
        stroke: $color-primary;
        animation-delay: -4s;
    }
    .text:nth-child(5) {
        stroke: $color-primary;
        animation-delay: -5s;
    }
    @keyframes stroke-offset {
        100% {
            stroke-dashoffset: -35%;
        }
    }
}