/* ===========================
KAELLYNXEN EXAMPLES
=========================== */


@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');



*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



body{

    background:#000;

    color:#b5b5b5;

    font-family:"VT323", monospace;

    font-size:24px;

}



.container{

    width:1100px;

    max-width:95%;

    margin:30px auto;

}





/* ===========================
HEADER
=========================== */


.header{

    background:#000;

    border:2px solid #32145c;

    border-radius:14px;

    padding:25px;

    text-align:center;

    margin-bottom:25px;


    box-shadow:

        0 0 8px rgba(80,255,120,.55),

        0 0 20px rgba(80,255,120,.30),

        0 0 40px rgba(80,255,120,.15);

}



.header h1{

    color:#c9b6eb;

    font-size:60px;

    font-weight:normal;

    letter-spacing:6px;

}



.header p{

    color:#7ab84a;

    margin-top:10px;

}



/* ===========================
GALLERY
=========================== */


.gallery{

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:20px;

}

/* ===========================
ART CARDS
=========================== */


.art-card{

    background:#000;

    border:2px solid #32145c;

    border-radius:12px;

    padding:12px;

    text-align:center;


    box-shadow:

        0 0 6px rgba(80,255,120,.55),

        0 0 18px rgba(80,255,120,.25);


    transition:.25s;

}



.art-card:hover{

    transform:translateY(-6px);


    border-color:#6640a3;


    box-shadow:

        0 0 10px rgba(80,255,120,.75),

        0 0 30px rgba(80,255,120,.40),

        0 0 50px rgba(80,255,120,.20);

}





.art-card img{

    width:100%;

    height:350px;

    object-fit:cover;

    border-radius:8px;

    border:2px solid #32145c;


    transition:.3s;

}



.art-card:hover img{

    transform:scale(1.03);

}




.art-card h2{

    color:#c9b6eb;

    font-size:32px;

    font-weight:normal;

    margin-top:15px;

}



.art-card p{

    color:#7ab84a;

    margin-top:5px;

}



/* ===========================
FOOTER
=========================== */


footer{

    margin-top:25px;

    background:#000;

    border:2px solid #32145c;

    border-radius:12px;

    padding:12px;

    text-align:center;

    color:#777;


    box-shadow:

        0 0 6px rgba(80,255,120,.45),

        0 0 18px rgba(80,255,120,.20);

}




/* ===========================
MOBILE
=========================== */


@media(max-width:800px){


    .gallery{

        grid-template-columns:1fr;

    }


    .header h1{

        font-size:45px;

    }


    .art-card img{

        height:auto;

    }


}