* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
 
html { 
    scroll-behavior: smooth; 
} 
 
body { 
    font-family: 'Century Gothic', sans-serif; 
    line-height: 1.6; 
    color: #333; 
    background-color: #f9f9f9; 
    transition: all 0.3s ease; 
} 
 
.dark-mode { 
    color: #f9f9f9; 
    background-color: #121212; 
} 
 
.dark-mode #sidebar { 
    background-color: #1e1e1e; 
    box-shadow: 2px 0 10px #0000001a; 
} 
 
.dark-mode form,  
.dark-mode .gradient-card,  
.dark-mode #gradient-code { 
    background-color: #1e1e1e; 
} 
 
.dark-mode input[type="color"] { 
    background-color: #1e1e1e; 
    border-color: #333; 
} 
 
.dark-mode .btn { 
    background-color: #6d97e2; 
} 
 
.dark-mode #menu-toggle span,  
.dark-mode #theme-toggle svg { 
    stroke: #f9f9f9; 
} 
 
.container { 
    position: relative; 
    min-height: 100vh; 
} 
 
#sidebar { 
    position: fixed; 
    top: 0; 
    left: -180px; 
    width: 180px; 
    height: 100%; 
    background-color: #fff; 
    box-shadow: 2px 0 10px #0000001a; 
    z-index: 100; 
    transition: all 0.2s ease; 
} 
 
#sidebar.active { 
    left: 0; 
} 
 
#sidebar nav { 
    padding: 4rem 0; 
} 
 
#sidebar ul { 
    list-style: none; 
} 
 
#sidebar ul li { 
    padding: 1rem 2rem; 
} 
 
#sidebar ul li a { 
    color: inherit; 
    text-decoration: none; 
    font-weight: 400; 
    transition: all 0.3s ease; 
} 
 
#sidebar ul li a:hover { 
    color: #9e3b05; 
} 
 
#menu-toggle { 
    position: fixed; 
    top: 1.5rem; 
    left: 1.5rem; 
    z-index: 200; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    width: 30px; 
    height: 21px; 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    padding: 0; 
} 
 
#menu-toggle span { 
    width: 100%; 
    height: 3px; 
    background-color: #333; 
    border-radius: 3px; 
    transition: all 0.3s ease; 
} 
 
#theme-toggle { 
    position: fixed; 
    top: 1.5rem; 
    right: 1.5rem; 
    z-index: 200; 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    width: 30px; 
    height: 30px; 
    padding: 0; 
} 
 
#theme-toggle svg { 
    fill: none; 
    stroke: #333; 
    stroke-width: 2; 
    transition: all 0.3s ease; 
} 
 
main { 
    padding: 2rem; 
    max-width: 700px; 
    margin: 0 auto; 
} 
 
h1 { 
    text-align: center; 
    margin: 2rem 0; 
    font-size: 4rem; 
    color: #d89117; 
    letter-spacing: 1px; 
} 
 
h2 { 
    margin-bottom: 1.5rem; 
    text-align: center; 
    color: #d89117; 
} 
 
section { 
    margin-bottom: 4rem; 
    scroll-margin-top: 2rem; 
} 
 
form { 
    background-color: #fff; 
    padding: 2rem; 
    border-radius: 10px; 
    box-shadow: 0 4px 12px #0000001a; 
} 
 
.form-group { 
    margin-bottom: 1.5rem; 
} 
 
label { 
    display: block; 
    margin-bottom: 0.5rem; 
    font-weight: 600; 
    letter-spacing: 0.5px; 
} 
 
input[type="color"] { 
    width: 100%; 
    height: 50px; 
    border: 1px solid #ddd; 
    border-radius: 5px; 
    cursor: pointer; 
    background-color: #fff; 
    transition: all 0.3s ease; 
} 
 
input[type="color"]:focus { 
    outline: none; 
    border-color: #4a6da7; 
} 
 
.error { 
    color: #dc3545; 
    font-size: 0.875rem; 
    margin-top: 0.5rem; 
    display: block; 
} 
 
.btn { 
    background-color: #4a6da7; 
    color: #ddd; 
    border: none; 
    padding: 0.75rem 1.5rem; 
    border-radius: 5px; 
    cursor: pointer; 
    font-weight: 600; 
    letter-spacing: 0.5px; 
    transition: all 0.3s ease; 
} 
 
.btn:hover { 
    opacity: 0.9; 
    transform: translateY(-2px); 
} 
 
#gradient-container { 
    display: flex; 
    justify-content: center; 
    padding: 2rem 0; 
} 
 
.gradient-card { 
    max-width: 300px; 
    background-color: #fff; 
    border-radius: 15px; 
    box-shadow: 0 8px 24px #0000001a; 
    overflow: hidden; 
    transition: all 0.3s ease; 
} 
 
#gradient-preview { 
    height: 400px; 
    border: 5px solid #fff; 
    border-radius: 10px; 
    margin: 15px; 
} 
 
.dark-mode #gradient-preview { 
    border-color: #1e1e1e; 
} 
 
#gradient-code { 
    padding: 1rem; 
    background-color: #fff; 
    color: inherit; 
    font-family: century gothic; 
    font-size: 0.8rem; 
    border-top: 1px solid #ddd; 
    word-break: break-all; 
} 
 
@media (max-width: 768px) { 
    main { 
        padding: 1rem; 
    } 
     
    h1 { 
        font-size: 2rem; 
    } 
     
    form { 
        padding: 1.5rem; 
    } 
}