/* Reset */ *{ display: block; margin: 0; padding: 0; font-family: inherit; line-height: inherit; font-size: inherit; border: 0; border-radius: 0; border-spacing: 0; border: 0; outline: 0; text-decoration: inherit; font-weight: inherit; list-style: none; color: inherit; word-break: normal; text-overflow: ellipsis; background: none; background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-text-size-adjust: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; -webkit-touch-callout: none; -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; box-sizing: border-box; z-index: 1; cursor: inherit; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; flex-direction: row; flex-grow: 1; flex-shrink: 0; } input[type=text], textarea{ user-select: auto; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; cursor: text; } input[type=password]{ user-select: all; -webkit-user-select: text; } head, script, style, noscript{ display: none !important; } ::placeholder{ color: #555; line-height: normal; } ::-moz-placeholder{ color: #555; line-height: 1; } br{ display: inline; } /* FontAwesome */ @font-face{ font-family: "FontAwesome"; font-display: block; src: url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-solid-900.woff2) format("woff2"), url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-solid-900.ttf) format("truetype") } @font-face{ font-family:"FontAwesome"; font-display: block; src: url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-brands-400.woff2) format("woff2"), url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-brands-400.ttf) format("truetype") } @font-face{ font-family:"FontAwesome"; font-display: block; src: url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-regular-400.woff2) format("woff2"), url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-regular-400.ttf) format("truetype"); unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc } @font-face{ font-family:"FontAwesome"; font-display:block; src:url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-v4compatibility.woff2) format("woff2"), url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-v4compatibility.ttf) format("truetype"); unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a } /* Layout */ html{ min-width: 200px; height: 100%; color: #fff; font-family: sans-serif; font-size: 62.5%; font-weight: normal; line-height: 1; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; background-color: #fff; } body{ min-height: 100%; display: flex; flex-direction: column; background-image: url("/images/backdrop1.gif"); background-position: center; background-repeat: repeat; background-size: auto; } body.background-2{ background-image: url("/images/backdrop2.gif"); } body.background-3{ background-image: url("/images/backdrop3.gif"); } body.background-4{ background-image: url("/images/backdrop4.gif"); } body.background-5{ background-image: url("/images/backdrop5.gif"); } body.background-6{ background-image: url("/images/backdrop6.gif"); } body.background-7{ background-image: url("/images/backdrop7.gif"); } body.mickey{ background-image: url("/images/backdropm.gif"); } body > div{ margin: 0 auto; max-width: 80em; } body > div > div{ margin: 2em 0 0; padding: 2em; background-image: url("/images/pattern.png"); background-position: center; background-repeat: repeat; background-size: auto; background-color: #000; } #header{ margin-bottom: 2em; } #logo{ margin-bottom: 1em; } #logo > a{ overflow: hidden; margin: -3em auto 0; width: 10em; height: 2em; color: transparent; text-indent: -999999em; background-image: url("/images/logo1.png"); cursor: pointer; } #logo > a.logo-2{ background-image: url("/images/logo2.png"); } #logo > a.logo-3{ margin-top: -4em; height: 5em; background-image: url("/images/logo3.png"); } #logo > a.logo-4{ background-image: url("/images/logo4.png"); } body.mickey #logo > a{ width: 15em; background-image: url("/images/logom.png"); } #header > p{ display: none; } #menu{ display: flex; flex-direction: column; } #menu > h2{ order: 1; display: none; } #menu > ul{ order: 3; background-color: #222; } body.js #menu > ul{ display: none; } body.js #menu.active > ul{ display: block; } #menu > ul > li{ } #menu > ul > li > a{ padding: 1em; display: flex; flex-direction: row; align-items: center; font-size: 0.75em; word-break: break-word; cursor: pointer; } #menu > ul > li > a:hover{ background-color: #444; } #menu > ul > li > a:before{ content: ""; flex-grow: 0; flex-shrink: 0; margin-right: 1em; display: block; width: 1em; height: 1em; font-family: "FontAwesome"; text-align: center; background-image: url("/images/bullet.gif"); background-repeat: no-repeat; background-position: center; background-size: contain; } #menu > ul > li > a.youtube:before{ content: "\f167"; background-image: none; } #menu > ul > li > a.discord:before{ content: "\f392"; background-image: none; } #menu > ul > li > a.twitter:before{ content: "\f099"; background-image: none; } #hamburger{ order: 2; display: none; flex-direction: row; align-items: center; justify-content: space-between; padding: 0.5em; background-color: #222; cursor: pointer; } #menu.active #hamburger, #hamburger:hover{ background-color: #444; } body.js #hamburger{ display: flex; } #hamburger:before{ flex-grow: 0; flex-shrink: 1; content: "\f0c9"; display: block; width: 1em; height: 1em; font-family: "FontAwesome"; text-align: center; } body.js #hamburger > span{ flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; } #hamburger > span:before{ content: "Menu"; display: block; font-weight: 700; } #hamburger:after{ flex-grow: 0; flex-shrink: 1; content: "\f0d7"; display: block; width: 1em; height: 1em; font-family: "FontAwesome"; text-align: center; } #menu.active #hamburger:after{ content: "\f0d8"; } #body{ } #body > p{ word-break: break-word; } #body > p > a{ display: inline-block; color: #0088ff; text-decoration: underline; word-break: break-all; cursor: pointer; } #body > section{ } #body > section div.column{ display: flex; flex-direction: column; } #body > section div.row{ display: flex; flex-direction: column; } #body > section div.top{ order: 1; margin-bottom: 2em; } #body > section div.bottom{ order: 2; margin-bottom: 2em; } #body > section div.left{ order: 1; margin-bottom: 2em; } #body > section div.right{ order: 2; margin-bottom: 2em; } #body > section h2{ padding: 0.25em; font-weight: 700; text-align: center; border: 0.125em solid #fff; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #body > section h3{ font-weight: 700; text-align: center; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #body > section p{ margin-bottom: 1em; line-height: 1.5; word-break: break-word; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #body > section p a{ display: inline; color: #0088ff; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #body > section p strong{ display: inline; font-weight: 700; } #body > section p:last-of-type{ margin-bottom: 0; } #body > section a{ display: block; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #body > section img{ width: 100%; height: auto; } #body > section iframe{ width: 100%; height: 7.5em; } #body > section blockquote{ width: 100%; line-height: 1.5; } #body > section blockquote > p{ word-break: break-word; } #body > section blockquote > cite{ margin-top: 1em; text-align: right; word-break: break-word; } #body > section blockquote > cite:before{ content: "-"; margin-right: 0.5em; display: inline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #body > section blockquote > a{ line-height: 1.5; } #body > section blockquote > a > cite{ } #body > section blockquote > a > cite:before{ content: "-"; margin-right: 0.5em; display: inline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #body > section cite{ -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #body > section div.twitter-tweet{ width: 100%; } #body > section div.twitter-tweet > iframe{ width: 100%; max-width: 100%; } #body > section div.row{ } #body > section div.row > div.column{ margin-bottom: 0; } #body > section div.row > div.row{ margin-bottom: 0; } #body > section div.column{ } #body > section div.column > div.column{ margin-bottom: 0; } #body > section div.column > div.row{ margin-bottom: 0; } #body > section > div.row{ } #body > section > div.column{ } #body > section > div > div.row{ } #body > section > div > div.column{ } #body > section > div > div.row > div.row{ } #body > section > div > div.row > div.row > div.bottom{ } #body > section > div > div.row > div.row > div.bottom{ } #body > section > div > div.column > div.column{ } #body > section > div > div.column > div.column > div.bottom{ } #body > section > div > div.column > div.column > div.bottom{ } #intro{ } #intro > div{ } #intro > div > div{ } #intro > div > div > h2{ display: none; } #intro > div > div > img{ margin: 0 auto; width: 75%; height: auto; } #intro > div.row{ } #intro > div.row > div.left{ order: 1; } #intro > div.row > div.right{ order: 2; } #discord{ } #discord > div{ } #discord > div.column{ } #discord > div.column > div{ } #discord > div.column > div > div.left{ order: 2; } #discord > div.column > div > div.right{ order: 1; } #discord > div.column > div > div.right > div.top{ } #discord > div.column > div > div.right > div.bottom{ display: none; } #twitter{ } #twitter > div{ } #twitter > div.column{ } #twitter > div.column > div{ } #twitter > div.column > div > div{ } #twitter > div.column > div > div > blockquote{ padding: 0.5em; border: 0.125em solid #fff; } #thanks{ padding-top: 2em; border-top: 0.125em solid #fff; } #thanks > div.column{ } #thanks > div.column > div{ } #thanks > div.column > div.top{ display: none; } #thanks > div.column > div.bottom{ } #thanks > div.column > div > h2{ } #thanks > div.column > div > p{ } #thanks > div.column:last-of-type{ margin-top: 2em; } #thanks > div.column:last-of-type > div{ } #thanks > div.column:last-of-type > div > p{ } #thanks > div.column:last-of-type > div > p > a{ display: block; overflow: hidden; margin: 0 auto; width: 7.5em; height: 2.5em; } #thanks > div.column:last-of-type > div > p > a:before{ content: ""; display: block; width: 7.5em; height: 2.5em; background-image: url("/images/top.gif"); background-position: center; background-repeat: no-repeat; background-size: contain; } #error{ } #error > div.column{ } #error > div.column > div{ } #error > div.column > div.column{ } #error > div.column > div.column > div{ } #error > div.column > div.column > div > a{ } #error > div.column > div.column > div > a > img{ } #quotes{ } #quotes > div{ } #quotes > div.column{ } #quotes > div.column > div{ } #quotes > div.column > div > div{ } #quotes > div.column > div > div > blockquote{ overflow: hidden; padding: 1em; border: 0.125em solid #fff; } #quotes > div.column > div > div > blockquote > a{ margin-top: 1em; float: right; display: block; color: inherit; text-align: right; text-decoration: none; word-break: break-word; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #quotes > div.column > div > div > blockquote > a:before{ content: "-"; margin-right: 0.5em; display: inlnie; color: inherit; text-decoration: none; } #quotes > div.column > div > div > blockquote > a > cite{ display: inline; color: #0088ff; text-decoration: underline; cursor: pointer; } #quotes > div.column > div > div > blockquote > a > cite:before{ display: none; } #friends{ } #friends > div{ } #friends > div > div{ } #friends > div > div > div{ } #friends > div > div > div > img{ min-width: 0; width: 100%; max-width: 100%; height: auto; } #footer{ margin-top: 2em; } #footer > h2{ display: none; } #footer > p{ color: #888; font-size: 0.75em; text-align: center; line-height: 1.25; word-break: break-word; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #footer > p > a{ display: inline; color: #0088ff; text-decoration: underline; cursor: pointer; } /* Portrait */ @media (orientation: portrait) and (min-width: 200px){ html{ } body{ font-size: 5vw; } } /* Landscape */ @media (orientation: landscape) and (min-width: 200px){ html{ } body{ font-size: 1.25vw; } body > div{ } body > div > div{ margin: 5em; padding: 5em; } #header{ margin-bottom: 5em; } #logo{ } #logo > a{ margin-top: -10em; width: 40em; height: 10em; } #logo > a.logo-3{ margin-top: -10em; height: 17.5em; } body.mickey #logo > a{ width: 40em; } #menu{ } #menu > ul{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } #menu > ul > li{ flex-grow: 0; flex-shrink: 0; } #menu > ul > li > a{ font-size: 1em; } body.js #menu > ul, body.js #menu.active > ul{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } body.js #hamburger{ display: none; } #body{ } #body > section{ } #body > section div.column{ } #body > section div.row{ flex-direction: row; align-items: center; } #body > section div.top{ margin-bottom: 5em; } #body > section div.bottom{ margin-bottom: 5em; } #body > section div.left{ order: 1; flex-grow: 1; flex-shrink: 1; margin-bottom: 5em; padding-right: 2.5em; } #body > section div.right{ order: 2; flex-grow: 1; flex-shrink: 1; margin-bottom: 5em; padding-left: 2.5em; } #body > section h2{ padding: 0.67em; font-size: 1.5em; } #body > section h3{ font-size: 1.5em; } #body > section p{ font-size: 1.25em; line-height: 2; } #body > section p a{ } #body > section cite{ font-size: 1.5em; line-height: 2; } #body > section a{ } #body > section img{ margin: 0; } #body > section iframe{ margin: 0 auto; width: 75%; height: 25em; } #body > section div.twitter-tweet{ margin: 0 auto; } #body > section div.twitter-tweet > iframe{ } #body > section > div.row{ } #body > section > div.column{ } #body > section > div > div.row{ } #body > section > div > div.column{ } #body > section > div > div.row > div{ flex-grow: 1; flex-shrink: 1; } #body > section > div > div.row > div > img{ } #body > section > div > div.column > div{ flex-grow: 1; flex-shrink: 1; } #body > section > div > div.column > div > img{ } #body > section > div > div.row > div.row{ } #body > section > div > div.column > div.row{ } #body > section > div > div.row > div.column{ } #body > section > div > div.column > div.column{ } #intro{ } #intro > div{ } #intro > div > div{ } #intro > div > div > h2{ display: none; } #intro > div > div > img{ margin: 0; width: 100%; height: auto; } #intro > div.row{ } #intro > div.row > div.left{ order: 1; } #intro > div.row > div.left > img{ min-width: 20em; } #intro > div.row > div.right{ order: 2; } #discord{ } #discord > div{ } #discord > div.column{ } #discord > div.column > div{ } #discord > div.column > div > div.right{ } #discord > div.column > div > div.left{ order: 1; } #discord > div.column > div > div.right{ order: 2; } #discord > div.column > div > div.right > div.top{ margin-bottom: 5em; } #discord > div.column > div > div.right > div.bottom{ display: block; } #youtube{ } #youtube > div{ } #youtube > div > div.column{ } #youtube > div > div.column > div{ } #youtube > div > div.column > div > p{ text-align: center; } #comic{ } #comic > div{ } #comic > div > div.column{ } #comic > div > div.column > div{ } #comic > div > div.column > div > div.top{ } #comic > div > div.column > div > div.top > p{ } #comic > div > div.column > div > div.bottom{ } #comic > div > div.column > div > div.bottom > p{ text-align: center; } #twitter{ } #twitter > div{ } #twitter > div > div.column{ } #twitter > div > div.column > div{ } #twitter > div > div.column > div > div{ } #twitter > div > div.column > div > p{ text-align: center; } #twitter > div.column > div > div > blockquote{ padding: 1.67em; font-size: 1.5em; } #twitter > div.column > div > div > blockquote > p{ font-size: 1em; } #twitter > div.column > div > div > blockquote > a{ font-size: 1em; } #thanks{ padding-top: 5em; } #thanks > div.column{ } #thanks > div.column > div{ } #thanks > div.column > div > h2{ } #thanks > div.column > div > p{ text-align: center; } #error{ } #error > div.column{ } #error > div.column > div.column{ } #error > div.column > div.column > div{ } #error > div.column > div.column > div > a{ margin: 0 auto; max-width: 25%; } #error > div.column > div.column > div > a > img{ } #quotes{ } #quotes > div{ } #quotes > div.column{ } #quotes > div.column > div{ } #quotes > div.column > div > div{ } #quotes > div.column > div > div > blockquote{ padding: 2.5em; } #quotes > div.column > div > div > blockquote > p{ font-size: 1.5em; } #friends{ } #friends > div{ } #friends > div > div{ } #friends > div > div > div{ } #friends > div > div > div > img{ min-width: 20em; width: 20em; max-width: 20em; } #friends > div.column{ } #friends > div.column > div.row{ align-items: flex-start; } #friends > div.column > div.bottom{ } #friends > div.column > div.bottom > div.left{ flex-grow: 0; } #friends > div.column > div.bottom > div.left > img{ } #award{ } #award > div{ } #award > div > div{ } #award > div > div > div{ max-width: 50%; } #award > div > div > div > img{ } #footer{ margin-top: 2.5em; } #footer > p{ } #footer > p > a{ } } /* Wide */ @media (orientation: landscape) and (min-width: 100em){ html{ } body{ font-size: 2em; } } /* Print */ @media print{ html{ } body{ } }