:root {
    --dyslexia: initial;
}
/*
.template {
    
    border: 40px solid; 
    border-image: url("../../images/windows/spec.png") calc(40%) repeat;

    image-rendering: pixelated;
    image-rendering: crisp-edges;

    word-wrap: break-word;

    color: black;

    background: var(--dyslexia, #f0f0f0);
    background-origin: border-box;
    background-clip: padding-box;
    box-decoration-break: slice;
}
*/

.normal { /* share the same name for classes, naming convention is border-<border type> though */
    
    border: 40px solid; /*  sets some basic values, like border width and style */
    border-image: url("../../images/windows/spec.png") calc(40%) repeat;
    /*
        border-image is a shorthand for:
        border-image-source: url("border.png");
        border-image-slice: calc(100% / 3);
        border-image-repeat: round 
    */
    /* 
        about the last value: https://www.w3schools.com/cssref/css3_pr_border-image-repeat.php;
    */
    image-rendering: pixelated; /* makes it not blurry */
    image-rendering: crisp-edges; /* said to be a fallback for firefox */

    word-wrap: break-word;
    /* white-space: pre-line; */

    color: black; /* If applicable */

    background: var(--dyslexia, #f0f0f0);
    background-origin: border-box;
    background-clip: padding-box;
    box-decoration-break: slice;
}


.test-div { /* makes sure the div isnt tiny*/
    min-width: 100px;
    min-height: 100px;
}

.title-window { /* share the same name for classes, naming convention is border-<border type> though */
    
    border: 40px solid; /*  sets some basic values, like border width and style */
    border-image: url("../../images/windows/title.png") calc(40%) repeat;
    /*
        border-image is a shorthand for:
        border-image-source: url("border.png");
        border-image-slice: calc(100% / 3);
        border-image-repeat: round 
    */
    /* 
        about the last value: https://www.w3schools.com/cssref/css3_pr_border-image-repeat.php;
    */
    image-rendering: pixelated; /* makes it not blurry */
    image-rendering: crisp-edges; /* said to be a fallback for firefox */

    word-wrap: break-word;
    /* white-space: pre-line; */

    color: white;

    background: blueviolet;
    background-origin: border-box;
    background-clip: padding-box;
    box-decoration-break: slice;
}

.yellow-win-panel {
    
    border: 50px solid; /*  sets some basic values, like border width and style */
    border-image: url("../../images/windows/win-other.png") calc(45%) round;
    /*
        border-image is a shorthand for:
        border-image-source: url("border.png");
        border-image-slice: calc(100% / 3);
        border-image-repeat: round 
    */
    /* 
        about the last value: https://www.w3schools.com/cssref/css3_pr_border-image-repeat.php;
    */
    image-rendering: pixelated; /* makes it not blurry */
    image-rendering: crisp-edges; /* said to be a fallback for firefox */

    word-wrap: break-word;
    /* white-space: pre-line; */

    color: black;

    background: var(--dyslexia, #d7d7d7);
    background-origin: border-box;
    background-clip: padding-box;
    box-decoration-break: slice;
    padding: 0px;
}

.warning {
    border: 60px solid;
    border-image: url("../../images/windows/warning.png") calc(40%) repeat;

    image-rendering: pixelated;
    image-rendering: crisp-edges; /* said to be a fallback for firefox */

    /* word-wrap: break-word; */
    /* white-space: pre-line; */

    color: black; 

    background: var(--dyslexia, #f3f3f3);
    background-origin: border-box;
    background-clip: padding-box;
    box-decoration-break: slice;
}

.dyslexia-menu {
    border: 16px solid; 
    border-image: url("../../images/windows/tiny.png") calc(40%) repeat;

    image-rendering: pixelated;
    image-rendering: crisp-edges;

    word-wrap: break-word;
    /* white-space: pre-line; */

    color: black;

    background: #FFFFFF;
    background-origin: border-box;
    background-clip: padding-box;
    box-decoration-break: slice;
}