diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 6d35f3c..a3e1ce1 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -51,7 +51,7 @@
1679674447095
-
+
diff --git a/Style.css b/Style.css
index 9e57cf9..71695b9 100644
--- a/Style.css
+++ b/Style.css
@@ -1,37 +1,31 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alkatra&family=Delicious+Handrawn&family=Roboto:wght@300&display=swap');
-*
-{
+* {
font-family: "Roboto Light", sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}
-li, a, button
-{
+li, a, button {
font-weight: 500;
font-size: 16px;
color: #ecf0f1;
text-decoration: none;
}
-@media only screen and (max-width: 18cm)
-{
- li, a, button
- {
+@media only screen and (max-width: 18cm) {
+ li, a, button {
font-size: 20px;
}
- .hideOnMobile
- {
+ .hideOnMobile {
display: none;
}
}
-header
-{
+header {
display: flex;
justify-content: space-between;
align-items: center;
@@ -39,39 +33,32 @@ header
background-color: #24242A;
}
-.navLinks
-{
+.navLinks {
list-style: none;
}
-@media only screen and (max-width: 18cm)
-{
- .navLinks
- {
+@media only screen and (max-width: 18cm) {
+ .navLinks {
display: none;
}
}
-.navLinks li
-{
+.navLinks li {
cursor: pointer;
display: inline-block;
padding: 0px 20px;
}
-.navLinks li a
-{
+.navLinks li a {
transition: all 0.5s ease 0s;
}
-.navLinks li a:hover, .navLinks li:hover
-{
+.navLinks li a:hover, .navLinks li:hover {
color: #0088a9;
}
-button
-{
+button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
@@ -80,31 +67,35 @@ button
transition: all 0.5s ease 0s;
}
-button:hover
-{
+button:hover {
background-color: rgba(0, 136, 169, 0.3);
}
-nav
-{
+nav {
order: 1;
}
-h1
-{
+h1 {
text-align: center;
font-size: 50px;
color: white;
}
-.margin-top
-{
+@media only screen and (max-width: 18cm) {
+ h1 {
+ text-align: center;
+ font-size: 30px;
+
+ color: white;
+ }
+}
+
+.margin-top {
margin-top: 50px;
}
-body
-{
+body {
width: 100vw;
height: 100vh;
background-size: cover;
@@ -112,8 +103,7 @@ body
}
-.dropdown div
-{
+.dropdown div {
display: none;
position: absolute;
padding: 20px;
@@ -122,33 +112,28 @@ body
border-radius: 50px
}
-.dropdown div ul li
-{
+.dropdown div ul li {
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
-@media only screen and (max-width: 18cm)
-{
- .dropdown div ul li
- {
+@media only screen and (max-width: 18cm) {
+ .dropdown div ul li {
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
padding: 0;
}
- .dropdown div ul li
- {
+ .dropdown div ul li {
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
padding: 0;
}
- .dropdown div
- {
+ .dropdown div {
right: 150px;
border-radius: 0px;
top: 10px;
@@ -156,29 +141,24 @@ body
}
-.dropdown:hover div ul, .dropdown:hover div
-{
+.dropdown:hover div ul, .dropdown:hover div {
display: flex;
flex-direction: column;
}
-.mobileMenuButton
-{
+.mobileMenuButton {
background-color: rgba(0, 0, 0, 0);
display: none;
}
-@media only screen and (max-width: 18cm)
-{
- .mobileMenuButton
- {
+@media only screen and (max-width: 18cm) {
+ .mobileMenuButton {
display: inline-block;
transition: all 0.5s ease 0s;
}
}
-.mobileMenuButton svg
-{
+.mobileMenuButton svg {
width: 50px;
height: 50px;
position: absolute;
@@ -187,22 +167,18 @@ body
color: white;
}
-.mobileMenuButton svg:hover
-{
+.mobileMenuButton svg:hover {
color: #0088a9;
}
-.mobileMenuDropDown
-{
+.mobileMenuDropDown {
display: none;
background-color: #24242A;
transition: all 0.5s ease 0s;
}
-
-.mobileMenuDropDown li
-{
+.mobileMenuDropDown li {
list-style: none;
margin-top: 10px;
margin-bottom: 10px;
@@ -211,8 +187,7 @@ body
}
-.mobileMenuButton:hover .mobileMenuDropDown
-{
+.mobileMenuButton:hover .mobileMenuDropDown {
display: flex;
flex-direction: column;
position: absolute;