index.css

*, *::before, *::after {                                                       /* for all elements inside the application (including pseudo elements), remove basic margins... */
    box-sizing: border-box;                                                      /* ... standardize widths and heights. */
    margin: 0;                                                                   /* ... set margin to 0 ... */
    padding: 0;                                                                  /* ... set padding to 0 ... */
   font-family: 'Poppins', sans-serif;                                                       /* Poppins with default of sans-serif*/  
  }

body {                                                                                      /* for all elements in the body...*/
    background: linear-gradient(to right, rgb(177, 178, 189), rgb(165, 168, 149));           /* ... the background will be a gradient ...*/ 
    transition: all 0.6s ease;                                                                   /* ... transition when the background color changes */
}

header {                                                                                       /* For the header (which holds our title and subtext)*/
    display: flex;                                                                                  /* To center your content, set display to flex...*/
    justify-content: center;                                                                         /* ... then center the content in the middle horizontally... */                    
    align-items: center;                                                                             /* ... then center the content vertically.... */
    text-align: center;                                                                              /* ... and lastly center the text itself.*/
    height: 100vh;                                                                                   /* ... the header will be the size of the viewport...*/
}

.jumbotron > h1 {                                                                              /* styling for h1 element in the jumbotron*/
    font-size: 2.5em;
    margin-bottom: .2em;
}

.accent-text {                                                                 /* for highlighted text in the h1 element: */
    color: rgb(180, 117, 22); 
    font-size: 3rem;
                                                      
}

.jumbotron > p {                                                                              /* styling for the p element in the jumbotron*/
    font-size: 1em;   
}

section {                                                                                      /* For the bottom section we want to transition into:*/
    height: 100vh;                                                                                  /* make that section 100vh so it is the same size as the viewport*/
    display: flex;                                                                                  /* align items side by side*/
    flex-direction: column;                                                                         /* then align items one on top of the other */
    align-items: center;                                                                            /* align items in the middle */
    justify-content: end;                                                                           /* and justify content at the end of the column bc the picture is a portrait of the dog*/

}

section img {                                                                                   /* for the image*/
    max-width: 700px;
    width: 70%;                                                                                     /* make the width of the image 70% of the width of the screen*/
    height: 75%;                                                                                    /* make the height of the image 60% of the height of the screen.  note that at this point the image is squashed a little bit, so you need add object fit */
    object-fit: cover;                                                                              /* object-covver alters the image to fit the aspect ratio when filling the elements content box*/
                                                                                                    /* more info: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit*/
}

section .page2 {                                                                                /* for the text in the page2 section*/
    padding-top: 80px;
    padding-bottom: 40px;                                                                          /* put some space between the image and the text*/
    text-align: center;
    width: 70%;
}

.page2 h1 {
    font-size: 2.5em;
    margin-bottom: .2em; 
}

.background-active {                                                                               /* when the background color is active on scroll*/
    background: rgb(245, 245, 245); 
}