@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 300; src: local('Fira Sans OT Light'), local('Fira Sans Light'), url(FiraSans-Light.woff) format('woff'); } @font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 300; src: local('Fira Sans OT Light Italic'), local('Fira Sans Light Italic'), url(FiraSans-LightItalic.woff) format('woff'); } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; src: local('Fira Sans OT'), local('Fira Sans'), url(FiraSans-Regular.woff) format('woff'); } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 700; src: local('Fira Sans OT Bold'), local('Fira Sans Bold'), url(FiraSans-Bold.woff) format('woff'); } @font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 400; src: local('Fira Sans OT Italic'), local('Fira Sans Italic'), url(FiraSans-RegularItalic.woff) format('woff'); } @font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 700; src: local('Fira Sans OT Bold Italic'), local('Fira Sans Bold Italic'), url(FiraSans-BoldItalic.woff) format('woff'); } @font-face { font-family: 'Fira Mono'; font-style: normal; font-weight: 400; src: local('Fira Mono OT'), local('Fira Mono'), url(FiraMono-Regular.woff) format('woff'); } @font-face { font-family: 'Fira Mono'; font-style: normal; font-weight: 700; src: local('Fira Mono OT Bold'), local('Fira Mono Bold'), url(FiraMono-Bold.woff) format('woff'); } * { padding: 0; margin: 0; font-weight: normal; text-decoration: none; } strong { font-weight: bold; } em { font-style: italic; } a:link, [onclick] { text-decoration: underline; cursor: pointer; } html { font-family: "Fira Sans", sans-serif; font-size: 16px; background-color: rgb(226, 192, 242); background-image: linear-gradient(rgb(226, 192, 242), rgb(244, 199, 199) 100%); background-attachment: fixed; padding: 0 1em; height: 100%; background-repeat: no-repeat; } body { border-top: solid rgb(206, 132, 242) 0.75em; border-bottom: solid rgb(244, 126, 126) 0.75em; border-radius: 2em; margin: 0.25em auto; color: black; background-color: white; max-width: 56em; padding: 0 1em; } header { border-top: solid rgb(206, 132, 242) 0.5em; border-bottom: solid rgb(244, 126, 126) 0.5em; border-radius: 2em; height: 6em; transition: border-color 0.5s; white-space: nowrap; text-align: right; margin: 0 -1em; margin-top: -0.75em; background-color: white; } header img { float: left; height: 100%; width: auto; } header h1 { font-size: 3em; font-weight: normal; margin-right: 0.25em; display: inline-block; height: 100%; line-height: 2em; } header:hover { border-top-color: rgb(244, 126, 126); border-bottom-color: rgb(206, 132, 242); } img.logo { -webkit-transition: -webkit-transform 1.5s; transition: transform 1.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transition-timing-function: cubic-bezier(0.4, 0.2, 0.5, 1.3); transition-timing-function: cubic-bezier(0.4, 0.2, 0.5, 1.3); } img.logo:hover { -webkit-transform: rotate(360deg); transform: rotate(360deg); } h2 { border-top: solid rgb(206, 132, 242) 1px; border-left: solid rgb(206, 132, 242) 1px; border-radius: 1em 0 0 1em; font-size: 1.25em; font-weight: 300; margin-left: -0.67em; margin-right: -0.67em; margin-top: 1.5em; margin-bottom: 0.5em; padding-left: 0.5em; padding-top: 0.125em; } h3 { border-top: solid rgb(206, 132, 242) 1px; border-left: solid rgb(206, 132, 242) 1px; border-radius: 1.5em; display: inline-block; font-size: 1.125em; font-weight: 300; margin-bottom: 0; margin-left: -0.89em; padding-left: 0.67em; padding-right: 0.67em; } a:link, [onclick] { color: rgb(206, 132, 242); transition: color 0.3s; } a:visited { color: rgb(206, 132, 242); } a:hover, [onclick]:hover { color: rgb(244, 126, 126); } main { display: block; padding: 1em; max-width: 50em; margin: auto; } main > *:first-child { margin-top: 0; } main > p { max-width: 45em; margin: 1em auto; } main > ul { max-width: 40em; margin: 1em auto; } main > ul > li { margin: 0.5em auto; } hr { margin-top: 0; margin-bottom: 1em; border-bottom: solid rgb(206, 132, 242) 1px; height: 2em; } .highlight { border-bottom: solid rgb(206, 132, 242) 0.125em; border-top: solid rgb(206, 132, 242) 0.125em; border-radius: 1em; font-weight: 300; padding: 1em 3em; transition: border-radius 0.3s; box-sizing: border-box; } .highlight:hover { border-radius: 3em; } .game-preview { padding: 0; text-align: center; width: 100%; max-width: 37em; margin: auto; list-style-type: none; } .game-preview > li { position: relative; border: solid rgb(206, 132, 242) 1px; margin-bottom: 1.5em; margin-top: 1em; margin-left: 2.5em; border-left-width: 0; height: 8em; transition: border-radius 0.3s, border-color 0.3s; padding-left: 4em; box-sizing: border-box; border-radius: 0 3em 3em 0; } .game-preview > li:nth-child(even) { padding-left: 0; padding-right: 4em; margin-right: 2.5em; margin-left: 0; border-left-width: 1px; border-right-width: 0; border-radius: 3em 0 0 3em; } .game-preview > li:hover { border-radius: 0 0.25em 0.25em 0; border-color: rgb(244, 126, 126); } .game-preview > li img { border: solid rgb(206, 132, 242) 1px; position: absolute; border-radius: 50%; top: -1px; left: -4em; height: 8em; width: 8em; opacity: 0.75; transition: border-radius 0.3s, border-color 0.3s, opacity 0.3s; box-sizing: border-box; } .game-preview > li:nth-child(even) img { left: auto; right: -4em; } .game-preview > li:hover img { border-radius: 0; border-color: rgb(244, 126, 126); opacity: 1.0; } .game-preview .info { position: relative; height: 100%; } .game-preview .info h4 { color: inherit; font-style: italic; padding-left: 0.125em; padding-right: 0.125em; text-decoration: none; text-align: center; box-sizing: border-box; padding-top: 0.25em; font-size: 1.125em; } .game-preview li:nth-child(odd) .info h4, .game-preview li:nth-child(odd) .info ul { margin-right: 6.5rem; } .game-preview li:nth-child(even) .info h4, .game-preview li:nth-child(even) .info ul { margin-right: 0em; margin-left: 6.5rem; } h4 a:link { text-decoration: none; } .game-preview .info p { padding: 0.25em; text-align: center; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); margin-top: 0.125em; } .game-preview .info ul { bottom: 0.25em; font-size: 0.75em; position: absolute; right: 0.125em; left: 0.125em; text-align: center; list-style-type: none; } .game-preview .info li { white-space: nowrap; } .game-preview .info li a:link { text-decoration: none; font-weight: inherit; } .game-preview .info li:before { content: ' ~ '; } .game-preview .info li:first-child:before { content: ''; } .game-preview .info li { display: inline; font-weight: 300; } ul.download { border-radius: 1em; border: solid rgb(206, 132, 242) 0.125em; font-weight: 300; padding: 0.5em; margin: 1em auto; transition: border-radius 0.3s, border-color 0.3s; white-space: nowrap; display: table; } ul.download:hover { border-radius: 4px; border-color: rgb(244, 126, 126); } ul.download li { list-style-type: none; font-size: 1.25em; margin-bottom: 0.8em; text-align: center; } ul.download li a { text-decoration: none; } ul.download li.sh { margin-bottom: 0; font-size: 0.75em; font-family: "Fira Mono", monospace; text-align: left; } ul.download li:last-child { margin-bottom: 0; } .sh:before { content: "$ "; } input { font-family: inherit; font-size: 1em; } .copyright { margin: auto; text-align: justify; width: 75%; font-size: 0.875em; font-weight: 400; } .copyright > p { font-size: 0.875em; font-weight: 300; } .copyright:before { content: "Copyright ©"; } pre { border-left: solid rgba(206, 132, 242, 0.5) 8px; border-radius: 8px; font-family: "Fira Mono", monospace; overflow: auto; padding-left: 2em; padding: 0.5em; max-width: 40em; margin: auto; transition: background-color 0.3s, border-color 0.3s, border-radius 0.3s; } pre:hover { background-color: rgba(206, 132, 242, 0.125); border-color: rgb(206, 132, 242); border-radius: 16px; } code { font-family: "Fira Mono", monospace; transition: background-color 0.3s; } code:hover { background-color: rgba(206, 132, 242, 0.125); } pre code:hover { background-color: transparent; } footer { font-weight: 300; text-align: center; font-size: 0.75em; } footer a:link { display: inline-block; margin: 0 1em; text-decoration: none; } @media (max-width: 767px) { html { font-size: 13px; } .optional { display: none; } ul.download li.sh:before { content: ""; } pre { font-size: 0.875em; } } @media (max-width: 479px) { html { font-size: 10px; padding: 0 0.5em; } h4 { font-size: 1em; } }