*{
    margin:0; padding: 0;border:0 ;box-sizing: 0;
}
/*
font-family: 'Fjalla One', sans-serif;
font-family: 'Poltawski Nowy', serif;
*/
:root{
    font-size: 62.5%;
}
body{
     background-color: rgb(255, 222, 173);
     font-family: 'Poltawski Nowy', serif;
     color: #ffffff;
}
header{
    height: 300px;
    background-size: 85%, 100%;
    background-image: linear-gradient(to left, rgba(0, 128, 0, 0.514) 40% , rgba(255, 222, 173, 0.014) ), url(../Images/lifguard.jpg);
    background-repeat: no-repeat;
    background-position: right center, center center;
    transform: scaleX(-1);
    display: flex;
    justify-content: right;
    font-family: 'Fjalla One', sans-serif;
    position: relative;
}
h1{
    font-size: 3.5vw; 
    transform: scaleX(-1);
    align-self: center;
    padding-left: 5%;
    font-style: italic;
    line-height: 8rem;
}
header p{
    font-size:  3rem;
    position: absolute;
    bottom: -4rem; right: 3.5rem;
    color: black;
    transform: scaleX(-1);
    
} 
h1 span{
    padding-left: 25vw;
    color:hsla(200%,80%,98%,.3);
}
#examples{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    gap: 12px;
    padding: 12px;
    margin-top: 80px;
}
.example_item{
    border: 6px solid rgb(128, 73, 0);
    min-width: 350px; min-height: 300px;
    flex: 1 0 30%;

}
#examples figure{
    background-size: 100% ;
    background-position: center;
    transition: all .4ms ease-in-out;
    filter: grayscale(100%);
    overflow: hidden;
}
#examples figure:hover{
    background-size: 140%;
    filter: grayscale(0%);
}
 .example_item a {
    display: block;
    width: 100%; height: 100%;
 }

#examples figure:nth-child(1){
   
    background-image:url(/Images/headphones.jpg);
}
#examples figure:nth-child(2){
   
    background-image:url(/Images/Shoe.jpg);
}
#examples figure:nth-child(3){
   
    background-image:url(/Images/makup.jpg);
}
#examples figure:nth-child(4){
    background-image:url(/Images/Shoe.jpg);
    filter:grayscale(0%);
}
#examples figure:nth-child(5){
    background-image:url(/Images/mountains.jpg);
    background-size: 150%;
    background-position: top center;
    transition: all 200ms ease-in;
}
#examples figure:nth-child(6){
    background-image:url(/Images/zen.jpg);
    background-size: 150%;
    transition: all 100ms ease-in;
}

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

}
#examples figure:nth-child(4) figcaption{
    transform: translateX(500px);
    transition: all 400ms ease-in-out;
}

#examples figure:nth-child(4) :hover figcaption {
    transform: translateX(0px);
}

#examples figure:nth-child(5):hover {
    background-position:bottom center ;
}
#examples figure:nth-child(6):hover {
    transform: rotate(360deg);
    background-size: 100%;

}
nav a {
    display: inline-block;
    background-color: rgb(19, 132, 197);
    color: #222;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 2px 2px 2px #222;
    font-size: 16pt;
    padding: 12px 24px;
    margin: 8px;
}
nav a:hover{
   background-color: #6a6b66 ;
}
nav a:active {
   box-shadow: 1px 1px 1px #111;
   position: relative;
   top: 1px;
}