{
    margin: 0; padding: 0; border: 0; 
    box-sizing: border-box;
}

body {
    background-color:lavender;
    font-family: verdana;
    color: grey;
}

h1 {
    display: flex;
}
h1 span {
    flex: 1 0 30%;
    padding 12px 0;
    text-align: center;
    font-size: 5em;
    background-color: hsl(200 100% 100% / .4);
    margin: 8px;
}

p.subtitle {
    background-color: rgba(255,255,255,.4);
    text-align: center;
    padding: 12px;
    margin: 0 8px;
    font-size: 2em;
    font-variant: small-caps;
    text-transform: lowercase;
    color: hsl(200, 90%, 20%)
}

section.examples {
    margin: 8px;
    min-height: 200px;
    background-color: rgba(255,255,255,.6);
    padding: 4px 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.examples div {
    border: 4px solid #345;
    margin: 8px;
    min-height: 200px;
    flex: 0 0 28%;
    aspect-ratio: 16 / 9;
    min-width: 300px;
    position: relative;
}

.examples > div > p {
    position: absolute;
    top: 30px; left: 0px; width: 100%;
    background-color: hsl(200, 90%, 40%);
    color: rgba(255,255,255,.8);
    font-size 1.5em;
    transform: rotate(-5deg);
    margin-left: -10px;
    padding: 4px 20px 4px 8px;
}
div.example1{
    width: 240px; height: 240px;
    min-width: 300px; max-width: 300px;
    border-radius: 50%;
}


div.example2 {
    background-image: repeating-linear-gradient(to bottom right, #FF69B4 0px, #FF69FB 20px, #FFFF00 21px, #FFFF00 60px, #FF69FB 61px);
}

div.example3 {
    background-color: #FF69FB;
    transition: background-color .4s ease-in;
}

div.example3:hover {
    background-color: #FFFF23;
}