:root { background: linear-gradient(white, gainsboro); font-size: clamp(1rem, 3vw, 3rem); height: 100vh; text-align: center; width: 100vw; }
html, body { border: 0; height: 100vh; margin: 0; outline: 0; overflow: hidden; padding: 0; position: fixed; width: 100vw; z-index: 1; }
a, a label { color: dodgerblue; cursor: pointer; text-decoration: none; }
body { font-family: 'Lato', arial, sans-serif; font-size: 3vmin; font-weight: 300; z-index: 1; }
body * { border: 0; margin: 0; outline: 0; padding: 0; }
body:lang(de) { quotes: "«" "»"; }
blockquote { quotes: '\201c' '\201d' }
blockquote::before { content: open-quote }
blockquote::after { content: close-quote }
cite div b { color: darkgray; }
cite div { color: dimgray; display: inline-block; white-space: nowrap; }
cite b:last-child { color: thistle;}
code, .code, ol, ol li { text-align: left; }
h1, h2, h3, h4, h5, h6, p, q { margin-top: 1rem; }
hr { border-bottom: 1rem solid dodgerblue; border-radius: 0.5rem; margin: 3rem auto; line-height: 0; width: 100%; }
img { object-fit:{width: -20%}; contain; width: 50%; }
input, label { /*line-height: 0.5rem ?*/; }
q { quotes: '\2018' '\2019'/*single*/; quotes: '\201C' '\201D'/*double*/; font-family: cursive; }
q::before { content: open-quote }
q::after { content: close-quote }
cite { font-family: 'Swanky and Moo Moo', cursive; text-align: center; }
.font5vmin { font-size: 5vmin; }
.red { color: red; font-weight: 900; letter-spacing: 0.2rem; }

/* wrapper inner LAYOUT */
#wrapper { height: auto; left: 0vw; position: fixed; top: 0vh; transition: left 1s, top 1s 1s; width: auto }
#wrapper > div { background: transparent; height: 100vh; overflow: auto; overflow: x-hidden; position: absolute; width: 100vw; -webkit-overflow-scrolling: touch }
.inner { background: white; border: aliceblue solid medium; border-radius: 1rem; margin: 2vh 15vw; object-fit: contain; padding: 5vh 1vw; text-align: center; width: 70vw; }
.inner h1 { color: #069; font-size: 200%; font-weight: normal; letter-spacing: 0.15rem; padding: 0.1em 0; }
.inner h2 { color: #060; font-size: 150%; font-weight: normal; letter-spacing: 0.15rem; padding: 0.1em 0; }
.inner h3 { color: #000; font-size: 100%; font-weight: normal; letter-spacing: 0.15rem; padding: 0.1em 0; }
.inner p { color: #666; padding: 0 0 1em 0 text-align:justify; }
.inner img { width: initial; /* original value 50vw*/ }
.columns { -webkit-columns: 2; -webkit-column-gap: 5vw; -moz-columns: 2; -moz-column-gap: 5vw; column-gap: 5vw; columns: 2; padding-top: 1em; width: 70vw; }

/* .labels NAVIGATION */
.labels { height: auto; height: inherit; left: 1.5vw; position: fixed; top: 2vh; width: 11.8vw; z-index: 100; }

/* label NAVIGATION */
.labels label { background: rgba(200, 200, 200, 0.8); border: 0.01rem solid white; border-radius: 0.25rem; color: black; cursor: pointer; display: block; float: left; height: auto; line-height: 0.9rem; margin-left: 1px; padding-left: 5px; text-align: center; transition: 0.25s; width: 2.4vw; /* padding-left: 2px; padding-right: -5px;*/ }
.labels label:hover { background: rgba(140, 140, 140, 0.8); color: white; }

/* nav NAVIGATION transition-duration: 3s;
	* class nav:hover NOT class:hover nav;
	* transition visibility changed to opacity
	* CSS entities hedera (2766 2767) and space (205F) */
.labels nav { background: rgba(255, 255, 255, 1); border: white solid 1vw; border-left-width: 1.1vw; border-radius: 1rem; font-size: 70%; font-variant: all-small-caps; letter-spacing: 0.25rem; margin-bottom: -2rem; padding-left: 0vw; paddding-top: 2rem; text-align: left; text-align: center; }
.labels nav { transition: opacity 0.25s; transition-timing-function: ease-in-out; opacity: 0.5; }
.labels nav:hover { opacity: 1; }
.labels nav a { color: lightsteelblue; font-family: Lato; font-size: 100%; font-variant: all-small-caps; font-weight: 300; text-align: center; text-decoration: none; }
.labels nav a:hover { color: steelblue; }
.labels nav a, .labels nav a:hover, .labels nav a:visited { color: dodgerblue; text-align: center; }
.labels nav a strong { font-weight: 700; }
.labels nav span { clear: both; color: lightsteelblue; }

/* grid LAYOUT
background-image
 */
div.grid-container { background-color: transparent; background-image: url('_files/trump.png'); border: rgba(0,128,255,0.5) solid 5vw; border-radius: 1rem; display: grid; grid-template-columns: auto auto auto; padding: 2.5vw; }
.grid-item { background-color: transparent; margin: 2.5vw; text-align: center; }

/* stu DATA INPUT */
div[id*="a"] { top: 0; }
div[id*="b"] { top: 100vh; }
div[id*="c"] { top: 200vh; }
div[id*="1"] { left: 0; }
div[id*="2"] { left: 100vw; }
div[id*="3"] { left: 200vw; }

input { display: none; }
input:target { display: table; position: absolute; }

input[id*="x"]:checked ~ #wrapper { top: 0vh; }
input[id*="y"]:checked ~ #wrapper { top: -100vh; }
input[id*="z"]:checked ~ #wrapper { top: -200vh; }
input[id*="1"]:checked ~ #wrapper { left: 0vw; }
input[id*="2"]:checked ~ #wrapper { left: -100vw; }
input[id*="3"]:checked ~ #wrapper { left: -200vw; }

input#x1:checked ~ .labels label:nth-of-type(1),
input#x2:checked ~ .labels label:nth-of-type(2),
input#x3:checked ~ .labels label:nth-of-type(3),
input#y1:checked ~ .labels label:nth-of-type(4),
input#y2:checked ~ .labels label:nth-of-type(5),
input#y3:checked ~ .labels label:nth-of-type(6),
input#z1:checked ~ .labels label:nth-of-type(7),
input#z2:checked ~ .labels label:nth-of-type(8),
input#z3:checked ~ .labels label:nth-of-type(9) { background: rgba(140, 140, 140, 0.8); }

/* title BROWSER ATTR ? */
input label[content="title"] { content: "("attr(color:grey;)")"; }

/* viewport media DEVICE COMPATIBILITY */
@viewport{width:extend-to-zoom;zoom:1.0;}
@media only screen and (max-width:480px){
	body { font-size: 4vmin; }
	.columns { -webkit-columns: 1; -moz-columns: 1; columns: 1; }
	.labels { height: 12vw; position: fixed; right: 0; text-align: center; top: 1vh; width: 100vw; z-index: 100; }
	.labels label { background: rgba(200, 200, 200, 0.8); cursor: pointer; display: inline-block; float: none; height: 8vw; line-height: 8vw; text-align: center; width: 8vw; }
}