diff --git a/src/styles.css b/src/styles.css index d1a1c7c..1f11c11 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,203 +1,195 @@ - * { - margin: 0; - padding: 0; - } - html, - body { - height: 100%; - } - body { - background-color: #eef7fb; - } - h1 { - text-align: center; - text-overflow: ellipsis; - -webkit-text-stroke: 1px #375449; - -moz-text-stroke: 1px #375449; - -o-text-stroke: 1px #375449; - text-stroke: 1px #375449; - font-family: "Impact", "Arial Black"; - letter-spacing: 2px; - font-style: oblique; - font-variant: small-caps; - font-size: 50px; - color: #8AD4B8; - } - h2, - h4 { - color: #224557; - font-family: Verdana; - } - h3, - h5 { - color: #3b7998; - } - footer, - #content:after { - height: 50px; - } - a { - text-decoration: none; - font-family: "Trebuchet MS", Helvetica, Arial; - color: #e9f5fa; - font-size: 15px; - } - a:hover { - color: #abd9ec; - text-decoration: underline; - -webkit-transition: color 0.5s; - -moz-transition: color 0.5s; - -o-transition: color 0.5s; - transition: color 0.5s; - } - footer { - font-family: sans-serif, Helvetica, Verdana; - color: #c9e7f3; - background-color: #8aa3c8; - } - .game p { - color: #448aae; - } - .game { - padding: 30px; - margin: 20px 80px 20px; - height: 400px; - border: solid 5px black; - background-color: #C9E7F3; - border-radius: 20px; - font-family: Helvetica, Verdana, Arial; - text-overflow: ellipsis; - } - #content { - min-height: 100%; - /* equal to footer height */ +* { + margin: 0; + padding: 0; +} +html, body { + height: 100%; +} +body { + background-color: #eef7fb; +} +h1 { + text-align: center; + text-overflow: ellipsis; + -webkit-text-stroke: 1px #375449; + -moz-text-stroke: 1px #375449; + -o-text-stroke: 1px #375449; + text-stroke: 1px #375449; + font-family: "Impact", "Arial Black"; + letter-spacing: 2px; + font-style: oblique; + font-variant: small-caps; + font-size: 50px; + color: #8AD4B8; +} +h2, h4 { + color: #224557; + font-family: Verdana; +} +h3, h5 { + color: #3b7998; +} +footer, #content:after { + height: 50px; +} +a { + text-decoration: none; + font-family: "Trebuchet MS", Helvetica, Arial; + color: #e9f5fa; + font-size: 15px; +} +a:hover { + color: #abd9ec; + text-decoration: underline; + -webkit-transition: color 0.5s; + -moz-transition: color 0.5s; + -o-transition: color 0.5s; + transition: color 0.5s; +} +footer { + font-family: sans-serif, Helvetica, Verdana; + color: #c9e7f3; + background-color: #8aa3c8; +} +.game p { + color: #448aae; +} +.game { + padding: 30px; + margin: 20px 80px 20px; + height: 400px; + border: solid 5px black; + background-color: #C9E7F3; + border-radius: 20px; + font-family: Helvetica, Verdana, Arial; + text-overflow: ellipsis; +} +#content { + min-height: 100%; + /* equal to footer height */ - margin-bottom: -50px; - } - #left { - float: left; - display: inline-block; - } - #right { - float: right; - margin-right: 20px; - display: inline-block; - } - #content:after { - content: ""; - display: block; - } - #incercari_msg { - margin-top: 340px; - margin-right: 40px; - overflow: hidden; - } - #gamewon { - position: absolute; - display: none; - border: 2px solid #636d92; - border-radius: 30px; - height: 380px; - background-color: #a6b7f4; - z-index: 2; - top: 18%; - left: 35%; - } - #gamewon img { - z-index: 2; - height: 340px; - border-radius: 30px; - } - #gamewon p { - padding: 10px; - font-weight: bold; - text-align: center; - } - #gameover { - position: absolute; - display: none; - border: 2px solid #636d92; - border-radius: 30px; - height: 380px; - width: 350px; - background-color: #a6b7f4; - z-index: 2; - top: 18%; - left: 35%; - } - #gameover img { - z-index: 2; - height: 330px; - border-radius: 30px; - } - #gameover p:first-child { - padding-top: 10px; - } - #gameover p { - font-weight: bold; - text-align: center; - } - .red { - color: red; - font-weight: bold; - text-transform: uppercase; - } - #hang { - position: absolute; - top: 145px; - right: 133px; - } - #human { - position: absolute; - top: 190px; - right: 108px; - } - .footer-content { - margin: 0px 10px 0px 10px; - padding-top: 15px; - } - .footer-content * { - display: inline; - } - .footer-content span { - color: #e9f5fa; - font-weight: bold; - } - .right { - float: right; - margin-right: 20px; - } - .mobile { - display: none; - } - /* Mobile CSS */ +margin-bottom: -50px; +} +#left { + float: left; + display: inline-block; +} +#right { + float: right; + margin-right: 20px; + display: inline-block; +} +#content:after { + content: ""; + display: block; +} +#incercari_msg { + margin-top: 340px; + margin-right: 40px; + overflow: hidden; +} +#gamewon { + position: absolute; + display: none; + border: 2px solid #636d92; + border-radius: 30px; + height: 380px; + background-color: #a6b7f4; + z-index: 2; + top: 18%; + left: 35%; +} +#gamewon img { + z-index: 2; + height: 340px; + border-radius: 30px; +} +#gamewon p { + padding: 10px; + font-weight: bold; + text-align: center; +} +#gameover { + position: absolute; + display: none; + border: 2px solid #636d92; + border-radius: 30px; + height: 380px; + width: 350px; + background-color: #a6b7f4; + z-index: 2; + top: 18%; + left: 35%; +} +#gameover img { + z-index: 2; + height: 330px; + border-radius: 30px; +} +#gameover p:first-child { + padding-top: 10px; +} +#gameover p { + font-weight: bold; + text-align: center; +} +.red { + color: red; + font-weight: bold; + text-transform: uppercase; +} +#hang { + position: absolute; + top: 145px; + right: 133px; +} +#human { + position: absolute; + top: 190px; + right: 108px; +} +.footer-content { + margin: 0px 10px 0px 10px; + padding-top: 15px; +} +.footer-content * { + display: inline; +} +.footer-content span { + color: #e9f5fa; + font-weight: bold; +} +.right { + float: right; + margin-right: 20px; +} +.mobile { + display: none; +} +/* Mobile CSS */ - @media only screen and (max-width: 930px) { - .mobile { - display: inline; - } - .mobile input { - -webkit-box-sizing: border-box; - /* Safari/Chrome, other WebKit */ +@media only screen and (max-width: 930px) { + .mobile { + display: inline; + } + .mobile input { + -webkit-box-sizing: border-box; + /* Safari/Chrome, other WebKit */ - -moz-box-sizing: border-box; - /* Firefox, other Gecko */ +-moz-box-sizing: border-box; + /* Firefox, other Gecko */ - box-sizing: border-box; - /* Opera/IE 8+ */ - } - #incercari_msg { - padding-top: 5px; - margin: 0px; - } - #game { - min-width: 20%; - } - #left, - #hang, - #human, - #gamover, - #gamewon { - display: none; - } - } +box-sizing: border-box; + /* Opera/IE 8+ */ + } + #incercari_msg { + padding-top: 5px; + margin: 0px; + } + #game { + min-width: 20%; +} +#left, #hang, #human, #gamover, #gamewon { + display: none; +} +} \ No newline at end of file