:root {--pink: #F38BA3;--blue: #F38BA3;--stroke: navy;--green: #C2E688;--red: #8bf3db;--light-brow: #8bf3db;--gray: #8bf3db;--fonts-regular:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;}* {box-sizing: border-box;}html, body {min-height: 100vh;margin: 0;display: flex;flex-direction: column;flex-shrink: 0;font-family: var(--fonts-regular);}button {outline:0 !important;cursor: pointer;}button:focus {box-shadow: inset 0 0 !important;}body {background-color: #F9F4DA;}.theater {position: absolute;top: 0;width: 100%;background-color: #8bf3db;height: 300px;z-index: 0;}a, button, input {text-decoration: none;font-weight: thin;color: #FFF;padding: 5px 10px;border-radius: 5px;background: #F38BA3;cursor: pointer;text-shadow: none;border: none;}button:disabled, button[disabled] {opacity: 0.5;cursor: default;}a:hover {color: #F38BA3;background: #F9F4DA;}.container {margin: auto;width: 50%;position: relative;z-index: 1;}.helper {position: absolute;right:0;top:0;text-align: right;padding: 0 30px 0 0;}.menu {position: absolute;left:0;top:0;text-align: left;padding: 0 0 0 30px;}.gameboy {display: flex;align-items: center;justify-content: center;}.gameboy-body {background-color: var(--blue);background-image: url("/images/noise-light.png");width: 320px;height: 590px;border-radius: 20px 20px 50px;border: 10px solid var(--stroke);box-shadow: inset 10px 0 rgba(255,255,255,0.7), inset -10px 0 rgba(0,0,0,0.2) ;position: relative;}header {width: 100%;height: 36px;border-bottom: 6px solid var(--stroke);position: relative;box-shadow: 0 6px rgba(0,0,0,0.2) ;}header:after, header:before {content: "";height: 100%;width: 6px;background-color: var(--stroke);position: absolute;}header:before {left: 30px;}header:after {right: 30px;}.screen {width: 246px;background-color: var(--light-brow);margin: 30px 0 0 30px;border: 6px solid var(--stroke);padding: 30px;border-radius: 10px 10px 30px;position: relative;}.screen .glass {width: 100%;height: 160px;background-color: var(--green);border: 6px solid var(--stroke);box-shadow: inset 6px 6px rgba(0,0,0,0.2);overflow: hidden;position: relative;}.glass:after, .glass:before {content: "";height: 200%;width: 30px;background-color: rgba(255,255,255,0.4);position: absolute;transform: rotate(45deg);top: -80px;}.glass:after {right: -20px;width: 50px !important;}.screen span {width: 10px;height: 10px;background-color: var(--red);position: absolute;left: 10px;border-radius: 50%;border: 2px solid var(--stroke);top:50%;margin-top: -10px;}.screen:after, .screen:before {content:"";height: 3px;position: absolute;top: 12px;background-color: var(--stroke);}.screen:before {width: 100px;left: 10px;}.screen:after {width: 30px;right: 10px;}.actions {padding: 30px 14px 0;}.directions {width: 120px;height: 120px;border: 6px solid transparent;position: relative;display: flex;float: left;}.directions button {border: 6px solid var(--stroke);background-color:var(--light-brow);width: 30px;height: 30px;position: absolute;z-index: 9;}.arrow-left {border-right: none !important;box-shadow: inset 0 4px #fff, inset 0 -4px rgba(0,0,0,0.2);top: 50%;margin-top: -15px;left: 13.5px;}.arrow-top {border-bottom: none !important;box-shadow: inset 0 4px #fff;left: 50%;margin-left: -15px;top: 13.5px;}.arrow-right {border-left: none !important;box-shadow: inset 0 4px #fff, inset 0 -4px rgba(0,0,0,0.2);top: 50%;margin-top: -15px;right: 13.5px;}.arrow-bottom {border-top: none !important;box-shadow: inset 0 -4px rgba(0,0,0,0.2);left: 50%;margin-left: -15px;bottom: 13.5px;}.directions:after {content: "";width: 30px;height: 30px;background-color: var(--light-brow);position: relative;top: 50%;left: 50%;margin: -15px;z-index: 1;}.buttons {border: 6px solid transparent;float: right;position: relative;transform: rotate(-20deg);top: 30px;}.buttons button {background-color: var(--red);border: 6px solid var(--stroke);border-radius: 50%;width: 50px;height: 50px;padding: 0;box-shadow: inset 4px 0 rgba(255,255,255,0.7), inset -4px 0 rgba(0,0,0,0.2) ;margin: 0 5px;}.start-reset {list-style: none;text-align: center;width: 100%;float: left;}.start-reset li {display: inline-block;margin: 0 15px;}.start-reset li button {border: 6px solid var(--stroke);background-color:var(--light-brow);width: 20px;height: 50px;padding: 0;border-radius: 10px;box-shadow: inset 3px 0 #fff, 3px 0 rgba(0,0,0,0.2);transform: rotate(60deg);position: relative;left: -25px;top: -10px;}.points {text-align: center;position: absolute;right: 20px;bottom: 20px;}.points span {font-size: 25px;line-height: 0px;letter-spacing: 3px;margin-top: -3px;display: block;color: var(--stroke);}@media only screen and (max-width: 780px) {.helper, .menu {display: none;}}