body {
    background-image: url('/twilight.png');
    background-size: cover;
    background-attachment: fixed;
    font-family: Arial, sans-serif;
    min-width: 585px;
}


/* selected window */

.window_selected::before {
    content: "";        
    position: absolute;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;      
    pointer-events: none;

    /*order is important*/
    background: url(/styles/4dwm_elements/sel_window-topleft.png) top left no-repeat,
        url(/styles/4dwm_elements/sel_window-topright.png) top right no-repeat,
        url(/styles/4dwm_elements/sel_window-topmiddle.png) top center repeat-x,

        url(/styles/4dwm_elements/sel_window-botleft.png) bottom left no-repeat,
        url(/styles/4dwm_elements/sel_window-botright.png) bottom right no-repeat,

        url(/styles/4dwm_elements/sel_window-centerleft.png) center left repeat-y,
        url(/styles/4dwm_elements/sel_window-centerright.png) center right repeat-y,

        url(/styles/4dwm_elements/sel_window-botmiddle.png) bottom center repeat-x;
        
    image-rendering: pixelated;
}

.window_selected {
    position: relative;
    z-index: 0;
    background-color: #f0f0f0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8px;
    padding: 38px 25px;
    max-width: 800px;
    margin-top: 8px;
}


/* default window */

.window::before {
    content: "";        
    position: absolute;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;    
    pointer-events: none;

    /*order is important*/
    background: url(/styles/4dwm_elements/window-topleft.png) top left no-repeat,
        url(/styles/4dwm_elements/window-topright.png) top right no-repeat,
        url(/styles/4dwm_elements/window-topmiddle.png) top center repeat-x,

        url(/styles/4dwm_elements/window-botleft.png) bottom left no-repeat,
        url(/styles/4dwm_elements/window-botright.png) bottom right no-repeat,

        url(/styles/4dwm_elements/window-centerleft.png) center left repeat-y,
        url(/styles/4dwm_elements/window-centerright.png) center right repeat-y,

        url(/styles/4dwm_elements/window-botmiddle.png) bottom center repeat-x;

    image-rendering: pixelated;
}

.window {
    position: relative;
    z-index: 0;
    background-color: #f0f0f0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8px;
    padding: 38px 25px;
    max-width: 800px;
    margin-top: 8px;
}


/* 4sight window */

.window_4sight {
    position: relative;
    z-index: 0;
    background-color: #f0f0f0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8px;
    padding: 38px 25px;
    max-width: 800px;
    margin-top: 8px;
}

.window_4sight::before {
    content: "";        
    position: absolute;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;      
    pointer-events: none;

    /*order is important*/
    background: url(/styles/4dwm_elements/4sight-window-topleft.png) top left no-repeat,
        url(/styles/4dwm_elements/4sight-window-topright.png) top right no-repeat,
        url(/styles/4dwm_elements/4sight-window-top.png) top center repeat-x,

        url(/styles/4dwm_elements/4sight-window-botleft.png) bottom left no-repeat,
        url(/styles/4dwm_elements/4sight-window-botright.png) bottom right no-repeat,

        url(/styles/4dwm_elements/4sight-window-midleft.png) center left repeat-y,
        url(/styles/4dwm_elements/4sight-window-midright.png) center right repeat-y,

        url(/styles/4dwm_elements/4sight-window-bottom.png) bottom center repeat-x;
        
    image-rendering: pixelated;
}




@media only screen and (max-width: 1128px) {

    .window_selected {
        margin-top: 60px;
    }
    .window_4sight {
        margin-top: 60px;
    }
}



/* legacy */

.container {
    min-height: 100vh;
    background-color: #FFFFFF;
    margin-right: auto;
    margin-left: auto;
    max-width: 800px;
    margin-top: 8px;
    @media only screen and (max-width: 1100px) {
        margin-top: 58px;
    }
    margin-bottom: 8px;;
    padding: 15px 25px;
    box-sizing: border-box;
    border-width: 3px;
    border-style: inset;
    border-color: #A5A5A5;
    border-radius: 3px;
}

.box {
    justify-content: center;
    align-items: center;
    border-width: 2px;
    border-style: inset;
    border-color: #A5A5A5;
    border-radius: 3px;
    padding: 15px 25px;
    box-sizing: border-box;
    margin-top: 6px;
}