styles.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Matemasie&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Grey+Qo&family=Matemasie&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Bungee+Tint&family=Grey+Qo&family=Matemasie&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');




#about .robo {
    font-family: roboto;
   border : solid #4ef021;
   color :red;
}
.Mate {
    font-size: 4rem; /* Large font size for emphasis */
    background: linear-gradient(90deg, #ff7e5f, #feb47b); /* Gradient color */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Makes the text take the gradient color */
    text-align: center; /* Center the text */
    font-weight: bold; /* Make the text bold */
    letter-spacing: 3px; /* Increase spacing between letters */
    text-transform: uppercase; /* Make all letters uppercase */
    margin: 2rem 0; /* Add some margin around the heading */
}
#about .bun {
    font-family: Bungee Tint    ;
   
   color :rgb(238, 4, 211);
}

.mimo {
    font-size: 4rem; /* Large font size for emphasis */
    background: linear-gradient(90deg, #08b9ef, #213af6); /* Gradient color */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Makes the text take the gradient color */
    text-align: center; /* Center the text */
    font-weight: bold; /* Make the text bold */
    letter-spacing: 3px; /* Increase spacing between letters */
    text-transform: uppercase; /* Make all letters uppercase */
    margin: 2rem 0; /* Add some margin around the heading */
}
.mima {
    font-size: 4rem; /* Large font size for emphasis */
    background: linear-gradient(90deg, #f60404, #8109f9); /* Gradient color */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Makes the text take the gradient color */
    text-align: center; /* Center the text */
    font-weight: bold; /* Make the text bold */
    letter-spacing: 3px; /* Increase spacing between letters */
    text-transform: uppercase; /* Make all letters uppercase */
    margin: 2rem 0; /* Add some margin around the heading */
}


#about .popo {
    font-family: Poppins;
   border : solid #fa0b0b;
   color :rgb(9, 240, 71);
}
#about .Grey{
font-family: Grey Qo;
border : solid #d307f7;
   color :rgb(244, 187, 0);
}

#about .Mate{
    font-family: Matemasie;
    border : solid #f402d8;
    color :rgb(11, 19, 246);
    text-align: center; /* Center the text */
    margin-bottom: 2rem; /* Example bottom margin */
    animation: fadeInUp 1.5s ease-out; /* Example animation */
    letter-spacing: 2px; /* Example letter spacing */
    text-transform: uppercase; /* Example text transformation */
}
#about .Mate2{
    font-family: Matemasie;

    color :rgb(11, 19, 246);
    text-align: center; /* Center the text */
    margin-bottom: 2rem; /* Example bottom margin */
    animation: fadeInUp 1.5s ease-out; /* Example animation */
    letter-spacing: 2px; /* Example letter spacing */
    text-transform: uppercase; /* Example text transformation */
}
 

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

/* Body Styling */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #080000;
    color: #0a01017d;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Navbar Styling */
.navbar {
    background-color: #011301;
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}
.navbar a {
    color: #f5f5f5;
    text-decoration: none;
    padding: 1rem;
    margin: 0 1rem;
    font-size: 1.4rem;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.navbar a:hover {
    color:#f5f5f5(340, 100%, 63%, 0.993);
}

/* Section Styling */
.section {
    padding: 6rem 2rem;
    margin-top: 5rem;
    background-color: #141414;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    margin-bottom: 4rem;
}

/* Home Section */
#home {
    background: linear-gradient(to right, #673ab7, #512da8);
    color: #fff;
    padding: 12rem 2rem;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}

#home::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 64, 128, 0.405), transparent 70%);
    animation: rotate 20s linear infinite;
    z-index: 0;
}

#home h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
    z-index: 1;
    position: relative;
    animation: fadeInUp 1s ease-out;
}

#home p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    position: relative;
    animation: fadeInUp 1.5s ease-out;
}

#home iframe, #home img {
    margin: 2rem 0;
    border-radius: 8px;
    max-width: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 2s ease-out;
    z-index: 1;
    position: relative;
}

/* About Section */
#about {
    background: #1c1c1c;
    color: #e0e0e0;
}

#about h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    animation: fadeInUp 1s ease-out;
}

#about p {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 1.5s ease-out;
}

/* Work Section */
#work {
    background: #252525;
    color: #fff;
}

#work h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: #ff4081;
    animation: fadeInUp 1s ease-out;
}

#work ul {
    list-style: none;
}

#work li {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #333;
    border-radius: 8px;
    animation: fadeInUp 1.5s ease-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
}

#work li:hover {
    transform: scale(1.05);
}

/* Resume Section */
#resume {
    background: #1c1c1c;
    color: #e0e0e0;
}

#resume h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: #ff4081;
    animation: fadeInUp 1s ease-out;
}

#resume p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    animation: fadeInUp 1.5s ease-out;
}

#resume img {
    width: 100%;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 2s ease-out;
}

/* Contact Section */
#contact {
    background: #252525;
    color: #fff;
}

#contact h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    animation: fadeInUp 1s ease-out;
}

#contact form {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    animation: fadeInUp 1.5s ease-out;
}

#contact label {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

#contact input, #contact textarea {
    width: 100%;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    border: 1px solid #444;
    background-color: #1a1a1a;
    color: #fff;
    transition: border-color 0.3s ease;
}

#contact input:focus, #contact textarea:focus {
    border-color: #ff4081;
}

#contact input[type="submit"] {
    background-color: #ff4081;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#contact input[type="submit"]:hover {
    background-color: #e91e63;
}

/* Footer Styling */
footer {
    background-color: #1a1a1a;
    color: #f5f5f5;
    padding: 3rem;
    text-align: center;
    margin-top: 3rem;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.5);
}

footer p {
    font-size: 1.2rem;
}

/* Animations */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
    }
    
    .navbar a {
        margin: 0.5rem 0;
    }
    
    #home h1 {
        font-size: 2.5rem;
    }
    
    #home p {
        font-size: 1.2rem;
    }
    
    #about p, #work li {
        font-size: 1.2rem;
    }
}