diff --git a/style.css b/style.css index 8e384e2..28a744a 100644 --- a/style.css +++ b/style.css @@ -1,87 +1,126 @@ -body { - background: white; - font-family: 'Kanit', sans-serif; - color: #49998a; -} +@media screen and (min-width: 1600px) { -.luna { - font-size: 250%; - color: aquamarine; - margin-left: 25%; - text-shadow: -1px -1px 0 #0ac7a4, 1px -1px 0 #0ac7a4, -1px 1px 0 #0ac7a4, 1px 1px 0 #0ac7a4; -} + body { + background: white; + font-family: 'Kanit', sans-serif; + color: #49998a; + } -.what { - border-radius: 25px; - background-color: #a6ffef; + #lonapc { + text-align: left; + font-size: 250%; + color: aquamarine; + margin-left: 12.5%; + margin-right: auto; + text-shadow: -1px -1px 0 #0ac7a4, 1px -1px 0 #0ac7a4, -1px 1px 0 #0ac7a4, 1px 1px 0 #0ac7a4; + } + + #lonamobile { + display: none; + } + - margin-left: 15%; - margin-right: auto; - width: 50%; - padding: 10px; - - box-shadow: 60px -16px #49998a; -} - -.how-work { - border-radius: 25px; - background-color: #a6ffef; - - margin-left: auto; - margin-right: 10%; - width: 50%; - padding: 10px; - - text-align: right; - - box-shadow: 60px -16px #49998a; -} - -.where{ - border-radius: 25px; - background-color: #a6ffef; - - margin-left: 25%; - margin-right: auto; - width: 50%; - padding: 10px; - - box-shadow: 60px -16px #49998a; -} - -.title { - font-size: 150%; - color: #0ac7a4; -} - -a { - border-radius: 25px; - border: none; - box-shadow: none; - font-size: 150%; - text-decoration: none; - padding-left: 5px; - padding-right: 5px; - background: #0ac7a4; - color: white; -} - -.bottom { - border-radius: 25px; - background-color: #49998a; - margin: 25px; - padding: 1px; - text-align: center; - color: white; + .nav { + width: 95%; + margin: auto; + box-shadow: 0 0 12.5px 7.5px #49998a; + border-radius: 25px; + } + + .what { + border-radius: 25px; + background-color: #a6ffef; + + margin-left: 15%; + margin-right: auto; + width: 50%; + padding: 10px; + + box-shadow: 60px -16px #49998a; + } + + .how-work { + border-radius: 25px; + background-color: #a6ffef; + + margin-left: auto; + margin-right: 10%; + width: 50%; + padding: 10px; + + text-align: right; + + box-shadow: 60px -16px #49998a; + } + + .where{ + border-radius: 25px; + background-color: #a6ffef; + + margin-left: 25%; + margin-right: auto; + width: 50%; + padding: 10px; + + box-shadow: 60px -16px #49998a; + } + + .title { + font-size: 150%; + color: #0ac7a4; + } + + a { + border-radius: 25px; + border: none; + box-shadow: none; + font-size: 150%; + text-decoration: none; + padding-left: 5px; + padding-right: 5px; + background: #0ac7a4; + color: white; + } + + .bottom { + border-radius: 25px; + background-color: #49998a; + margin: 25px; + margin-bottom: 10px; + margin-top: auto; + padding: 1px; + text-align: center; + color: white; + } + } @media screen and (max-width: 1600px) { - .luna { + + body { + background: white; + font-family: 'Kanit', sans-serif; + color: #49998a; + } + + #lonamobile { font-size: 550%; color: aquamarine; - margin-left: 25%; + margin-left: 12.5%; + text-align: left; text-shadow: -1px -1px 0 #0ac7a4, 1px -1px 0 #0ac7a4, -1px 1px 0 #0ac7a4, 1px 1px 0 #0ac7a4; } + + #lonapc { + display: none; + } + + .nav { + width: 95%; + margin: auto; + box-shadow: 0 0 12.5px 7.5px #49998a; + border-radius: 25px; + } .what { border-radius: 25px; @@ -149,5 +188,7 @@ a { padding: 1px; text-align: center; color: white; + margin-bottom: 10px; + margin-top: auto; } -} \ No newline at end of file +}