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

body{
font-family:Arial, Helvetica, sans-serif;
background:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/background.jpg");
background-size:cover;
background-position:center;
color:#333;
}

header{
background:#2f2f2f;
color:white;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 20px;
text-shadow:1px 1px 3px black;
}

.nav-links{
display:flex;
}

.nav-links a{
color:white;
text-decoration:none;
margin-left:20px;
transition:0.3s;
}

.nav-links a:hover{
color:#00bfff;
}

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


.card{
background:rgba(255,255,255,0.9);
padding:30px;
border-radius:10px;
box-shadow:0 3px 10px black;
}

.row{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.col{
flex:1;
}

img{
width:100%;
max-width:250px;
border-radius:10px;
box-shadow:2px 2px 8px black;
}

ul{
list-style:square;
margin-left:20px;
}

table{
width:100%;
border-collapse:collapse;
margin-top:15px;
}

th,td{
border:1px solid black;
padding:8px;
text-align:center;
}

form{
display:flex;
flex-direction:column;
gap:10px;
}

input, textarea{
padding:10px;
border-radius:5px;
border:1px solid #ccc;
}

button{
padding:10px;
background:#28a745;
color:white;
border:none;
border-radius:5px;
cursor:pointer;
transition:0.3s;
}

button:hover{
transform:scale(1.05);
}

.scroll-box{
max-height:100px;
overflow:auto;
border:1px solid black;
padding:10px;
margin-top:10px;
}

.project-box{
background:#eee;
padding:15px;
margin:10px 0;
border:1px solid #ccc;
transition:0.3s;
}

.project-box:hover{
transform:scale(1.03);
}

summary{
cursor:pointer;
font-weight:bold;
}

details{
margin-top:10px;
}

details[open]{
background-color:#f0f0f0;
padding:10px;
border-radius:5px;
}

footer{
text-align:center;
padding:10px;
margin-top:20px;
background:rgba(0,0,0,0.7);
color:white;
}


@media(max-width:768px){

header{
flex-direction:column;
align-items:center;
gap:10px;
}

.nav-links{
flex-direction:column;
width:100%;
}

.nav-links a{
display:block;
width:100%;
text-align:center;
padding:12px;
margin:0;
border-top:1px solid rgba(255,255,255,0.2);
}

.container{
width:95%;
margin:20px auto;
}

.row{
flex-direction:column;
}

img{
max-width:100%;
}

}