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

img{
    display:block;
    max-width:100%;
    height:auto;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    min-height:100vh;

    background-color: #475547;
    background-image:radial-gradient(whitesmoke, #475569);
    display:flex;
    flex-direction:column;
}

header,
footer {
    position:sticky;
    background-color:#1e293b;
    color:whitesmoke;
    text-align:center;
}

header{
    top:0;

}

nav{
    background-color:#fff;
    color:#000;
    padding:0.5rem;
    border-bottom:3px solid #000;
    font-weight:bolder;
    display:flex;
    justify-content:space-evenly;
}

nav a,
nav a:visited{
    color:#000;
}

nav a:hover,
nav a:focus{
    color:hsla(0, 0%, 20%, 0.6);
}

main{
    flex-grow:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5rem;
    padding:1.5rem;
}

.card {
    scroll-margin-top:4rem;
    width: min(100%, 350px);
    border:3px solid #000;
    background-color:#3e609644;
    border-radius:12px;
    padding:1rem;

    display:flex;
    flex-direction:column;
    align-items:center;
}
.card figure{
    display:flex;
    flex-flow:column nowrap;
}

.card img{
    border:5px double #333;
    border-radius:50%;
}

.card figcaption{
    font-weight:bolder;
    font-size:1.5rem;
    margin:1rem;
    text-align:center;
}

footer{
    bottom:0;
    font-size:1.6rem;
}

@media screen and (min-width:576px){
    main{
        justify-content:center;
        flex-flow:row wrap;
        padding:1rem;
    }
    .card{
        width:min(100%, 400px);
    }
    .card:last-child{
        order:1;
    }
}

@media screen and (min-width:768px){
    
nav{
    display:none;
}
.card{
    width:min(100%, 325px);
}
.card figure{
    flex-flow:column-reverse;
}

.card figcaption{
    margin:0.3rem 0;
}

.card p{
    margin-top:1rem;
}
}

@media screen and (min-width:992px){
    .card{
     width:min(100%, 400px);
     order:-1;
    }
}

@media screen and(min-width: 1200px){
    .card{
        width:min(calc(33%-1rem), 500px);
    }
}

@media screen and (max-height:425px) and (min-aspect-ratio:7/4){
    h1{
        font-size:1.5rem;
    }
    nav{
        display:none;
    }
    main{
        flex-flow:row nowrap;
        justify-content:space-evenly;
        align-items:stretch;
    }

    .card{
        width:min(calc(33%-0.25rem), 200px);
    }

    .card figcaption,
    .card p{
        font-size:1.25rem;
    }
}

/* //pesudo elements */
.card img:[alt]{
    border:10px solid red;
}

.card:nth-child(2){
    background-color:peachpuff;
}

/*
.card figcaption::after{
    content:'hello';
}
 .card p {
    position:relative;
} */

.card p::before{
    content:open-quote;
}

.card p::after {
    content: close-quote;
}

.card figcaption::first-letter {
    font-size:2rem;
}