/* =========================
   BODY / BACKGROUND
========================= */

body {

    background-color:#22002f;

    background-image:url("Cheetahprint.jpg");

    background-repeat:repeat;

    background-size:400px 400px;

    color:#f5d8ff;

    font-family:Verdana, Arial, sans-serif;

    margin:0;

    padding:0;

}




/* =========================
   PAGE
========================= */


.page {

    width:1000px;

    max-width:80%;

    margin:auto;

    padding:25px;

    position:relative;

    z-index:20;

}


/* =========================
   BAT IN WELCOME BOX
========================= */

.box .bat {

    width:90px;

    height:auto;

    display:block;

    margin:15px auto 0 auto;

    position:relative;

}

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


header {


    background:rgba(35,0,55,0.85);


    border:3px solid #d889ff;


    border-radius:25px;


    padding:20px;


    text-align:center;


    margin-bottom:20px;



    box-shadow:

    0 0 25px #b000ff;


}



h1 {


    font-family:Georgia,serif;


    color:#f0aaff;


    font-size:50px;



    text-shadow:

    0 0 15px #ff00ff;


}





h2 {


    color:#ff9df5;


    font-family:Georgia,serif;


    border-bottom:2px dashed #ff77ff;


}





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


.layout {


    display:grid;


    grid-template-columns:260px 1fr;


    gap:20px;


}







/* =========================
   BOXES
========================= */


.box {


    background-image:url("Lace.jpg");


    background-repeat:repeat;


    background-size:250px;



    background-color:rgba(80,0,110,0.75);




    border:3px solid #d889ff;



    border-radius:20px;




    padding:20px;




    margin-bottom:20px;




    box-shadow:


    0 0 20px #b000ff,


    inset 0 0 20px #5c007a;



    overflow:hidden;


}




.box:before {


    content:"✦ ✧ ✦ ✧ ✦";


    display:block;


    text-align:center;


    color:#ff9fff;


}






/* =========================
   PROFILE
========================= */


.profile {


    width:150px;


    height:150px;


    object-fit:cover;


    display:block;


    margin:auto;



    border-radius:12px;



    border:3px solid #ff8cff;



    box-shadow:

    0 0 20px #ff00ff;


}






/* =========================
   CURTAIN SIDES
========================= */


body:before {


    content:"";


    position:fixed;



    top:0;


    left:0;



    width:150px;


    height:100vh;




    background-image:url("Curtains.jpg");



    background-size:150px 100vh;



    background-repeat:repeat-y;



    z-index:10;



    pointer-events:none;


}





body:after {



    content:"";



    position:fixed;



    top:0;



    right:0;




    width:150px;



    height:100vh;





    background-image:url("Curtains.jpg");




    background-size:150px 100vh;





    background-repeat:repeat-y;





    z-index:10;



    pointer-events:none;


}







/* =========================
   BAT IN WELCOME
========================= */


header .bat {


    display:block;


    width:90px;


    height:auto;



    margin:15px auto 0 auto;



}








/* =========================
   TEXT
========================= */


p {

    line-height:1.6;

}




ul {


    list-style:none;


    padding-left:5px;


}



li:before {


    content:"♡ ";


    color:#ff8cff;


}





/* =========================
   LINKS
========================= */


a {


    color:#ff9df5;


    text-decoration:none;


    font-weight:bold;


}



a:hover {


    color:white;


    text-shadow:0 0 15px #ff00ff;


}








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


@media(max-width:800px){


.layout {


    grid-template-columns:1fr;


}




.page {


    max-width:90%;


}





body:before,

body:after {


    width:70px;


    background-size:70px 100vh;


}


}