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

body{
background:#0b0b0b;
color:#ffffff;
padding:30px;
min-height:100vh;
}

/* Container */

.container{
max-width:1300px;
margin:auto;
}

/* Title */

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

/* Top Section */

.top-section{
display:flex;
gap:25px;
margin-bottom:30px;
}

.input-box{
flex:1;
}

/* Labels */

label{
display:block;
margin-bottom:10px;
font-size:16px;
color:#ccc;
}

/* Inputs */

input,
textarea,
select{
width:100%;
padding:18px;
background:#000;
color:#fff;
border:2px solid #222;
border-radius:12px;
font-size:16px;
transition:0.3s;
}

/* Focus effect */

input:focus,
textarea:focus,
select:focus{
border-color:#ffffff;
outline:none;
box-shadow:0 0 10px rgba(255,255,255,0.1);
}

/* Rectangle Text Boxes */

textarea{
height:220px;
resize:none;
}

/* Section spacing */

.text-box{
margin-bottom:25px;
}

.language-section{
margin-bottom:25px;
}

/* Button */

button{
width:100%;
padding:18px;
background:#ffffff;
color:#000000;
border:none;
border-radius:12px;
font-size:18px;
font-weight:600;
cursor:pointer;
transition:0.3s;
margin-bottom:25px;
}

button:hover{
background:#dcdcdc;
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(255,255,255,0.1);
}

/* Translated Box */

#result{
background:#050505;
}

/* Responsive */

@media(max-width:900px){

.top-section{
flex-direction:column;
}

h1{
font-size:30px;
}

textarea{
height:180px;
}

}

/* Smooth animations */

.container{
animation:fadeIn 0.8s ease;
}

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}