:root {
    --section1: #28273CE4;
    --shadow: #00000093;
}

@keyframes scroll {
    from {
        background-position: top left;
    } to {
        background-position: bottom right;
    }
}

.notfound-display {
    background-image: url("/resources/images/warning-background.webp");
    background-size: 64px;
    animation: scroll 60s linear infinite;
    border-left: 2px solid var(--black);
    border-top: 2px solid var(--black);
    border-right: 2px solid var(--grey);
    border-bottom: 2px solid var(--grey);
    padding: 5px;
    padding-left: 8px;
    padding-right: 8px;
}

.notfound-display section {
    background-image: url("/resources/images/SVGs/warning.svg"), linear-gradient(180deg, var(--section1) 30%, var(--section2) 100%);
    background-repeat: no-repeat, repeat;
    background-size: 50% 300px;
    background-position: right 90%;
    border-left: 5px solid var(--section);
    border-top: 5px solid var(--section);
    border-right: 5px solid var(--sedtion);
    border-bottom: 5px solid var(--section);
    margin-right: 3px;
    margin-bottom: 15px;
    height: 230px;
}

.notfound-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.notfound-footer .title {
    font-size: medium;
    margin: 0;
}

.aya2 {
    filter: drop-shadow(8px 8px var(--black));
    position: fixed;
    opacity: 0.5;
    right: 0px;
    bottom: 0px;
    width: 21%;
    min-width: 300px;
}