Style
Style
@import url('https://fonts.googleapis.com/css2?
family=Inter:wght@400;500;600&family=Roboto:wght@400;500;700&family=Poppins:wght@40
0;500;600&family=Nunito+Sans:wght@400;500;600&family=Montserrat:wght@400;500;700&di
splay=swap');
:root {
--text-color: #333;
--background-color: #2C2F33;
/* --background-color: whitesmoke;*/
--hover-fill-color: #007BFF;
--button-background: #007BFF;
--button-hover-background: #0056b3;
--input-background: #FFFFFF;
--border-color: #ccc;
}
.darkTheme {
--text-color: #E0E0E0;
--background-color: #2C2F33;
--hover-fill-color: #4CAF50;
--active-color: #4CAF50;
--error-color: #FF6F61;
--default-color: #FFFFFF;
--input-background: #333333;
--button-background: #1E88E5;
--button-hover-background: #1565C0;
--border-color: #444444;
--focus-border-color: #1E88E5;
--text-color-light: #FFFFFF;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif; /* Primary font for body text */
background-color: var(--background-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
.main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
padding: 20px;
}
header {
/* position: absolute;*/
margin-bottom: 2rem;
}
#nameDesc h1 {
font-family: 'Roboto', sans-serif; /* Clean, modern font for headings */
font-size: 2.5rem;
margin-bottom: 10px;
}
#nameDesc p {
font-family: 'Inter', sans-serif; /* Modern, readable font for description */
font-size: 1.25rem;
color: var(--text-color);
}
nav ul {
display: flex;
justify-content: center;
gap: 2rem;
list-style: none;
font-family: 'Poppins', sans-serif; /* Geometric, modern font for navigation */
font-weight: 500;
font-size: 1.25rem;
margin-top: 1rem;
}
nav ul li {
display: flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
transition: color 0.3s ease, text-decoration 0.3s ease;
}
nav ul li i {
font-size: 1.25rem;
}
nav ul li a:hover {
/* color: var(--hover-fill-color);*/
text-decoration: underline;
text-underline-position: under;
text-decoration-thickness: .3rem;
}
.content {
margin-top: 2rem;
}
footer {
font-family: 'Nunito Sans', sans-serif; /* Clean, modern font for footer */
margin-top: 3rem;
font-size: 1rem;
color: var(--text-color);
}
button {
background-color: var(--button-background);
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 1rem;
border-radius: 5px;
transition: background-color 0.3s ease;
font-family: 'Montserrat', sans-serif; /* Bold, stylish font for buttons */
}
button:hover {
background-color: var(--button-hover-background);
}
nav ul {
flex-direction: column;
align-items: center;
gap: 1rem;
}
nav ul li {
font-size: 1.1rem;
}
footer {
font-size: 0.875rem;
}
button {
font-size: 0.9rem;
}
}
.theme-toggle-btn {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
background-color: var(--button-background);
color: white;
border: none;
font-size: 1rem;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
z-index: 1000;
font-family: 'Montserrat', sans-serif; /* Bold font for the theme toggle button
*/
}
.theme-toggle-btn:hover {
background-color: var(--button-hover-background);
}