/* ===========================
KAELLYNXEN CONTACT
=========================== */


@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;

    overflow-x:hidden;

}




.container{

    width:1100px;

    max-width:95%;

    margin:30px auto;

}




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


.header{

    background:#000;

    border:2px solid #32145c;

    border-radius:14px;

    padding:20px;

    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;

}




/* ===========================
CONTACT LAYOUT
=========================== */


.contact-layout{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:25px;

    align-items:center;

}





/* ===========================
CONTACT BOX
=========================== */


.contact-box{

    background:#000;

    border:2px solid #32145c;

    border-radius:14px;

    padding:25px;


    box-shadow:

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

        0 0 18px rgba(80,255,120,.35),

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

}



.contact-box h2{

    color:#7ab84a;

    font-size:38px;

    font-weight:normal;

    margin-bottom:20px;

}



.contact-box p{

    color:#b5b5b5;

    margin:12px 0;

}/* ===========================
CONTACT IMAGE
=========================== */


.contact-image{

    display:flex;

    justify-content:center;

    align-items:center;

}



.contact-image img{

    width:100%;

    max-height:650px;

    object-fit:contain;


    filter:

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

        drop-shadow(0 0 25px rgba(80,255,120,.25));


    transition:.3s;

}



.contact-image img:hover{

    transform:scale(1.03);


    filter:

        drop-shadow(0 0 12px rgba(80,255,120,.75))

        drop-shadow(0 0 35px rgba(80,255,120,.35));

}



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


footer{

    margin-top:25px;

    background:#000;

    border:2px solid #32145c;

    border-radius:12px;

    text-align:center;

    padding:12px;


    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){


    .contact-layout{

        grid-template-columns:1fr;

    }


    .header h1{

        font-size:45px;

    }


    .contact-box{

        padding:18px;

    }


    .contact-image img{

        max-height:450px;

    }

}