/* Import modern font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Inter',sans-serif;
background:linear-gradient(135deg,#0f172a,#1e293b);
color:white;
min-height:100vh;
padding:40px;
}

/* Title */

h1{
text-align:center;
font-size:40px;
margin-bottom:30px;
letter-spacing:1px;
}

/* Buttons container */

.buttons{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:15px;
margin-bottom:40px;
}

/* Buttons */

button{
padding:12px 26px;
border-radius:12px;
border:none;
font-size:15px;
font-weight:500;
cursor:pointer;
color:white;
background:linear-gradient(135deg,#3b82f6,#6366f1);
box-shadow:0 8px 20px rgba(0,0,0,0.4);
transition:all 0.3s ease;
}

button:hover{
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(0,0,0,0.6);
background:linear-gradient(135deg,#2563eb,#4f46e5);
}

/* Document viewer */

#viewer{
background:rgba(255,255,255,0.08);
backdrop-filter:blur(10px);
border-radius:20px;
padding:35px;
max-width:1000px;
margin:auto;
line-height:1.7;
font-size:16px;
box-shadow:0 20px 60px rgba(0,0,0,0.4);
border:1px solid rgba(255,255,255,0.1);
}

/* Scrollable content */

#viewer{
max-height:600px;
overflow-y:auto;
user-select:text;
}

/* Scrollbar */

#viewer::-webkit-scrollbar{
width:8px;
}

#viewer::-webkit-scrollbar-thumb{
background:#6366f1;
border-radius:10px;
}

/* Responsive */

@media(max-width:768px){

h1{
font-size:28px;
}

button{
width:100%;
}

#viewer{
padding:20px;
}

}