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


:root{

    /* COLOR */
    --BG-COLOR:#1e293b;
    --BG-IMG:whitesmoke;
    --COLOR:#000000;
    --BR-COLOR:#000000;
    --CARD-BR-COLOR: #0d0d0d;
    --CARD-TARGET-COLOR:#0054caab;
    --CARD-IMG-BR-COLOR: #030303;
    --HD-FT-COLOR:whitesmoke;
    --NV-COLOR:#1e2024;
    --NV-BG-COLOR:whitesmoke;
    --NV-HO-FO-COLOR:yellowgreen;
    --NV-AC-COLOR:#0ca4bc89;
    --CARD1-BG-COLOR:whitesmoke;
    --CARD2-BG-COLOR:papayawhip;
    --CARD3-BG-COLOR:yellowgreen;

    /* FONT */
    --FONT:1.5rem, Arial, Helvetica, sans-serif;
    --FONT-WIDTH:bolder;

    /*  GANRAL */

}

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

body{
    background-color:var(--BG-COLOR);
    background-image:radial-gradient(var(--BG-IMG),var(--BG-COLOR));
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font:var(--FONT);
}

html{
    scroll-behavior: smooth;
}

nav{
    display: flex;
    justify-content: space-evenly;
    padding:0.5rem;
    color:var(--NV-COLOR);
    background-color: var(--NV-BG-COLOR);
    font-weight: bolder;
    border-bottom: 2px solid var(--BR-COLOR);
   
}

:is(nav a:any-link){
    color:var(--NV-COLOR);
}

nav:is(a:hover,a:focus){
    color:var(--NV-HO-FO-COLOR);
}

nav a:active{
    color:var(--NV-AC-COLOR);
}



:where(header,footer){
    background-color:var(--BG-COLOR);
    position: sticky;
    color: var(--HD-FT-COLOR);
    text-align:center;
    z-index: 1;
}

header{
    top:0;
}

footer{
    bottom: 0;
}

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

.cards{
    scroll-margin-top:8rem;
    width:min(100%, 350px);
    border-radius:15px;
    border:2px solid var(--CARD-BR-COLOR);
    background-color: var(--CARD1-BG-COLOR);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items:center;
   
}

.cards:nth-child(odd){
    background-color:var(--CARD2-BG-COLOR);
}

.cards:last-child{
    background-color: var(--CARD3-BG-COLOR);
}

.cards figcaption::after{
    content:' &/&';
    display: block;
    box-shadow: 5px 4px 20px var(--BG-COLOR);
    text-shadow: 4px 4px 8px var(--BG-COLOR);
}



.cards figcaption:hover::before,figcaption:focus::before{
    content:attr(data-tooltip);
    position: absolute;
    left:-5px;
    bottom: 85px;
    color:var(--BG-COLOR);
    font-size: clamp(1rem, 1.75vw, 1.5rem);
    box-shadow:0px 0px 10px #000;
    text-shadow: 0px 0px 5px #070606;



}


.cards p{
    position: relative;
}
.cards p::before{
        content:open-quote;
        font-size: 3rem;
        position: absolute;
        top:-0.25em;
        left:-0.5em;

}   

.cards p::after{
    content: close-quote;
    font-size: 3rem;
    position: absolute;
    top:-0.25em;
    right:-0.5em;
}

.cards figcaption::first-letter{
    font-size: 3rem;;
}

.cards:target{
    border:4px groove var(--CARD-TARGET-COLOR);
}

.card1:hover,
.card1:focus{
    border:4px dashed var(--CARD-TARGET-COLOR);
}



.cards figure{
    display: flex;
    flex-flow:column nowrap; 
}

.cards img{
    border:5px double var(--CARD-IMG-BR-COLOR);
    border-radius: 50%;
}

.cards figcaption{
    font-weight: var(--FONT-WIDTH);
    font-size: 2rem;
    margin: 1rem;
    text-align: center;
    position: relative;   
}

:is(figcaption,p){
    white-space: nowrap;
}
    /*||SMALL||*/
@media  screen and (min-width:576px) {
   

    main{
        justify-content: center;
        flex-flow: row wrap;
        padding: 1rem;
    }

    .cards{
        width:min(100%, 400px);
    }

    .cards:last-child {
        order:-1;
    }
}


    /* Dark Mode */

@media (prefers-color-scheme:dark){
    :root{
        --BG-COLOR:rgb(0, 0, 0);
        --BG-IMG:#ffffff;
        --COLOR:#ffffff;
        --BR-COLOR:#ffffff;
        --CARD-BR-COLOR:#ffffff;
        --CARD-TARGET-COLOR:#1e6fe3;
        --CARD-IMG-BR-COLOR: #d50f0f;
        --HD-FT-COLOR:#ffffff;
        --NV-COLOR:#2d333b;
        --NV-BG-COLOR:#ffffff;
        --NV-HO-FO-COLOR:#31c531;
        --NV-AC-COLOR:#18d7e9;
        --CARD1-BG-COLOR:#0abcd0;
        --CARD2-BG-COLOR:#fde108;
        --CARD3-BG-COLOR:#9df506;

    }
}

    /*||MEDIAM||*/
@media screen and (min-width:768px){
    

    nav{
        display: none;
    }

    .cards{
        width:min(100%, 325px);
    }

    .cards figure{
        flex-flow:column-reverse;
    }

    
    p{
        margin-top: 1rem;
    }
}
    
        /*||LARGE||*/
@media screen and (min-width:992px){
    .cards{
        width:min(100%, 400px);
    }

    .cards:nth-child(2){
        order:-1;
    }

}
        /*||XL||*/
@media  screen and (min-width:1200px) {
    .cards{
        width:min(calc(33% - 1rem), 500px);
    }
}

        /*|| MOBILE DEVICE LANDSCAP||*/
@media  screen and (max-height:425px) and (min-aspect-ratio:7/4) {

    nav{
        display: none;
    }

    main{
        flex-flow: row nowrap;
        justify-content: space-evenly;
        align-items: stretch;
    }
    
    .cards{
        width:min(calc(33% - 0.25rem), 200px);
    }

    .cards figure{
        flex-direction: column-reverse;
    }

    .cards p{
        margin-top: 0.25rem;
        font-size: 1.25rem;
    }
    .cards figcaption{
        font-size: 1.75rem;
    }
}