/src/css/style.css
https://bitbucket.org/kateBorisevich/mygame · CSS · 269 lines · 226 code · 43 blank · 0 comment · 0 complexity · 87f2b5f950397df677a77f3b22f02be5 MD5 · raw file
- *{
- margin: 0px;
- padding: 0px;
- font-family: Arial, sans-serif;
- }
- body {
- background: linear-gradient(90deg, rgb(153,255,153), white 60%, rgb(255,255,153));
- }
- main {
- width: 1600px;
- margin: 0 auto;
- margin-top: 10px;
- position: relative;
- }
- h1 {
- margin: 0 auto;
- font-size: 40px;
- text-shadow: 1px 1px 2px rgb(110,106,106);
- color: rgb(4,4,4);
- text-transform: capitalize;
- text-align: center;
- }
- .wrapper {
- width: 350px;
- height: 500px;
- display: inline-block;
- margin: 60px auto auto 30px;
- text-align: left;
- position: relative;
- overflow: hidden;
- }
- h2 {
- font-size: 30px;
- text-shadow: 1px 1px 2px rgb(110,106,106);
- color: rgb(4,4,4);
- text-transform: capitalize;
- text-align: center;
- }
- input {
- width: 200px;
- height: 30px;
- font-size: 20px;
- margin-bottom: 30px;
- }
- p {
- text-transform: capitalize;
- font-size: 15px;
- color: rgb(0,0,0);
- text-align: left;
- margin-left: 10px;
- position: absolute;
- }
- .firstName {
- margin: 20px 2px 30px 20px;
- }
- form {
- display: inline-block;
- position: absolute;
- box-sizing: border-box;
- padding-top: 50px;
- }
- label {
- font-size: 20px;
- text-transform: capitalize;
- margin: 10px;
- font-weight: bold;
- }
- .emailForm {
- margin-left: 46px;
- }
- .submit {
- margin-left: 50px;
- background: rgb(51,255,51);
- font-weight: bold;
- }
- .howToPlay {
- position: absolute;
- display: inline-block;
- }
- ol li {
- font-size: 23px;
- font-weight: bold;
- line-height: 35px;
- margin-left: 30px;
- }
- ol li::first-letter{
- text-transform: uppercase;
- }
- ol li:first-child{
- margin-top: 33px;
- }
- .wrapperShirt {
- width: 300px;
- height: 150px;
- margin-left: 25px;
- overflow: hidden;
- position: absolute;
- }
- .choiceShirt {
- box-sizing: border-box;
- width: 35px;
- height: 35px;
- padding: 2.5px;
- display: inline-block;
- margin: 57px auto auto 20px;
- }
- .shirt {
- width: 120px;
- height: 120px;
- display: inline-block;
- margin: 15px auto auto 50px;
- position: absolute;
- }
- .selectedShirt1 {
- background-image: url(../img/pikachu.png);
- background-size: cover;
- background-color: rgb(0,0,0);
- }
- .selectedShirt2 {
- background-image: url(../img/pokemons.png);
- background-size: cover;
- }
- .selectedShirt3 {
- background-image: url(../img/pokeBall.png);
- background-size: cover;
- background-color: rgb(0,0,0);
- }
- .bottom {
- margin-top: 300px;
- }
- .middle {
- margin-top: 150px;
- }
- .wrapperDifficulty {
- width: 300px;
- height: 150px;
- margin-left: 25px;
- overflow: hidden;
- position: absolute;
- }
- .choiceDifficulty {
- box-sizing: border-box;
- width: 35px;
- height: 35px;
- padding: 2.5px;
- display: inline-block;
- margin: 57px auto auto 20px;
- }
- tr, td {
- border: 2px solid rgb(0,0,0);
- }
- table {
- width: 100%;
- height: 100%;
- }
- .table {
- width: 120px;
- height: 120px;
- display: inline-block;
- margin: 15px auto auto 50px;
- position: absolute;
- }
- .buttonPlay {
- width: 300px;
- height: 90px;
- margin: 10px auto;
- user-select: none;
- }
- .button {
- width: 100%;
- height: 100%;
- font-size: 30px;
- font-weight: bold;
- text-decoration: underline;
- background: rgb(51,255,51);
- text-shadow: 1px 1px 2px rgb(110,106,106);
- }
- .hide {
- display: none;
- }
- input[type=checkbox] {
- display: inline-block;
- width: 30px;
- height: 30px;
- }
- .container {
- display: grid;
- justify-content: center;
- align-content: center;
- grid-gap: 10px;
- overflow: hidden;
- margin: 0 auto;
- }
- .item {
- width: 200px;
- height: 200px;
- background-repeat: no-repeat;
- background-position: center center;
- }
- .easy {
- height: 830px;
- width: 830px;
- grid-template-columns: repeat(4, auto);
- grid-template-rows: repeat(4, auto);
- }
- .hard {
- height: 841px;
- width: 1050px;
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
- grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
- }
- .very-hard {
- height: 1240px;
- width: 1240px;
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
- grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
- }
- .wrapperContainer {
- width: 1300px;
- height: 1300px;
- margin: 50px auto;
- }
- .emptyBackground {
- background-color: rgb(255,255,255);
- z-index: 1;
- }