diff --git a/style.css b/style.css index e146571..5086313 100644 --- a/style.css +++ b/style.css @@ -65,9 +65,11 @@ h3 { display: inline; overflow: hidden; cursor: pointer; - background-color: #E7C02F !important; - border: solid #000 3px !important; - border-radius: 0 !important; + background-color: #003A5D !important; + border: solid #00C0DD 3px !important; + border-radius: 10px !important; + transition: color .1s; + transition: background-color .1s; } .button:hover { background-color: #d0ad2b !important; @@ -255,8 +257,10 @@ input[type=checkbox] { } .tile { - border: 3px solid #cd222a; + border: 5px solid #FAB74F; + border-radius: 25px; margin: .2vw; + transition: .1s; } label { @@ -757,3 +761,63 @@ div.tile:hover { transform: translate3d(-84px, -89px, 0) rotate(211deg); background: #f200ff; } + +@media only screen and (max-width: 825px) { + body { + display: flex; + flex-flow: column wrap; + height: 850px; + justify-content: center; + } + + #header { + order: 1; + align-self: flex-start; + flex-direction: column; + justify-content: flex-start; + width: 450px; + } + + #header .button { + flex-basis: 0; + flex-grow: 1; + margin: 5px; + } + + #game-logo { + width: 450px; + } + + #title { + margin: 0; + padding: 0; + } + + #controls { + flex-direction: row; + margin-left: 0; + width: 100%; + } + + #board { + order: 2; + height: 850px; + margin: 15px; + margin-right: 15px; + } + + #footer { + order: 1; + align-self: flex-start; + flex-wrap: wrap; + width: 450px; + margin: 0; + } + + #footer .button { + font-size: 20px; + padding: 5px 12px 7px 12px; + flex-basis: 175px; + flex-grow: 1; + } +}