@import "bootstrap/mixins" @import "bootstrap/variables" #home-view h1 text-align: center margin-top: 0 #front-screenshot margin: 15px 0 40px 150px #trailer-wrapper position: relative margin: 0 auto 40px width: 950px iframe display: block margin: 0 auto position: relative top: 8px img position: absolute left: 0 top: 0 pointer-events: none .game-mode-wrapper position: relative margin-bottom: 60px img display: block margin: 0 auto @include transition(box-shadow .50s ease-in-out) text-shadow: 2px 2px 5px black h3 color: $yellow position: absolute top: 10px left: 40px font-size: 70px margin-top: 0 h4 color: #e8d9c5 position: absolute top: 75px left: 140px font-size: 30px margin-top: 0 .play-text position: absolute right: 45px bottom: -25px color: $yellow font-size: 90px font-family: Bangers @include transition(color .25s ease-in-out) &:hover div, &.hovered div color: lighten($yellow, 20%) &:hover img, &.hovered img filter: brightness(1.2) -webkit-filter: brightness(1.2) box-shadow: 0 0 15px black .code-language-logo background-color: transparent background-repeat: no-repeat position: absolute right: 35px top: 15px width: 50px height: 50px &.inverted filter: invert(100%) -webkit-filter: invert(100%) .code-languages margin: 10px 0 30px 0 &:hover .code-language opacity: 0.6 .code-language.selected-language:not(:hover) opacity: 0.8 h2, h3 text-shadow: none .code-wizard opacity: 0.5 .code-language cursor: pointer text-align: center position: relative opacity: 0.6 &:hover opacity: 1 h2, h3 text-shadow: 0px 0px 5px white .code-wizard display: block opacity: 1 &.selected-language opacity: 1 h2, h3 text-shadow: 0px 0px 5px white .code-wizard display: block .code-wizard position: absolute background: transparent url(/images/pages/home/wizard.png) no-repeat background-size: contain width: 111px height: 97px display: none .code-language-beta background: transparent url(/images/pages/home/language_beta_sticker.png) no-repeat background-size: contain width: 100px height: 32px position: absolute right: 20px top: -7px .primary-code-languages #javascript background: transparent url(/images/pages/home/language_js.png) no-repeat padding-right: 150px .code-wizard left: 120px #python background: transparent url(/images/pages/home/language_python.png) no-repeat padding-left: 150px .code-wizard right: 120px .code-language width: 498px height: 153px padding: 30px margin: 0px 0 0 -6px .code-wizard top: -65px h2 margin: 15px 0 5px .secondary-code-languages margin-left: -10px .col-md-3 padding: 0px .code-language background: transparent url(/images/pages/home/language_background_small.png) no-repeat width: 250px height: 80px margin: 20px 0 20px 0 padding: 20px 20px 20px 70px .code-wizard top: -51px left: 89px height: 63px .code-language-logo position: absolute left: 15px top: 17px width: 50px height: 50px .code-language-beta right: -15px top: -16px height: 24px h3 margin: 0 padding: 0 #coffeescript .code-language-logo background: transparent url(/images/pages/home/language_logo_coffeescript.png) no-repeat center #clojure .code-language-logo background: transparent url(/images/pages/home/language_logo_clojure.png) no-repeat center #lua .code-language-logo background: transparent url(/images/pages/home/language_logo_lua.png) no-repeat center #io .code-language-logo background: transparent url(/images/pages/home/language_logo_io.png) no-repeat center #multiplayer-launch-modal .modal-dialog width: 700px .modal-header text-align: center .modal-body padding-bottom: 0px .modal-footer padding-top: 0px .multiplayer-launch-wrapper position: relative margin: 0 auto 30px iframe display: block margin: 0 auto position: relative top: 8px img position: absolute left: -7px top: -3px width: 660px height: 382px pointer-events: none #mobile-trailer-wrapper display: none @media only screen and (max-width: 800px) #home-view #site-slogan font-size: 30px #trailer-wrapper display: none #front-screenshot display: none #mobile-trailer-wrapper display: inline-block width: 100% iframe display: block margin: 0 auto .game-mode-wrapper width: 100% img width: 100% .play-text position: absolute right: 45px bottom: 0px color: $yellow font-size: 50px font-family: Bangers @include transition(color .10s linear) h1 text-align: center margin-top: 0