@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #08080A;
    background: linear-gradient(0deg, #000000 0%, #08080A 50%, #08080A 100%);
    color: white;
    font-size: 20px;
}

div.error-wrapper {
    width: 100%;
    height: 100%;
    background-color: #08080A;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    /* container selector by size */
    container-type: inline-size;
    container-name: error-container;
}

div.text {
    padding-top: 8%;
    padding-left: 10%;
}

@media (height > 1440px) {
    div.error-wrapper {
        background-image: url("/images/error-bg-xxl.jpg");
    }
}

@media (height > 1080px) and (height < 1441px) {
    div.error-wrapper {
        background-image: url("/images/error-bg-xl.jpg");
    }
}

@media (height > 720px) and (height < 1081px) {
    div.error-wrapper {
        background-image: url("/images/error-bg-l.jpg");
    }
}

@media (height > 420px) and (height < 721px) {
    div.error-wrapper {
        background-image: url("/images/error-bg-s.jpg");
    }
}

@media (height < 421px) {
    div.error-wrapper {
        background-image: url("/images/error-bg-xs.jpg");
    }
}

h1 {
    margin: 0 0 0.5em 0;
    padding: 0;
    font-family: "Poiret One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3em;
}

p {
    margin: 0;
    padding: 0;
    font-family: monospace;
    font-size: 1em;
}