page should be more or less responsive

besides the responsiveness, this commit includes a clickable arrow pointing down, which smoothly scrolls the user down to the enroll element when clicked.

app.js

@@ -0,0 +1,7 @@
+function scrollToEnroll() {
+    document.getElementById('enroll')
+        .scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+        })
+}

css/app.sass

@@ -3,6 +3,7 @@
   flex-direction: column
   justify-content: flex-start
   align-items: stretch
+
 body
   margin: 0
   margin-bottom: 80px
@@ -12,11 +13,14 @@ body
   background-color: $color-primary
 
 h1, h2, h3, h4, h5, h6
-    letter-spacing: 2px
-    text-transform: uppercase
+  letter-spacing: 2px
+  text-transform: uppercase
+
 
-p, ul, ol
-    font-size: 20px
+p, ul, ol, i, b
+  font-size: 20px
+  @media (max-width: 700px)
+    font-size: 15px
 
 article
   max-width: 900px

css/header.sass

@@ -1,6 +1,6 @@
 header
   height: calc(100vh - 80px)
-  padding: 10px 0
+  padding: 0
   overflow: hidden
   position: relative
   display: flex
@@ -9,25 +9,27 @@ header
   justify-content: flex-start
 
   .header-logo-container
-    flex-basis: 90%
+    max-height: calc(90% - 70px)
     display: flex
     justify-content: center
     align-items: center
+    flex-grow: 1
 
     .header-logo
+      max-height: 100%
       max-width: 90%
-      max-height: 90%
 
   .header-arrow
-    flex-basis: 10%
+    height: 70px
+
 
     .arrow-down
       width: 0
       height: 0
       border: 20px solid transparent
       border-right-width: 40px
       border-left-width: 40px
-      border-top-color: $color-quaternary
+      border-top-color: $color-secondary
 
     .top
       position: relative
@@ -42,4 +44,19 @@ header
       left: 0
       z-index: 1
 
+  .bounce
+    position: relative
+    left: 0
+    bottom: 0
+    -webkit-animation: bounce 2s infinite
+
+    @-webkit-keyframes bounce
+      0%
+        bottom: 0px
+      20%
+        bottom: 10px
+      100%
+        bottom: 0px
+
+
 

css/main.sass

@@ -37,27 +37,53 @@ main
     max-width: 900px
     flex-grow: 1
 
+
+
   .enroll
     display: flex
     flex-direction: row
     justify-content: space-between
     flex-wrap: wrap
+    @media (max-width: 700px)
+      justify-content: center
+
 
     .enroll-text
       font-size: 30px
       text-transform: uppercase
 
+      @media (max-width: 700px)
+        flex-basis: 100%
+        text-align: center
+
+      @media (max-width: 470px)
+        font-size: 25px
+
+      @media (max-width: 400px)
+        font-size: 20px
+
     .enroll-button
       @extend .button
       float: right
       font-size: 25px
 
+      @media (max-width: 700px)
+        float: none
+
+      @media (max-width: 470px)
+        font-size: 20px
+
+      @media (max-width: 400px)
+        font-size: 15px
+
+
   .introduction
     display: flex
     flex-direction: column
     align-items: center
     padding: 20px
 
+
     .introduction-video
       flex-basis: auto
       width: 100%
@@ -82,19 +108,32 @@ main
     display: flex
     flex-direction: column
 
-    ul
-      list-style: none
-      padding: 0
+
+
+
 
     .program-schedule
       display: flex
       flex-direction: row
       flex-wrap: wrap
-      justify-content: center
-      align-items: flex-start
+      justify-content: flex-start
+      align-items: stretch
 
       .program-schedule-day
         flex-basis: calc(1/3 * 100%)
+        display: flex
+        flex-direction: column
+
+        @media (max-width: 750px)
+          flex-basis: calc(1/2 * 100%)
+
+        @media (max-width: 500px)
+          flex-basis: 100%
+
+        ul
+          flex-grow: 1
+          list-style: none
+          padding: 0
 
     .program-elaboration
 

css/nav.sass

@@ -12,6 +12,12 @@ nav
   color: $color-tertiary
   height: 80px
 
+  @media (max-width: 500px)
+    font-size: 20px
+
+  @media (max-width: 420px)
+    font-size: 12px
+
   .nav-content
     display: flex
     flex-direction: row