@font-face { font-family: sinistre; src: url(fonts/Sinistre-StCaroline.woff), url(fonts/Sinistre-StCaroline.otf); } @font-face { font-family: jolybolditalic; src: url(fonts/JolyDisplay-BoldDisplayItalic.woff), url(fonts/JolyDisplay-BoldDisplayItalic.otf); } @font-face { font-family: jolyregularitalic; src: url(fonts/JolyDisplay-RegularDisplayItalic.woff), url(fonts/JolyDisplay-RegularDisplayItalic.otf); } @font-face { font-family: jolyregular; src: url(fonts/JolyDisplay-RegularDisplay.woff), url(fonts/JolyDisplay-RegularDisplay.otf); } @font-face { font-family: jolybold; src: url(fonts/JolyDisplay-BoldDisplay.woff), url(fonts/JolyDisplay-BoldDisplay.otf); } ::-moz-selection { /* Code for Firefox */ background: transparent; } ::selection { background: transparent; } body { font-family: jolyregular; font-size: 1.8vw; } .back{ position: fixed; color:#c94dff ; text-align: center; font-family: jolyregular; background-color: white; top:40%; bottom:43%; left:35%; right:35%; border: 1px solid #c94dff; -webkit-box-shadow: 10px 10px 0px 0px #c94dff; -moz-box-shadow: 10px 10px 0px 0px #c94dff; box-shadow: 10px 10px 0px 0px #c94dff; font-size: 0.8em; padding-top: 1.5em; z-index: 100; line-height: 1.5em; } .button_back{ font-size: 2.8vh; -webkit-appearance: none; background-color: transparent; border: 1px #c94dff solid; border-radius: 25em; color:#c94dff; cursor:pointer; font-family: jolybolditalic; padding-bottom:3px; } .button_back:hover{ border: 0.1em transparent solid; -webkit-box-shadow: 0px 0px 8px 1px #c94dff; -moz-box-shadow: 0px 0px 8px 1px #c94dff; box-shadow: 0px 0px 8px 1px #c94dff; } #ground { width: 120%; height: 120%; position:fixed; margin:-100px; background-color: white; z-index:-10; } .ground_line{ position: fixed; top: 130px; bottom: 0px; height: inherit; width: 100%; border-top: 0.1vw solid; z-index: -1; } svg { width: 100%; height: 100%; position:fixed; } .instructions{ font-family:jolyregularitalic; } span.instructions_arrow{ padding-left:40px; font-size: 2.4vw; font-family:jolybolditalic; } div.text_container { bottom: 35px; left:40px; right:40px; position:fixed; margin: auto; line-height: 1.4em; /*animation-name:text_bottom ; animation-duration:1s;*/ } .game_bar { top:40px; right:80px; position:fixed; border-radius: 25vw; padding-left: 10px; padding-right: 10px; padding-bottom: 2px; font-family: sinistre; background-color: white; border: 0.11vw black solid; border-radius: 25vw; color:black; cursor:pointer; font-size: 1.4vw; } .game_bar_glow{ border: 0.11vw transparent solid; background-color: transparent; color:#c94dff; -webkit-box-shadow: 0px 0px 8px 1px #c94dff ; -moz-box-shadow: 0px 0px 8px 1px #c94dff ; box-shadow: 0px 0px 8px 1px #c94dff ; } .flipped { transform: scale(-1, 1); -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -khtml-transform: scale(-1, 1); -ms-transform: scale(-1, 1); } button{ -webkit-appearance: none; background-color: white; border: 0.11vw black solid; border-radius: 25vw; color:black; cursor:pointer; font-family: jolybolditalic; padding-bottom: 4px; } button:hover{ border: 0.11vw transparent solid; -webkit-box-shadow: 0px 0px 8px 2px black; -moz-box-shadow: 0px 0px 8px 2px black; box-shadow: 0px 0px 8px 2px black; } span.button_text{ font-size: 1.6vw; padding: 8px; } #player_img { top: 50%; left: 8%; position:absolute; } .invert_style{ filter: invert(100%); } /*figures*/ div.figure1 { top: 25%; left: 40%; position:absolute ; } div.figure2 { top: 23%; left: 65%; position:absolute ; } div.figure3 { top: 25%; left:80%; position:absolute ; cursor:pointer; } div.figure4 { top: 58%; left: 54%; position:absolute ; cursor:pointer; z-index: 3; } div.figure5 { top: 20%; left: 10%; position:absolute ; cursor:pointer; } div.figure6 { top: 50%; left: 32%; position:absolute ; cursor:pointer; } div.figure7 { top: 40%; left: 22%; position:absolute ; cursor:pointer; } div.figure8 { top: 50%; left: 75%; position:absolute ; cursor:pointer; } div.figure9 { top: 40%; left: 50%; position:absolute ; cursor:pointer; } /*thunders*/ #thunder1{ top: -20px;; left:-20px; position: fixed; } #thunder2{ top:0%; right:0%; position: fixed; z-index: -1; } /*baloon*/ .bubble { top:40%; left:13%; position: absolute; background: #ffffff; color: #000000; font-family: sinistre; font-size: 25px; text-align: center; width: 130px; height: 30px; border-radius: 10px; padding: 18px; border: #000000 solid 1px; z-index: 50; } .bubble:after { content: ''; position: absolute; display: block; width: 0; z-index: 1; border-style: solid; border-width: 20px 15px 0 0; border-color: #ffffff transparent transparent transparent; bottom: -20px; left: 42%; margin-left: -7.5px; } .bubble:before { content: ''; position: absolute; width: 0; z-index: 0; border-style: solid; border-width: 21px 16px 0 0; border-color: #000000 transparent transparent transparent; bottom: -22px; left: 42%; margin-left: -8.5px; display: block; }