*{
    margin: 0; padding: 0; border: 0; box-sizing: border-box; 
}
header{
    height: 300px;
    background-image: linear-gradient(to left, rgba(85, 0, 0, 0.6) 20%, rgba(42, 0, 156, 0.3)) ,url(../images/boat.jpg) ;
    background-size: 100% ;
    background-repeat: no-repeat;
    background-position:right center,center 70%;
    transform: scalex(-1); /* flips header horizontally*/
    display: flex;
    justify-content: right;
    position: relative;
}
header p{
    font-size: 3rem;
    position: absolute;
    color: crimson;
    transform:scalex(-1);
   font-family:  'Bruno Ace SC', cursive;
}
h1{
    font-family: 'Bruno Ace SC', cursive;
    font-size: 6rem;
    transform: scalex(-1); /*fixes the flip done in header for the text*/
    align-self: center;
    padding-left: 5%; 
}

p{
    font-family: 'Open Sans', sans-serif;
    font-size: 2rem;
    color: black;
}
a{
    font-size: 2rem;
    color: white;
}
:root{
    font-size: 62.5%;
}
body{
    background-color: hsla(200, 80%, 50%, 1);
    color: rgb(218, 32, 187);
}
#examples{
    border: 4px solid yellow;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    gap: 12px;
    padding: 12px;
}
.example_item{
    border: 4px solid pink;
    min-width:300px ; min-height: 260px;
}