body {
    overflow-x: hidden;
    background-color: #00f5d4;
    font-family: "Saira Stencil One", sans-serif;
    word-break: break-word;
    color: #000;
	
	background-color: #ffffff;
    background-image:
        linear-gradient(to right, rgba(0, 110, 225, 0.25) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 110, 225, 0.25) 1px, transparent 1px);
    background-size: 80px 80px; /* grid spacing */
}

/* MAIN CONTAINER */
.wrapper {
    margin-left: 50%;
    transform: translate(-50%, 0);
    width: 50%;
    min-height: 500px;

    background: #ffffff;
    padding: 24px;

    border: 4px solid #000;
    box-shadow: 10px 10px 0 #000;
}

.header {
    background-color: #f6f700;
    color: #000;

    padding: 20px;
    width: 100%;

    transform: translate(-24px, -24px);
    border-bottom: 4px solid #000;
}

.codea {
    background-color: #111;
    border: 1px solid #ddd;
    padding: 20px;
    display: block;
	color: white;
	overflow-x: scroll;
	white-space: pre;
}
details{
	background-color: #fff;
	
	padding: 24px;
	
	border: 4px solid #000;
    box-shadow: 10px 10px 0 #000;
}

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

h1, .header a {
    color: #000;
    text-decoration: underline;
}

.cwfoot {
    background: #ffffff;
    color: #000;
    text-align: center;

    padding-top: 3vh;
    padding-bottom: 1.2vh;
    margin-top: 30px;

    border-top: 4px solid #000;
}


.schemadiv {
    width: 100%;
    margin-bottom: 22px;

    background: #f6f700; /* orange */
    border: 4px solid #000;
    padding: 16px;

    box-shadow: 6px 6px 0 #000;
}

/* MOBILE */
@media screen and (max-width: 990px) {
    .wrapper {
        margin-left: 0;
        transform: none;
		transform: translate(0px, 0px);
        width: 85vw;
        padding: 20px;
        box-shadow: none; /* optional: cleaner on mobile */
    }
}