@import './globals.scss';

.DarkLine404{
    background-color: #2F2F31;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    .holder-404 {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .removeItem{
        display: none;
    }

    .danger-line{
        position: absolute;
        z-index: 2;
        background-color: rgb(102,102,102);
    }

    .danger-line-1{
        top: 50px;
        left: 0;
        width: 100vw;
        height: 2px;
    }

    .danger-line-2{
        top: 0;
        left: 50px;
        width: 2px;
        height: 100vh;
    }

    .content-404 {
        width: 100%;
        height: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        margin: 10% auto;
        z-index: 2;

        .text-404 {
            font-size: 10rem;
            position: relative;
            z-index: 2;
            letter-spacing: 15px;
            color: rgb(122,122,122);
        }

        .text-1 {
            text-align: center;
            display: block;
            position: relative;
            letter-spacing: 0.0123rem;
            font-size: 3rem;
            line-height: 80%;
            margin: 20px 0;
            color:  rgb(82,82,82);
        }

        .text-2 {
            text-align: center;
            display: block;
            position: relative;
            font-size: 1.3rem;
            margin: 20px 0;
            clear: both;
            width: 100%;
            min-height: 30px;
            color:  rgb(82,82,82);
        }

        .button-navigation {
            background-color: rgb(255, 255, 255);
            position: relative;
            display: inline-block;
            padding: 10px 30px;
            z-index: 5;
            font-size: 0.87rem;
            border: 1px solid rgba(69, 69, 69, 0.1);
            color: rgba(69, 69, 69, 0.8);
            text-decoration: none;
            margin: 10px 0;
            border-radius: $border-radius;
            z-index: 1;
        }

        .hr {
            position: relative;
            display: flex;
            width: 100%;
            overflow: hidden;
            z-index: 2;

            .hr-line{
                width: 50%;
                height: 5px;
                background-color: linear-gradient(to right, #252526, #252526);
                opacity: 1;
                transform: scale(1);
                transition-duration: 300ms;
            }

            @keyframes danger-hr-line {
                0% {
                    opacity: 1;
                    width: 0%;
                    left: 0%;
                }
                50%{
                    opacity: 0.5;
                    width: 30%;
                }
                100% {
                    left: 100%;
                    width: 0%;
                    opacity: 0;
                }
            }

            .hr-line-1{
                position: relative;
                animation: danger-hr-line 3s infinite ease-in-out;
                z-index: 1;
            }
            .hr-line-1:after{
                content: '';
                position: absolute;
                top:0;
                left:0;
                height: 5px;
                width: 0%;
                background-color: #fcbe11;
                animation: danger-hr-line 3s infinite ease-in-out;
                z-index: 2;
            }
        }
    }
}