/* =====================================
   GLOBAL RESET
===================================== */

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


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

body{
    background:#f4f6f8;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}


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

.container{
    background:#ffffff;
    padding:30px;
    width:400px;
    border-radius:10px;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
}


/* =====================================
   TOOL TITLE
===================================== */

h2{
    margin-bottom:20px;
    color:#333;
    font-size:24px;
}


/* =====================================
   INPUT FIELD
===================================== */

input{
    width:100%;
    padding:12px;
    border:1px solid #ccc;
    border-radius:6px;
    margin-bottom:15px;
    font-size:16px;
}

input:focus{
    outline:none;
    border-color:#007bff;
}


/* =====================================
   BUTTON
===================================== */

button{
    width:100%;
    padding:12px;
    background:#007bff;
    color:#fff;
    border:none;
    border-radius:6px;
    font-size:16px;
    cursor:pointer;
    transition:0.3s;
}

button:hover{
    background:#0056b3;
}


/* =====================================
   QR RESULT AREA
===================================== */

#qr{
    margin-top:20px;
}


/* QR IMAGE */

#qr img{
    width:200px;
    height:200px;
}

/* =========================
   TEXTAREA
========================= */

textarea{
width:100%;
height:120px;
padding:10px;
margin-bottom:15px;
border:1px solid #ccc;
border-radius:6px;
resize:vertical;
font-size:14px;
}
/* =========================
   SELECT
========================= */

select{
width:100%;
padding:10px;
margin-bottom:15px;
border:1px solid #ccc;
border-radius:6px;
font-size:14px;
}

/* =========================
   PASSWORD-STRENGTH-CHECKER
========================= */
.strength-bar{
width:100%;
height:12px;
background:#eee;
border-radius:6px;
margin-top:10px;
margin-bottom:10px;
overflow:hidden;
}

#strengthFill{
height:100%;
width:0%;
background:red;
transition:0.3s;
}

.rules{
list-style:none;
padding:0;
}

.rules li{
margin:5px 0;
font-size:14px;
}

/* =========================
   RANDOM-STRING-GENERATOR
========================= */
.options{
margin:10px 0;
display:flex;
flex-direction:column;
gap:5px;
}

/* =========================
   HTTP-HEADER-VIEWER
========================= */

#headersBox{
background:#f4f4f4;
padding:15px;
margin-top:15px;
border-radius:6px;

white-space:pre-wrap;
word-wrap:break-word;

max-width:100%;
overflow-x:auto;

text-align:left;
font-size:14px;
}

/* =========================
   USER-AGENT-PARSER
========================= */

.result-box{
background:#f4f4f4;
padding:12px;
margin-top:15px;
border-radius:6px;
}

/* =========================
   IMAGE-COMPRESSION
========================= */

.drop-area{
border:2px dashed #aaa;
padding:20px;
text-align:center;
margin-bottom:15px;
border-radius:6px;
}

.preview-box{
display:flex;
gap:20px;
margin-top:15px;
flex-wrap:wrap;
}

.preview-box img{
max-width:250px;
border-radius:6px;
}

.result-box{
background:#f4f4f4;
padding:10px;
border-radius:6px;
margin-top:10px;
}

/* =========================
   IMAGE-RESIZER
========================= */

.input-group{
margin-top:10px;
}

.result-box{
background:#f5f5f5;
padding:10px;
margin-top:10px;
border-radius:6px;
}

/* =========================
   MERGE-PDF.HTML
========================= */


/* =========================
   DESIGN-OF-INDEX-LIKE-I-LOVE=PDF
========================= */