/*==================================================
 FESTIVAL POSTER GENERATOR
 Clean CSS
 Part 1
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html,
body{
    width:100%;
    height:100%;
}

body{

    body{

    background:rgba(5,8,22,.3);

    overflow-x:hidden;

    position:relative;

}

    overflow-x:hidden;

    position:relative;

}

/*=========================
VIDEO
=========================*/

.bg-video{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-3;

    filter:
    brightness(.35)
    saturate(1.2);

}

.bg-overlay{

    position:fixed;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(4,8,20,.78),
        rgba(15,23,42,.82)
    );

    z-index:-2;

}

/*=========================
CONTAINER
=========================*/

.container{

    width:100%;

    max-width:1600px;

    margin:auto;

    padding:30px;

}

/*=========================
MAIN
=========================*/

.main{

    display:grid;

    grid-template-columns:
    420px
    1fr;

    gap:30px;

    align-items:flex-start;

}

/*=========================
LEFT PANEL
=========================*/

.panel{

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(18px);

    border:

    1px solid
    rgba(255,255,255,.08);

    border-radius:30px;

    padding:25px;

    box-shadow:
    0 15px 45px
    rgba(0,0,0,.35);

}

.section-title{

    font-size:28px;

    font-weight:700;
    color:#ffffff;
    margin-bottom:25px;

}

.form-group{

    margin-bottom:20px;

}

label{

    display:block;

    margin-bottom:8px;

    color:#dbeafe;

    font-size:15px;

}

input,
select{

    width:100%;

    border:none;

    outline:none;

    padding:15px;

    border-radius:15px;

    background:
    rgba(255,255,255,.08);

    color:#fff;

    font-size:15px;

}

select option{

    color:#000;

}

/*=========================
BUTTONS
=========================*/

.buttons{

    display:grid;

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

    gap:12px;

    margin-top:20px;

}

button{

    border:none;

    padding:16px;

    border-radius:16px;

    cursor:pointer;

    color:#fff;

    font-weight:700;

    transition:.25s;

}

button:hover{

    transform:
    translateY(-3px);

}

.png-btn{

    background:#2563eb;

}

.jpg-btn{

    background:#7c3aed;

}

.pdf-btn{

    background:#059669;

}

/*==================================================
PREVIEW
==================================================*/

.preview{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:visible;

    padding:20px;

}

.preview-inner{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

}

/*==================================================
POSTER
==================================================*/

.poster-preview{

    position:relative;

    width:min(690px,95vw);

    aspect-ratio:1/1;

    overflow:hidden;

    border-radius:22px;

    background:#fff;

}

/*==================================================
TEMPLATE
==================================================*/

.template-overlay{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:5;

    pointer-events:none;

}

/*==================================================
USER PHOTO
==================================================*/

.user-photo{
    position:absolute;
    width:200px;
    height:200px;

    transform:translate(15%,-30%);

    border-radius:35px;   /* or 50% if your frame is circular */

    object-fit:cover;

    z-index:0;
}

.template-overlay{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:5;

    pointer-events:none;
}


/*==================================================
PHOTO CONTROLS
==================================================*/

.photo-controls{

    margin-top:25px;

    padding:20px;

    border-radius:22px;

    background:
    rgba(255,255,255,.05);

    border:
    1px solid rgba(255,255,255,.08);

}

.control-title{

    font-size:18px;

    font-weight:700;
    color:#ffffff;
    margin-bottom:18px;

}

.slider-box{

    margin-bottom:18px;

}

input[type="range"]{

    appearance:none;

    -webkit-appearance:none;

    width:100%;

    height:8px;

    background:
    linear-gradient(
        90deg,
        #2563eb,
        #9333ea
    );

    border-radius:999px;

    padding:0;

    cursor:pointer;

}

input[type="range"]::-webkit-slider-thumb{

    appearance:none;

    -webkit-appearance:none;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#fff;

    border:3px solid #2563eb;

    cursor:pointer;

}

input[type="range"]::-moz-range-thumb{

    width:22px;

    height:22px;

    border-radius:50%;

    background:#fff;

    border:3px solid #2563eb;

    cursor:pointer;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1100px){

.main{

grid-template-columns:1fr;

}

.preview{

min-height:auto;

}

}


.buttons{

grid-template-columns:1fr;

}

.user-photo{

width:140px;

height:140px;

}

.container{

padding:15px;

}

.panel{

padding:18px;

}



.user-photo{

width:120px;

height:120px;

}

.section-title{

font-size:22px;

}