* {
    padding: 0;
    margin: 0;
}

html, body {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {


    .main-container {
        height: 100%;

        .main {
            position: relative;
            width: 100%;
            height: 100%;
            background: url("../img/Error-BG.jpg") no-repeat center center;
            background-size: 100%;
            display: flex;
            -webkit-justify-content: center;
            justify-content: center;
            -ms-align-content: center;
            -webkit-align-content: center;
            align-content: center;
            -webkit-align-items: center;
            align-items: center;
            flex-wrap: wrap;

            .content {
                width: max-content;
                height: max-content;
                text-align: center;

                .text-404 {
                    margin: auto;
                }

                .char-maintenance {
                    position: relative;
                    width: 100vw; //set by width 1920px (1920px)
                    aspect-ratio: 1920/497; //set by width 1920px (497px)
                    background: url("../img/Dzogame-Trang-Error-Mas.png") no-repeat center center;
                    background-size: 100% 100%;
                }

                .text {
                    font-weight: bold;
                    font-size: 20pt;
                    color: #b54b01;
                    margin-bottom: 1.041666667vw; //set by width 1920px (20px)

                    a {
                        color: #ff2e00;
                    }

                    .counttime {
                        color: #ff2e00;
                    }
                }
            }
        }
    }
}

@media screen and (orientation: portrait), screen and (max-width: 1024px) {
    body {
        .main-container {
            .main {
                .content {
                    max-width: 100%;
                }
            }
        }
    }
}