/* @font-face {
    font-family: "Oxproto";
    src: url(./0xProto_2_202/fonts/0xProto-Regular.woff2),
    url(./0xProto_2_202/fonts/0xProto-Regular.otf),
    url(./0xProto_2_202/fonts/0xProto-Regular.ttf);
    font-weight: normal;
    font-size: 0.8rem;
}

@font-face {
    font-family: "Oxproto";
    src: url(./0xProto_2_202/fonts/0xProto-Bold.woff2),
    url(./0xProto_2_202/fonts/0xProto-Bold.otf),
    url(./0xProto_2_202/fonts/0xProto-Bold.ttf);
    font-weight: bold;
    font-size: 0.8rem;
}

@font-face {
    font-family: "Oxproto";
    src: url(./0xProto_2_202/fonts/0xProto-Italic.otf),
    url(./0xProto_2_202/fonts/0xProto-Italic.ttf),
    url(./0xProto_2_202/fonts/0xProto-Italic.woff2);
    font-style: italic;
    font-size: 0.8rem;
} */


:root body{
    --c-base: white;
    --c-text: black;
    --c-text-off: rgb(132, 132, 132);
    --c-emph: #900;
    --c-emph-lop: rgb(255, 201, 184);
    --c-off: #ccc;
    --c-off-lop: #ccc5;
    --c-offtext: rgb(161, 161, 161);

    
}

:root body.dark{
    --c-base: hsl(0, 0%, 10%);
    --c-text: rgb(255, 255, 255);
    --c-text-off: rgb(147, 147, 147);
    --c-emph: #487ab4;
    --c-emph-lop: #3d5f71;
    --c-off: #474747;
    --c-off-lop: hsla(0, 0%, 29%, 0.551);
    --c-offtext: rgb(146, 146, 146);
}

body{
background-color: var(--c-base);
color: var(--c-text);
font-family:  monospace;
margin: 0;

}

input, textarea {
    color: var(--c-text);
}

.ws-disabled{
    display: grid;
    height: fit-content;
    
    align-items: center;
    justify-content: center;
    margin: auto;
    overflow-wrap: break-word;
    text-wrap: wrap;
    padding: 15px;
    
    
     p {
        margin: 1.286em 0;
        padding: 0;
        line-height: 1.5;
    }
    
     hr{
        width: 33%;
        margin: .875em auto 1.2525em;
        border: 1px solid;
    }
    
     h1,  h2,  h3,  h4,  h5,  h6 {
        font-family: Georgia,serif;
        font-weight: 400;
        word-wrap: break-word;
    }


    .hidden{
        display: none;
    }

         pre{
        text-wrap: wrap;
    }
}
    

    
.ws-disabled::after{
    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus dolor, dictum non efficitur at, ultricies sit amet nisi. Etiam quis molestie nunc, sed tempus lectus. Curabitur molestie malesuada ex sed facilisis.";
    display: block;
    opacity: 60%;
    mask-image: linear-gradient(180deg, #000000ca 0%, #00000034);
    -webkit-mask-image: linear-gradient(180deg, #000000ca 0%, #00000034);

}

.ws-disabled::before{
    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus dolor, dictum non efficitur at, ultricies sit amet nisi. Etiam quis molestie nunc, sed tempus lectus. Curabitur molestie malesuada ex sed facilisis. ";
    display: block;
    opacity: 60%;
    mask-image: linear-gradient(0deg, #000000ca 0%, #00000034);
    -webkit-mask-image: linear-gradient(0deg, #000000ca 0%, #00000034);

}