p.df {
color: white;
}
pre { width: 300px; }
img.df {
	max-width: 600px;
border: 0px solid white;
display: inline-block;
}
b { color: #feeb76; }
a.nav { 
font-size: 30pt;
float: right;
margin: 40px;
}
.oranger { color: #fe802e; }
.brown { color: #ffad2e; }
strong { color: #e6b56f; }
th, td { padding-right: 8px; }
table b { color: #e6b56f; }
th { font-weight: normal; }
h1 { size: 600%; margin-top:25%; margin-bottom:10%; text-align: center; }
.cdda {
	border-bottom: 1px solid #d22;
padding: 80px;
	 margin-bottom: 80px;
}
img  {
max-width: 400px;
display: inline-block;
 margin; 40px;
border: 1px solid #bf0;
}

::selection {
color: #feeb76;
background: rbga(0,0,0,0);
}
.board:hover {
transition: transform 1s;
transform: rotate3d(1, 0, 0, 45deg) rotate3d(0, 0, 1, 45deg);
}
.board {
	/* start cube */
transition: transform 1s;
margin: 0 auto;
	margin-top: 100px;
perspective: 5000px;
	     transform-style: preserve-3d;
transform: rotate3d(0.2, 0, 0, 15deg) rotate3d(0, 0, 1, 45deg);
display: grid;
	 grid-template-columns: repeat(3, 1fr);
	 grid-template-rows: repeat(3, 1fr);
width: 620px;
height: 620px;
	/* end cube */

display: grid;
border: 1px solid black;
gap: 10px;
     grid-template-areas:
	     '. . sa vga ia ila . .'
	     'oa c1 ec pr c2 bo gt pa'
	     'rr vta sc sj ka aa mg nc'
	     'it ca j cc2 fp va ww cc3'
	     'ba cc1 ma ta ny c3 sl pna'
	     '. . go bw lt pp . .';
}
.square {
	text-align: center;
border: 0px solid grey;
color: white;
       font-size: 13px;
}

/* start cube */
.cube {
width: var(--cube-size);
height: var(--cube-size);
margin: 0px;
transform: translateZ(calc(var(--cube-size) / 2 ));
	   transform-style: preserve-3d;
}
.face {
transition: background 1s;
background: white;
width: var(--cube-size);
height: var(--cube-size);
border: 1px solid white;
position: absolute;
display: flex;
	 align-items: center;
	 justify-content: center;
opacity: 0.3;
}

:root { --cube-size: 100px; }
body { padding: 100px; background: #000; background-image: url("aa.jpg"); }
/*#c7dfda;*/
.f { transform: translateZ(calc(var(--cube-size) / 2 )); }
.back { transform: translateZ(calc(var(--cube-size) / -2 )); box-shadow: 5px 5px 15px 5px white; }
.b { transform: translateY(calc(var(--cube-size) / 2 )) rotateX(90deg); }
.t { transform: translateY(calc(var(--cube-size) / -2 )) rotateX(90deg); }
.l { transform: translateX(calc(var(--cube-size) / -2 )) rotateY(90deg) rotateZ(90deg); }
.r { transform: translateX(calc(var(--cube-size) / 2 )) rotateY(90deg) rotateZ(90deg); }
/* end cube */
.ma { grid-area: ma; }
.cc1 { grid-area: cc1; }
.ba { grid-area: ba; }
.it { grid-area: it; }
.rr { grid-area: rr; }
.oa { grid-area: oa; }
.c1 { grid-area: c1; }
.vta { grid-area: vta; }
.ca { grid-area: ca; }
.j { grid-area: j; }
.sc { grid-area: sc; }
.ec { grid-area: ec; }
.sa { grid-area: sa; }
.vga { grid-area: vga; }
.pr { grid-area: pr; }
.sj { grid-area: sj; }
.cc2 { grid-area: cc2; }
.ta { grid-area: ta; }
.ny { grid-area: ny; }
.fp { grid-area: fp; }
.ka { grid-area: ka; }
.c2 { grid-area: c2; }
.ia { grid-area: ia; }
.ila { grid-area: ila; }
.bo { grid-area: bo; }
.aa { grid-area: aa; }
.va { grid-area: va; }
.ww { grid-area: ww; }
.mg { grid-area: mg; }
.gt { grid-area: gt; }
.pa { grid-area: pa; }
.nc { grid-area: nc; }
.cc3 { grid-area: cc3; }
.pna { grid-area: pna; }
.sl { grid-area: sl; }
.c3 { grid-area: c3; }
.pp { grid-area: pp; }
.lt { grid-area: lt; }
.bw { grid-area: bw; }
.go { grid-area: go; }
.orange { background: orange; }
.red { background: red; }
.blue { background: blue; }
.lightblue { background: lightblue; }
.darkblue { background: darkblue; }
.green { background: green; }
.yellow { background: yellow; color: black; }
.purple { background: purple; }
.none { background: inherit; color: black; }