.custom-error-page{
    width: 100%;
    margin: 0;

    .error-content{
        gap: 25px;

        width: 100%;

        height: 33vw;
        min-height: 500px;

        margin: 20px 0 0;
        padding: 20px;

        border-radius: 8px;
        box-shadow: 5px 5px 12px var(--gray);
        box-sizing: border-box;

        @media screen and (max-width: 860px){
            height: auto;
            min-height: 0;
        }
        h1 {
            font-size: clamp(40px, 10vw, 120px);
            font-weight: bold;
            max-width: 800px;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            color: transparent;
            -webkit-background-clip: text;

            letter-spacing: 20px;
            line-height: 10vw;

            text-align: center;
        }

        h1::before {
            content: attr(data-text);
            position: absolute;
            top: 5px;
            left: 5px;
            width: 100%;
            height: 100%;
            color: rgba(0, 0, 0, 0.4);
            z-index: -1;
            filter: blur(4px);
            transform: translate(2px, 2px);
        }

        @media screen and (max-width: 768px){
            h1::before {
                top: 2px;
                left: 2px;
            }

        }

        h1::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(-45deg, rgba(255,193,7,1) 0%, rgba(238,120,28,1) 43%, rgba(220,53,69,1) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
        }

        p.title{
            font-size: clamp(18px, 4vw ,40px);
            text-transform: uppercase;
            font-weight: bold;
            text-align: center;

            max-width: 800px;

            margin-bottom: 0;
        }

        p.text{
            font-size: clamp(16px, 2vw ,30px);
            color: var(--gray);
            text-align: center;

            max-width: 870px;

            margin-bottom: 0;
        }

        .buttons{
            gap: 30px;

            max-width: 800px;

            @media screen and (max-width: 564px){
                flex-direction: column;

                max-width: none;
                width: 100%;
                gap: 15px;
            }

            a{
                font-size: clamp(16px, 1vw ,27px);
                text-transform: uppercase;

                min-height: 50px;
                padding: 5px 20px;

                border-radius: 22px;
                border: 1px solid var(--cyan);
                box-sizing: border-box;

                transition: all 0.5s ease;

                @media screen and (max-width: 564px){
                    width: 100%;
                }
            }

            .to-home, .to-mail:hover{
                background-color: var(--cyan);
                color: white;
            }

            .to-home:hover {
                background-color: white;
                color: var(--cyan);
            }
        }
    }
}