review with connie - good stylistic changes

1 files changed, 30 insertions, 16 deletions

diff --git a/styles.css b/styles.css
index ed2540c..f5ac612 100644
--- a/styles.css
+++ b/styles.css
@@ -5,7 +5,7 @@ vars and color
     /* define the color pallet */
     /*--primary-color: #D1F7FF;*/
     --primary-color: rgb(220, 251, 254);
-    --secondary-color: #fcd6c2;
+    --secondary-color: #FAEAC0;
     --accent-color: #DA627D;
     --second-accent-color: #222E50;
 }
@@ -27,11 +27,6 @@ body {
     /*color: rgb(212, 212, 212);*/
 }
 
-header {
-    position: relative;
-    overflow: hidden;
-}
-
 p {
     line-height: 1.2;
 }
@@ -58,7 +53,7 @@ section format + colors
  */
 
 section, header {
-    padding: 1.5rem 2rem 4rem 2rem;
+    padding: 4rem 2rem 4rem 2rem;
 }
 
 section:nth-child(even) {
@@ -72,7 +67,7 @@ section:nth-child(odd) {
 
 .title, .title-info-flex, .edges{
     text-align: left;
-    padding: 0 15% 1rem 15%;
+    padding: 0 15% 10px 15%;
 }
 
 .title {
@@ -80,6 +75,7 @@ section:nth-child(odd) {
 }
 
 
+
 h2 {
     text-align: center;
     font-size: 2rem;
@@ -97,6 +93,9 @@ header color will be that blue
 
 header {
     background-color: var(--primary-color);
+    position: relative;
+    overflow: hidden;
+    padding-top: 2rem;
 }
 
 
@@ -113,11 +112,18 @@ nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-right: 20px;
+    padding: 0 5vw;
 }
 
-.nav-flex > a {
+.nav-flex > .flex-row > a {
     margin-bottom: 30px;
+    display: block;
+    margin-left: 5vw;
+}
+
+.nav-flex > .flex-row {
+    justify-content: space-between;
+    width: fit-content;
 }
 
 .logo-img {
@@ -261,10 +267,11 @@ title area (animated text and connie's 3d model)
 }
 
 .video-title-wrapper {
+    position: relative;
     z-index: 1;
     width: clamp(25rem, 35vw, 500px);
     margin-bottom: 1rem;
-    padding-left: 50px;
+    left: -15px;
 }
 
 #video-title {
@@ -305,7 +312,7 @@ h1 {
 .course-name {
     font-size: 2rem;
     line-height: 1;
-    margin: .25rem 0 1rem 0;
+    margin: 10px 0 1rem 0;
     z-index: 5;
 }
 
@@ -393,7 +400,7 @@ course info section
     line-height: 25px;
     text-decoration: none;
 
-    border: 2px blue solid;
+    border: 3px solid #0000ff66;
     background-color: white;
 
     width: fit-content;
@@ -412,7 +419,7 @@ full menu & ta_calendar
 
 .important-note > p {
     padding-left: 10px;
-    margin: .5rem 0 1rem 0;
+    margin: 0 0 1rem 0;
 }
 
 .embedded-iframe {
@@ -473,6 +480,7 @@ convenience for helpful links
     align-items: start;
     justify-content: space-evenly;
     margin: 1rem auto 0 auto;
+    padding: 0 5%;
 }
 
 .helpful-link {
@@ -483,10 +491,11 @@ convenience for helpful links
     align-items: center;
     justify-content: center;
     width: 150px;
-    padding: 5px 15px;
+    padding: 10px 20px;
     border-radius: 5px;
     border: 3px solid #0000ff66;
     margin: 10px 0;
+    background-color: white;
 }
 
 .helpful-link h3 {
@@ -495,7 +504,8 @@ convenience for helpful links
 }
 
 .helpful-link:hover h3 {
-    color: #706881;
+    /*color: #706881;*/
+    /*font-size: 107%;*/
 }
 
 .helpful-link:hover {
@@ -707,6 +717,10 @@ img {
     .embedded-iframe {
         width: 90vw;
     }
+
+    .wrap-container {
+        justify-content: center;
+    }
 }