Finished the about me page

DouwcoWebsite/wwwroot/css/style.css

@@ -1,16 +1,64 @@
+/* ===== Base Styles ===== */
+
 html, body{
     height: 100%;
     margin: 0;
     padding: 0;
     font-size: 25px;
+}
+
+body{
+    display: flex;
+    flex-direction: column;
+}
+
+main {    
+    flex: 1;
+    margin: 20px;
+    overflow-y: auto;
+    overflow-x: hidden;
     scroll-behavior: smooth;
 }
 
-/*  Container types  */
-.vert_container{
+a {
+ color: var(--blue-clr)
+}
+
+footer {
+    flex-shrink: 0;
+    background: var(--background-clr);
+    width: 100%;
+}
+
+footer > Div {
+    justify-content: space-between
+}
+
+footer > Div > p {
+    font-size: 16px;
+    margin: 10px 25px 10px 25px;
+}
+
+/* ===== Container Layouts ===== */
+
+.vert_container {
     display: flex;
-    flex-wrap: wrap;
+}
+
+@media (max-width: 1000px) {
+    .vert_container.revert {
+        display: inherit;
+    }
+}
+
+.vert_container.centered{
     align-items: center;
+    justify-content: space-around;
+}
+
+.vert_container.start{
+    align-items: flex-start;
+    justify-content: space-around;
 }
 
 .scroll_container {
@@ -19,6 +67,177 @@ html, body{
 }
 
 .scroll_section {
-    height: 100vh;
+    min-height: 100vh;
     scroll-snap-align: start;
-}
+}
+
+/* ===== Navigationbar ===== */
+
+.nav_option {
+    font-family: monsterrat_bold;
+    color: var(--white-clr);
+    text-decoration: none;
+    font-size: 36px;
+
+    border: none;
+    border-radius: 20px;
+    background-color: transparent;
+
+    display: flex;
+    align-items: center;
+    margin: 10px;
+    padding-right: 10px;
+}
+
+.nav_option:hover{
+    background-color: var(--background-accent-clr);
+}
+
+.nav_option.active {
+    background-color: var(--background-accent-clr);
+}
+
+.nav_option span {
+    color: var(--green-clr);
+}
+
+@media (max-width: 1100px) {
+    .nav_option p {
+        display: none;
+    }
+}
+
+/* ===== Layout ===== */
+.panel {
+    width: 60%;
+}
+
+@media (max-width: 1000px) {
+    .panel {
+        width: 100%;
+    }
+}
+
+.section-title {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-around;
+}
+
+.text-section {
+    margin-left: 50px;
+}
+
+.title {
+    font-size: 128px;
+    margin: 0;
+    line-height: 1;
+    text-wrap: balance;
+}
+
+@media (max-width: 1200px) {
+    .title {
+        font-size: 100px;
+    }
+}
+
+.tagline {
+    display: flex;
+    font-size: 36px;
+    font-weight: bold;
+    width: 500px;
+}
+
+.tagline .green-text {
+    color: var(--green-clr);
+}
+
+.tagline .normal-text {
+    margin-left: 7px;
+}
+
+@media (max-width: 1200px) {
+    .title {
+        font-size: 100px;
+    }
+
+    .tagline {
+        font-size: 26px;
+        width: 400px;
+    }
+}
+
+.content-box {
+    background-color: var(--background-accent-clr);
+    margin: 50px 20px 20px;
+    padding: 20px;
+    border-radius: 20px;
+}
+
+.content-box p {
+    margin: 0;
+}
+
+.content-box .intro-text {
+    font-weight: bolder;
+    font-size: 28px;
+    color: var(--green-clr)
+}
+
+.project-thumb {
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+    margin-right: 15px;
+    border-radius: 75x;
+    float: left;
+}
+
+
+/* ===== Images ===== */
+
+.icon {
+    vertical-align: middle;
+    padding: 10px;
+}
+.icon.small {
+    height: 45px;
+}
+.icon.medium {
+    height: 100px;
+}
+.icon.large {
+    height: 250px;
+}
+@media (max-width: 1200px) {
+    .icon.large.toggle {
+        height: 150px;
+    }
+}
+
+
+.image{
+    margin: 30px;
+}
+.image.large{
+    width: 40%;
+}
+.image.small{
+    width: 25%;
+}
+
+@media (max-width: 1000px) {
+    .image.large {
+        width: 80%;
+    }
+    .image.small{
+        width: 50%;
+    }
+}
+
+.image.stick {
+    position: sticky; 
+    top: 20px
+}
+
+