* {
    margin: 0;padding: 0;border: 0;box-sizing: border-box;
}
/* font-family: 'Acme', sans-serif;
font-family: 'Chakra Petch', sans-serif;

default fonts are 16px in size.
10/16 = 62.5%

now we can use REM to size fonts.
*/
:root {
    font-size: 62.5%; /* :root same as html*/
}

body {
    background-color: rgba(49, 105, 105,1);
    font-family: 'Chakra Petch', sans-serif;
}

header {
    height: 300px;
    background-image: linear-gradient(to left, rgba(0, 0, 0,.9) 30%, rgba(210, 170, 250,.0)), 
                      url(../images/ken-cheung-KonWFWUaAuk-unsplash\ medium\ size.jpg);
    background-size:100%,100%;/* makes image fit width*/
    background-repeat: no-repeat; /* no repeat keeps image from repeating to fit across*/
    background-position: right center, center center; /* horizontal and vertical*/
    transform: scaleX(-1);/*flips header horizontally*/
    display: flex; /* makes the header a flexbox container */
    justify-content: right;
    position: relative; /* position relative on the parent */
}
h1 {
    color: aliceblue;
    font-family: 'Acme', sans-serif;
    /*font-size:clamp(min, normal, max) is another type of font size that controls size as it shrinks or grows*/
    font-size: 6vw; /*font-size: 4rem=40px; 3rem=30px; 2.5rem=25px; etc... works when you use :root */
    transform: scaleX(-1);/*flips text back to being forward*/
    align-self: center;/* only works on a flexbox item */
    padding-left: 5%;
}
header p {
    color: aliceblue;
    font-size: 3rem;
    position: absolute; /* position absolute on the child*/
    transform: scaleX(-1);
    bottom: -3.5rem; left: -1rem;
}

#examples {
    display: flex;/* use flex box as a first to try way of displaying blocks side by side */
    flex-flow: row wrap;
    justify-content: space-evenly;
    gap: 12px;
    padding: 12px;
    margin-top: 40px;
}

.example_item {
    border: 4px solid orange;
    flex: 1 0 30%; /* flex-grow, flex-shrink, flex-basis*/
    min-width: 300px; min-height: 300px;
    
}
/*styling ALL figure elements within the id=examples */
#examples figure {
    background-size: 100%;
    background-position: center;
    filter: grayscale(100%);
    transition: all .4s ease-in-out;
    overflow: hidden;
}

#examples figure:hover{
    background-size: 140%;
    filter: grayscale(0%);
}

/* styling ALL hyperlinks within figures aka class=example_item */
.example_item a {
    display: block; /* converting the inline anchor to a block element */
    width: 100%; height: 100%;/* make the anchor fill the space */
}

/* styles the first figure element within the id=examples*/
/* ":" creates a pseudo class, "::" creates a pseudo-element */
#examples figure:nth-child(1) {
    background-image: url(../images/headphones.jpg);
}

#examples figure:nth-child(2) {
    background-image: url(../images/sneakers.jpg);
}

#examples figure:nth-child(3) {
    background-image: url(../images/make-up.jpg)
}

#examples figure:nth-child(4) {
    background-color: pink;
    filter: grayscale(0%);
    background-image: url(../images/sneakers.jpg);
}

#examples figure:nth-child(4) a {
    text-align: center;
    color: yellow;
    font-size: 4rem;
    font-style: italic;
    text-decoration: none;
    font-weight: bold;
    line-height: 300px;
    text-shadow: 1px 1px 2px #000;
}

#examples figure:nth-child(4) figcaption {
    transform: translateX(500px);
    transition: all .4s ease-in-out;
}
#examples figure:nth-child(4):hover figcaption {
    transform: translateX(0px);
}

#examples figure:nth-child(5) {
    background-image: url(../images/two_people_sitting.jpg);
    background-size: 180%;
    background-position: left top;
}

#examples figure:nth-child(5):hover {
    background-position: right top;
}

#examples figure:nth-child(6) {
    background-image: url(../images/two_people_sitting.jpg);
    background-size: 180%;
    background-position: right top;
}

#examples figure:nth-child(6):hover {
    background-position:  left top;
}