html {box-sizing: border-box;}
	
	*, *:before, *:after {box-sizing: inherit;}

	body {background-color:black; 
		font-family: monospace, sans-serif; 
		margin-left: auto;
		margin-right: auto;
		max-width: 1024px;
		min-width: 256px;
		padding-top: 8px;
		padding-bottom: 24px;
		padding-left: 24px;
		padding-right: 24px;}

	html {background:
background-color: #e5e5f7;
opacity: 0.8;
background-image:  linear-gradient(#444cf7 1px, transparent 1px), linear-gradient(to right, #444cf7 1px, #e5e5f7 1px);
background-size: 20px 20px;
;}
	
	header{	}

	header p {float: left;
		font-size: 16px;
		font-weight: bold;
		margin-top: 0px;}

	header h1 {font-size: 32px;
		text-align: center;}

	section {background-color: #FFFFFF;
		margin-bottom: 24px;
		min-height: 320px;
		padding-left: 24px;
		padding-right: 24px;}

	section.2 {
		background-color: edc02f;
		margin-bottom: 24px;
		min-height: 320px;
		padding-left: 24px;
		padding-right: 24px;}

	/* add the same style of border to the elements which are to have borders */

	body, section, img {border: 2px solid #B1B1B1;
		border-radius: 16px;}

	/* the bits that are specific to a wide viewport (over 56em) */

	@media all and (min-width: 900px) {

		article {float: left;
			width: 66%;}
			
		blockquote {font-style: italic;
			color: gray;}

		a.2 {color: gray;}
	}
	
	td {border: 2px solid black; border-radius: 16px; padding: 10px; margin:0 auto}
	
	td.outside {background-color: orange; border-radius: 16 px; padding: 10px; margin:0 auto}
	
	td.outside2 {background:
linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background-size: 100px 100px;
background-color: #EC173A; border-radius: 16 px; padding: 10px; margin:0 auto}

	td.inside {background-color: white}