* {
    margin: 0; padding: 0; border: 0;
    box-sizing: border-box;
}
body{
    background-color: rgb(74, 98, 114);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: hsl(40, 30%, 75%);

}
h1{
    display: flex;
    gap: 16px;
    padding: 16px;


}
h1 span{
    flex: 1 0  ;
    padding: 10px px;
    text-align: center;
    font-size: 5em;
    background-color: hsl(200 100% 100%/ .4 );
    margin: 8px;
}
p.subtitle{
    flex: 1 0;
    padding: 12px 0;
    text-align: center;
    font-size: 5em;
    background-color: hsl(200 100% 70%/ .4 );
    margin: 0 23px;
    font-variant: small-caps;
}
section.examples{
    margin: 8px;
    min-height: none;
    background-color:  hsl(200 100% 100%/ .4 );
    padding: 4px 0;
    display: flex;
    flex-flow: row wrap;
}

.examples div{
    border:4px solid #354535;
    margin: 8px;
    min-height: 200px;
    flex: 0 0 32.45%;
    aspect-ratio: 19 / 9;
    font-size: 30px;
    padding: 5px 5px 5px 5px;
    position: relative;

}
.examples> div > p {
    position: absolute;
    top: 20px; left: 0px; width :80%;
    background-color: hsl(200 100% 30%/ .9 );
    font-size: 1.5em;
    color: hsl(0, 0%, 100%);
    transform: rotate(-5deg);
    margin-left: -10px;
    padding: 4px;
}
div.example1{
    border-radius: 100%;

}
div.example2{
    width: 240px;
    border-radius: 16px;
    background-image: repeating-linear-gradient(to bottom right , orange 0px, orange 20px, red 20px, red 60px);
}
div.example3{
    background-color: aqua;
    transition: background-color .4s ease-in;
}
div.example3:hover{

    background-color: black;

}
div.example4{
    width: 240px;
    border-radius: 16px;
}
div.example5{
    width: 240px;
    border-radius: 16px;
}
div.example6{
    width: 240px;
    border-radius: 16px;
}
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;
   font-family: serif;
}