Scribd
Upload
2 views3 pages

Style

Uploaded by

batsiddh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views3 pages

Style

Uploaded by

batsiddh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

/* Import Google Fonts */

@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);
}

@media (max-width: 768px) {


#nameDesc h1 {
font-size: 2rem;
}

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);
}

You might also like