diff --git a/styles/App.css b/styles/App.css
index 6fa61b8..7544337 100644
--- a/styles/App.css
+++ b/styles/App.css
@@ -1,9 +1,186 @@
-@import 'calendar-widget/dist/index.css';
+@import "calendar-widget/dist/index.css";
+
+:root {
+ --delay: 0s;
+}
+
+* {
+ outline: none;
+ box-sizing: border-box;
+ --yellow: #fdd92a;
+ --navy-blue: #333439;
+ --dark-gray: #393834;
+ --background-gray: #efefed;
+}
+
+.hidden {
+ display: none !important;
+}
+
+html {
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ background: #ffffff;
+}
+
+img {
+ max-width: 100%;
+}
body {
font-family: "Montserrat", sans-serif;
margin: 0;
padding: 0;
+ background-color: var(--background-gray);
+ color: var(--dark-gray);
+ max-width: 1600px;
+ height: 100%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.wrapper {
+ max-width: 1600px;
+ background-color: var(--background-gray);
+ display: flex;
+ margin: 0 auto;
+ background-image: url(./images/background.svg);
+ background-size: contain;
+ background-repeat: no-repeat;
+}
+
+@-webkit-keyframes left {
+ 0% {
+ transform: translateX(-30px);
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+@keyframes left {
+ 0% {
+ transform: translateX(-30px);
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ transform: none;
+ }
+}
+@-webkit-keyframes top {
+ 0% {
+ transform: translateY(-30px);
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ transform: none;
+ }
+}
+@keyframes top {
+ 0% {
+ transform: translateY(-30px);
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ transform: none;
+ }
+}
+.main-container {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ padding: 25px;
+ padding-left: 0;
+ padding-top: 0;
+}
+
+.header {
+ background: var(--yellow);
+ width: 100%;
+ padding: 0 30px;
+ -webkit-animation: top 1s both;
+ animation: top 1s both;
+ display: flex;
+ align-items: center;
+ font-size: 15px;
+ white-space: nowrap;
+ position: -webkit-sticky;
+ position: sticky;
+ top: -2px;
+ left: 0;
+ z-index: 10;
+ border-radius: 0 0 12px 0;
+}
+.header:before {
+ content: "";
+ width: 100%;
+ height: 25px;
+ position: absolute;
+ top: -25px;
+ left: 0;
+}
+.header-link {
+ color: var(--dark-gray);
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ padding: 20px;
+ transition: 0.3s;
+ border-bottom: 3px solid transparent;
+ transition: 0.3s;
+ opacity: 0.4;
+}
+.header-link svg {
+ width: 20px;
+ margin-right: 14px;
+}
+
+.header-link .fa {
+ width: 20px;
+ margin-right: 14px;
+}
+
+.header-link.active,
+.header-link:hover {
+ border-bottom: 3px solid var(--navy-blue);
+ opacity: 1;
+}
+
+.logo {
+ padding: 20px 50px 20px 0;
+ font-size: 16px;
+ color: var(--dark-grey);
+}
+.logo-det {
+ background: lightgray;
+ padding: 8px;
+ margin-left: -2px;
+ border-radius: 50%;
+ font-size: 15px;
+}
+
+.button {
+ display: flex;
+ align-items: center;
+ color: #9b9ca7;
+ border: none;
+ padding: 2px 12px;
+ border-radius: 4px;
+ margin-right: 20px;
+}
+.button svg {
+ margin-left: 10px;
+ width: 16px;
+}
+
+.button .fa {
+ margin-left: 10px;
+ width: 16px;
}
.container {
@@ -19,6 +196,11 @@ body {
padding: 12px;
}
+.homepage {
+ text-decoration: none;
+ color: var(--dark-gray);
+}
+
.page-slider .container {
margin: auto;
}
@@ -116,15 +298,14 @@ body {
/*Style the footer*/
.page-footer {
- background-color: rgb(138, 138, 138);
+ background-color: var(--yellow);
overflow: hidden;
- max-width: 1200px;
margin: auto;
-
+ width: 100%;
}
.page-footer p {
- color: #f2f2f2;
+ color: var(--dark-gray);
text-align: center;
padding: 14px 14px;
text-decoration: none;
@@ -133,5 +314,5 @@ body {
}
.page-footer p:hover {
- color: black
-}
\ No newline at end of file
+ color: black;
+}