@@ 0,0 1,117 @@
+html, body {
+ height: 100%;
+ font-family: monospace;
+ font-weight: bold;
+}
+
+body {
+ margin: 0;
+ overflow: hidden;
+ color: #93a1a1;
+ background-color: #222;
+ text-shadow: 0 0.03em 0.05em #000;
+ font-size: 3em;
+}
+
+a {
+ color: #cee318;
+ text-decoration: none;
+}
+
+h1 {
+ display: none;
+}
+
+[id^=start] {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ /*font-size: 3em;*/
+ text-align: center;
+ align-items: center;
+ justify-content: center;
+ text-align: left;
+
+}
+
+section[id^=slide]:target ~ #start {
+ width: 100%;
+ height: 100%;
+ display: none;
+}
+
+[id^=slide] {
+ box-sizing: border-box;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ padding: 5%;
+ z-index: 0;
+ display: none;
+}
+
+[id^=slide] img {
+ width: 70%;
+ height: 70%;
+ padding: 10%;
+}
+
+
+[id^=slide]:target {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: left;
+}
+
+
+a.prev, a.next, a.home, a.restart {
+ font-size: 1.8em;
+ position: absolute;
+ top: 95%;
+ line-height: 100%;
+ text-shadow: 0 0 0.1em #000;
+ margin: 0;
+ opacity: .2;
+}
+
+a.prev:hover, a.next:hover, a.home:hover {
+ opacity: 1;
+}
+
+a.prev {
+ left: 1%;
+ font-size: 20px;
+}
+
+a.restart {
+ left: 6%;
+ font-size: 20px
+}
+
+a.home {
+ right: 6%;
+ font-size: 20px
+}
+
+a.next {
+ right: 1%;
+ font-size: 20px;
+}
+
+
+a.restart:after {
+ content: "<<"
+}
+
+a.prev:after {
+ content: "<";
+}
+
+a.next:after {
+ content: ">";
+}
+
+a.home:after {
+ content: "⌂";
+}