/* ===========================
   KAELLYNXEN COMMISSIONS
=========================== */

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


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


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


body{

    /* ===========================
    YOUR PHOTO HERE
    Replace this with your image path

    Example:
    url("../images/background.png")

    =========================== */

  background-image:url("https://i.imgur.com/JOYRvIP.jpeg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;


    color:#bdbdbd;

    font-family:"VT323", monospace;

    font-size:20px;

    display:flex;

    justify-content:center;

    padding:20px;

    overflow-x:hidden;

}



.container{

    width:1150px;

    max-width:95%;

}



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


.header{

    display:grid;

    grid-template-columns:170px 1fr 170px;

    gap:15px;

    align-items:center;

    background:#000;

    border:2px solid #32145c;

    border-radius:12px;

    padding:15px;

    margin-bottom:20px;


    box-shadow:

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

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

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

}



.header img{

    width:100%;

    display:block;

}



.header-title{

    text-align:center;

}



.header-title h1{

    color:#c9b6eb;

    font-size:60px;

    font-weight:normal;

    letter-spacing:5px;

}



.header-title h2{

    color:#7ab84a;

    font-size:30px;

    letter-spacing:5px;

}



.header-title p{

    color:#777;

    margin-top:8px;

}



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


.layout{

    display:grid;

    grid-template-columns:220px 1fr 220px;

    gap:15px;

    align-items:start;

}



/* ===========================
PANELS
=========================== */


.panel{

    background:#000;

    border:2px solid #32145c;

    border-radius:12px;

    padding:15px;

    margin-bottom:15px;


    position:relative;

    overflow:hidden;


    box-shadow:

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

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

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


    transition:.25s;

}



.panel:hover{

    transform:translateY(-3px);


    box-shadow:

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

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

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

}



.panel h2{

    color:#c9b6eb;

    font-size:32px;

    font-weight:normal;

    margin-bottom:12px;

}



.panel h3{

    color:#7ab84a;

    font-size:26px;

    font-weight:normal;

    margin-bottom:12px;

}
/* ===========================
DIRECTORY
=========================== */


nav{

    display:flex;

    flex-direction:column;

    gap:10px;

}



nav a{

    text-decoration:none;

    color:#bdbdbd;

    text-align:center;

    background:#000;

    border:2px solid #32145c;

    border-radius:10px;

    padding:10px;

    font-size:22px;

    transition:.25s;

}



nav a:hover{

    color:#c9b6eb;

    border-color:#7ab84a;

    box-shadow:

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

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

}




/* ===========================
PAYMENT
=========================== */


.socials{

    display:flex;

    flex-direction:column;

    gap:8px;

}



.socials p{

    color:#a6a6a6;

}





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


.welcome{

    display:grid;

    grid-template-columns:1fr 230px;

    gap:15px;

    align-items:center;

}



.welcome p{

    color:#a6a6a6;

    line-height:1.5;

    margin-bottom:10px;

}



.welcome strong{

    color:#c9b6eb;

}



.welcome-image video{

    width:100%;
    display:block;

    border:2px dotted #32145c;
    border-radius:10px;
}





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


.draw-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

}



.draw-box{

    background:#000;

    border:2px solid #32145c;

    border-radius:10px;

    padding:12px;

}



.draw-box h3{

    color:#7ab84a;

}



.draw-box ul{

    list-style:none;

}



.draw-box li{

    color:#a6a6a6;

    margin:7px 0;

}





/* ===========================
STATUS
=========================== */


.status-box{

    text-align:center;

}



.status-open{

    color:#7ab84a;

    font-size:30px;

}





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


.example-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

}



.example-grid img{

    width:100%;

    border:2px dotted #32145c;

    border-radius:8px;

}





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


footer{

    background:#000;

    border:2px solid #32145c;

    border-radius:12px;

    text-align:center;

    padding:12px;

    color:#777;

    margin-top:15px;


    box-shadow:

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

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

}





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


@media(max-width:800px){


    .layout{

        grid-template-columns:1fr;

    }



    .header{

        grid-template-columns:1fr;

        text-align:center;

    }



    .welcome{

        grid-template-columns:1fr;

    }



    .left,
    .right{

        width:100%;

    }



    .draw-grid{

        grid-template-columns:1fr;

    }


}




/* ===========================
DIRECTORY FIX
=========================== */


.left .panel:first-child{

    overflow:visible;

}


.left nav{

    max-height:none;

    overflow:visible;

}