4 files changed, 86 insertions, 0 deletions
diff --git a/sass/abstracts/_animations.scss b/sass/abstracts/_animations.scss
new file mode 100644
index 0000000..819b356
--- /dev/null
+++ b/sass/abstracts/_animations.scss
@@ -0,0 +1,32 @@
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+// text start on the left and transparent when the page loads, then moves into regular position
+@keyframes moveInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-10rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+}
+
+// skew to match the design of the .text-container class
+@keyframes moveInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(10rem) skewX(-12deg);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0) skewX(-12deg);
+  }
+}
diff --git a/sass/abstracts/_index.scss b/sass/abstracts/_index.scss
new file mode 100644
index 0000000..9563860
--- /dev/null
+++ b/sass/abstracts/_index.scss
@@ -0,0 +1,3 @@
+@forward "animations";
+@forward "mixins";
+@forward "variables";
diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss
new file mode 100644
index 0000000..98351c4
--- /dev/null
+++ b/sass/abstracts/_mixins.scss
@@ -0,0 +1,32 @@
+@use "variables" as *;
+
+@mixin main-link-hover {
+  color: $text-special-light;
+  transform: translateY(-0.3rem);
+}
+
+@mixin flex-sp-around-center {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+@mixin standard-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin narrow-container {
+  margin: 3rem auto;
+}
+
+@mixin wide-container {
+  margin: 10rem auto;
+  width: 80%;
+
+  h2 {
+    margin-bottom: 5rem;
+  }
+}
diff --git a/sass/abstracts/_variables.scss b/sass/abstracts/_variables.scss
new file mode 100644
index 0000000..5aea3e6
--- /dev/null
+++ b/sass/abstracts/_variables.scss
@@ -0,0 +1,19 @@
+// colors
+$col-main-light: #023059;
+$col-main-dark: #093d5ec5;
+$bg-text-container: #173d5a;
+$text-main: #ececec;
+$text-dark: #252424;
+$text-special-dark: #e79759;
+$text-special-light: #ecbf4b;
+
+// font
+$big-text: 2rem;
+$medium-text: 1.5rem;
+$medium-text-mobile: 1.3rem;
+$small-text: 1.1rem;
+
+// layout
+$margin-main: 3rem 4rem 2rem 4rem;
+$margin-mobile: 2rem;
+$radius-text-container: 10px;