body{
    margin:0;
    font-family: Arial, sans-serif;
    background:#eef2f7;
    transition:0.4s;
}

header{
    background:linear-gradient(to right,#004080,#00aaff);
    color:white;
    padding:25px;
    text-align:center;
}

nav{
    background:#00264d;
    padding:15px;
    text-align:center;
}

nav a{
    color:white;
    text-decoration:none;
    margin:15px;
    font-weight:bold;
}

nav a:hover{
    color:#00ccff;
}

main{
    padding:40px;
}

section{
    background:white;
    padding:25px;
    margin-bottom:30px;
    border-radius:10px;
    box-shadow:0 0 10px rgba(0,0,0,0.2);
}

.box-blue{
    background:#d9f2ff;
    padding:15px;
    border-left:5px solid #007acc;
}

.box-green{
    background:#e6ffe6;
    padding:15px;
    border-left:5px solid #00cc66;
}

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

table, th, td{
    border:1px solid #333;
body{
    margin:0;
    font-family: 'Segoe UI', sans-serif;
    background:linear-gradient(to right,#e3f2fd,#ffffff);
    transition:0.4s;
}
}

header{
    background:linear-gradient(to right,#0d47a1,#1976d2);
    color:white;
    padding:30px;
    text-align:center;
}

nav{
    background:#0d47a1;
    padding:15px;
    text-align:center;
}

nav a{
    color:white;
    text-decoration:none;
    margin:15px;
    font-weight:bold;
    font-size:18px;
}

nav a:hover{
    color:#ffeb3b;
}

main{
    padding:40px;
}

.grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.grid-3{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:25px;
}

.card{
    background:white;
    padding:25px;
    border-radius:15px;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

.blue{
    background:#e3f2fd;
    border-left:8px solid #1976d2;
}

.green{
    background:#e8f5e9;
    border-left:8px solid #2e7d32;
}

.orange{
    background:#fff3e0;
    border-left:8px solid #ef6c00;
}

img{
    body{
margin:0;
font-family:'Segoe UI',sans-serif;
background:#f4f6f9;
}
}

.hero{
height:100vh;
background:url('https://upload.wikimedia.org/wikipedia/commons/3/3c/Organic_molecules.jpg') center/cover;
display:flex;
align-items:center;
justify-content:center;
color:white;
text-align:center;
}

.hero h1{
font-size:50px;
background:rgba(0,0,0,0.6);
padding:20px;
border-radius:15px;
}

nav{
background:#0d47a1;
padding:15px;
text-align:center;
}

nav a{
color:white;
margin:15px;
text-decoration:none;
font-weight:bold;
}

nav a:hover{
color:#ffeb3b;
}

main{
padding:40px;
}

.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
margin-bottom:40px;
}

.card {
    padding: 25px;
    margin: 25px 0;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}

.blue { background: linear-gradient(135deg, #1e88e5, #1565c0); }
.green { background: linear-gradient(135deg, #43a047, #2e7d32); }
.orange { background: linear-gradient(135deg, #fb8c00, #ef6c00); }
.purple { background: linear-gradient(135deg, #8e24aa, #6a1b9a); }
.red { background: linear-gradient(135deg, #e53935, #b71c1c); }

img{
width:100%;
border-radius:10px;
}

button{
padding:12px 25px;
background:#ff9800;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}

.correct{color:green;font-weight:bold;}
.wrong{color:red;font-weight:bold;}
.card {
padding: 20px;
margin: 20px 0;
border-radius: 10px;
color: white;
}

.blue { background: #1e88e5; }
.green { background: #43a047; }
.orange { background: #fb8c00; }
.purple { background: #8e24aa; }
.red { background: #e53935; }

.image-card {
background: white;
padding: 10px;
}


.table-card {
    background: white;
    color: black;
}

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

.modern-table thead {
    background: #1e88e5;
    color: white;
}

.modern-table th, 
.modern-table td {
    padding: 12px;
    text-align: center;
}

.modern-table tbody tr:nth-child(even) {
    background: #f5f5f5;
}

.modern-table tbody tr:hover {
    background: #e3f2fd;
    transition: 0.3s;
}

footer {
    background-color: #00264d;
    color: white;
    text-align: center;
    padding: 15px;
    margin-top: 40px;
    font-size: 14px;
}