body {
    font-family: verdana;
    background-color: sandybrown;
}

h1 {
    border:4px solid red; /* just to help visualize element. */
    text-align: 200px; 300px;
    height: 400px; /*height of border of h1 */
    line-height: 40%; /*roughly vertically centers text w/i h1 box. */ 
    padding: 200px 8px 90px 8px; /* top right bottom left */ /* 90px 8px; = T/B, L/R */
    margin: 16px 0px;
    text-indent: 6vw; /* pushes text over. On a paragraph, you could indent line #1. Could also do .5in or 3em (width of 3 capital M's), pixels, or %s. Percentages are more flexible with different screen sizes as are vws (8vw) - viewport widths. */
    position: relative; /* very important when you want to position something w/i parent. */
    /* backgrouknd image declarations */
    background-image: url(../images/paint.jpg); /* could do ./images or ../images. you go up one folder then over to images. ../images works for live server - others may not. */
    background-size: cover; /* will stretch, grow, fill the height/width - in this case of h1 box. */
    background-position: 50% 30%; /* first % = horizontal x quantity. 50% means photo is centered.secound % is the y or vertical quantity. This is how you change what part of the picture you are displaying. */ 
}

h1 > span{
   background-color: hsla (200, 100%, 100%, .6); /* hue, saturation , light, transparency. x,x,x,.6 - will be somewhat transparent. */ 
   display: block; /* make this inline span behave like a block. The first effect will be that it will stretch across the page. */
   padding: 4px 0px;
   text-shadow: 2px 1px 1px #666;  /* x (horiz - pos = to right, neg = to left) y (vertical - pos = downward, neg = upward) blur (in pixels) color  values of 0px 0px 6px white will make the letters stand out against any background. */
}

h1 > a {
    position: absolute;
    border: 2px solid green;
    display: block;
    width: 34px; height: 34px; /* icons were 32px */
}

h1 > a:nth-of-type(1) { /* nth-of-type means you designate which one you are designing: this is the first anchor tag under h1 */
    border: 0px solid orange; /* way to turn off the border by making 0 px; */
    bottom: 8px; right:16px;
    width: fit-content;
}

h1 > a:nth-of-type(2) {
    border: 0px solid purple;
    bottom: 8px; right:94px;
    width: fit-content;
}

/* first section element within parent "main" */
section:nth-child(1) {
    border: 4px solid orange;
    margin: 10px;
    min-height: 200px;
}

.mainlink { /*is a div */
    width: 60px; height: 60px; /* Hyperlink should be > 48px so easier to tap on phone. */
    border: 0px solid white; /* used to "visualize" div, now removed = 0px */
    margin: 50px auto;
}

div.mainlink a {
    border: 4px solid brown;
    background-color: #EEE;
    display: block;
    width: 100%; height:100%;
    border-radius: 50%;
    transition: all .7s;
}

div.mainlink img {
    display: block;
    width: 80%; height: 80%;
    border-radius: 50%;
    margin: 0 auto;
    padding-top: 8px;
}

div.mainlink a:hover {
    background-color: rgb(249, 249, 107);
    border:4px solid orangered;
    outline-style: 6px blur;
    outline-style: 4px yellow;
}

section:nth-child(2) {
    margin: 10px;
    min-height: 500px;
    background-image: url(../images/multicolored-flower.jpg);
    background-position: center center; /* would position photo so mid section is in box, top and bottom trimmed */
    /* background-position: center bottom; would position photo so bottom is in box, but that cuts off top. */
    background-repeat: no-repeat; /* stops "tiling" of photo. */
}

section:nth-child(3) {
    border:4px solid yellowgreen;
    margin: 10px;
    min-height: 700px;
    background-image: url(../images/trees-silhouette-white.png), url(../images/sea.jpg); /* left-most image is placed on top */
    background-repeat: no-repeat, no-repeat; /* writing no-repeat 1x gets same result. */
    background-size: 100%, 100%;
    background-attachment: scroll, fixed; /* top image scrolls as default */
}

section:nth-child(4) {
    border:4px solid yellow;
    margin: 10px;
    min-height: 500px;
    background-image: url(../images/multicolored-flower.jpg);
    background-size: cover; /* like 100%, but better: will fill the height or width (whichever fills first) w the image. */
    background-attachment: fixed;
}

section:nth-child(5) {
    border:4px solid green;
    margin: 10px;
    min-height: 500px;
    background-image:linear-gradient(120deg, hsla(5, 100%, 50%,.6),white), linear-gradient(200deg, hsla(5, 100%, 50%,.6), pink);
}