styles.css

/* Universal reset for margins, padding, and box-sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* General body styling */
body {
    font-family: 'Arial', sans-serif;/* Sets the font for the page */
    line-height: 1.6;/* Increases line spacing for readability */
    background-color: #f4f4f4;/* Light gray background color */
}
/* Header styling */
header {
    background-color: #ffdee3;/* Light pink background */
    border-left: 6px solid #ff4081;/* Darker pink left border */
    padding: 1rem 0;/* Vertical padding */
    text-align: center;/* Center align text */
    display: flex;/* Use flexbox for layout */
    justify-content: space-between;/* Space between items */
    align-items: center;/* Center align items vertically */
}
/* Responsive styling for smaller screens */
@media(max-width: 950px){
    header {
        background-color: #ffdee3;
        border-left: 6px solid #ff4081;
        padding: 1rem 0;
        text-align: center;
        display: flex;
        flex-direction: column;/* Stack items vertically */    
    }
    header h1 {
        margin: 0rem 1rem 0rem;/* Adjust margins */
        display: inline;/* Ensure inline display */
    }
}
/* Header title styling */
header h1 {
    margin: 0rem 1rem 0rem; /* Set margins */
    display: flex;/* Use flexbox for layout */
    justify-content: center;/* Center align items */
    align-items: center;/* Center align items vertically */
}
/* Image styling within the header */
header h1 img {
    height: 60px;/* Set height */
    width: 60px;/* Set width */
    object-fit: contain;/* Maintain aspect ratio */
}
/* Navigation styling */
nav{
    margin: 0rem 1rem 0rem;/* Set margins */
}
nav ul {
    list-style: none;/* Remove bullet points */
    padding: 0;/* Remove padding */
}

nav ul li {
    display: inline;/* Display items inline */
    margin-right: 15px;/* Space between items */
}

nav ul li a {
    color: black;/* Link color */
    text-decoration: none; /* Remove underline */
    font-weight: bold;/* Bold text */
    transition: 300ms; /* Smooth transition for hover effects */
}
nav ul li a i {
    font-size: 15px;/* Icon size */
}
/* Hover effects for navigation links */
nav ul li a:hover {
    color: #ff4081; /* Change color on hover */
}
nav ul li a i:hover {
    font-size: 15px;
    color: #ff4081;/* Change icon color on hover */
}
/* Main content styling */
main {
    padding: 20px;/* Padding for main content */
}
/* Section styling */
section {
    margin-bottom: 30px;/* Space below each section */
}

/* Section title styling */
section h2 {
    color: #333; /* Dark text color */
    font-size: 1.5rem; /* Title size */
    margin-bottom: 10px; /* Space below title */
    border-bottom: 2px solid #ff4081; /* Underline effect */
    padding-bottom: 5px; /* Space below border */
}

/* General card styling */
.card-container {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow wrapping of items */
    justify-content: space-around; /* Space items evenly */
    gap: 20px; /* Space between cards */
    margin-top: 30px; /* Space above card container */
}

/* Individual card styling */
.card {
    background-color: #f5f5f5; /* Light background color */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 20px; /* Inner padding */
    text-align: center; /* Center align text */
    width: 250px; /* Fixed width */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transitions */
}

/* Add hover effect to cards */
.card:hover {
    transform: translateY(-10px);/* Lift card on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);/* Deepen shadow */
}

/* Styling for the text inside cards */
.card a {
    font-size: 18px; /* Text size */
    color: #333; /* Text color */
    text-decoration: none; /* No underline */
    font-weight: bold; /* Bold text */
    display: block; /* Block-level element */
    margin-top: 10px; /* Space above link */
    transition: color 0.3s; /* Smooth color transition */
}

/* Add hover effect to card text */
.card a:hover {
    color: #ff4081; /* Change this color to any other color you prefer */
    
}

/* For making text look bold and emphasized */
.card a {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Font family */
    letter-spacing: 0.5px; /* Slight letter spacing */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for text */

}

/* For smooth transition of text color */
.card a:hover {
    color: #ff4081; /* Attractive hover effect */
    cursor: pointer;
}

/* Optional: making the text within the card have a subtle shadow for better visibility */
.card a {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Responsiveness for small screens */
@media (max-width: 768px) {
    .card-container {
        flex-direction: column; /* Stack cards vertically */
        align-items: center; /* Center align cards */
    }
}


/* Hacktoberfest info box styling */
.hacktoberfest-info {
    background-color: #ffebee; /* Light pink background */
    border-left: 6px solid #ff4081; /* Dark pink left border */
    padding: 20px; /* Inner padding */
    border-radius: 10px; /* Rounded corners */
    margin-top: 20px; /* Space above box */
}

.hacktoberfest-info p {
    font-size: 1.2rem; /* Font size for paragraph */
    color: #333; /* Dark text color */
}

.hacktoberfest-info h3 {
    margin-top: 20px; /* Space above heading */
    font-size: 1.4rem; /* Heading size */
    color: #ff4081; /* Pink color */
}

.hacktoberfest-info ol {
    margin-top: 10px; /* Space above list */
    padding-left: 20px; /* Indent list */
}

.hacktoberfest-info ol li {
    margin-bottom: 10px; /* Space below list items */
    font-size: 1.1rem; /* Font size for list items */
}


/* Share section */
#share{
    padding:20px;/* Inner padding */
}

.share-info {
    background-color: #fff8f1; /* Light background color */
    border: 2px solid #ff4081; /* Darker pink border */
    padding: 20px; /* Inner padding */
    border-radius: 10px; /* Rounded corners */
    text-align: center; /* Center align text */
    color: #333; /* Dark text color */
}
i{
    color: #000; /* Icon color */
    font-size: 30px; /* Icon size */
    margin: 5px; /* Space around icons */
}
.social-handles {
    font-size: 1.2rem; /* Font size for social handles */
    color: #ff4081; /* Pink color */
    margin: 15px 0; /* Space above and below */
}
/* URL input field styling */
#url-input {
    width: 80%; /* Width of input field */
    padding: 10px; /* Inner padding */
    border: 1px solid #ccc; /* Light border */
    border-radius: 5px; /* Rounded corners */
    margin-top: 10px; /* Space above input */
}

/* Button styling */
button {
    background-color: #ff4081; /* Pink background */
    color: white; /* White text */
    border: none; /* No border */
    padding: 10px 15px; /* Inner padding */
    cursor: pointer; /* Pointer on hover */
    margin-top: 10px; /* Space above button */
    border-radius: 5px; /* Rounded corners */
}
/* Hover effect for buttons */
button:hover {
    background-color: #ff6584;/* Change color on hover */
}

/* Contact Us form */
#contact{
    padding: 20px;/* Inner padding */
}
form {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    gap: 10px; /* Space between items */
}

form input, form textarea {
    padding: 10px; /* Inner padding */
    border: 1px solid #ccc; /* Light border */
    border-radius: 5px; /* Rounded corners */
}
/* Button styling within forms */
form button {
    background-color: #333; /* Dark background */
    color: white; /* White text */
    margin: auto; /* Center align */
    padding: 10px 15px; /* Inner padding */
    cursor: pointer; /* Pointer on hover */
    margin-top: 10px; /* Space above button */
    border-radius: 5px; /* Rounded corners */
    padding: 15px; /* Extra padding */
}
/* Hover effect for form buttons */
form button:hover {
    background-color: #555; /* Darker background on hover */
}

/* Back to Top button styling */
#backToTopBtn {
    position: fixed; /* Fixed position on screen */
    bottom: 30px; /* Space from bottom */
    right: 30px; /* Space from right */
    background-color: #ff4081; /* Pink background */
    color: white; /* White text */
    border: none; /* No border */
    padding: 10px 20px; /* Inner padding */
    border-radius: 50px; /* Circular button */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: background-color 0.3s, transform 1s; /* Smooth transitions */
}
/* Hover effect for Back to Top button */
#backToTopBtn:hover {
    background-color: #e91e63; /* Change color on hover */
    transform: translateY(-3px); /* Slight lift */
}

/* Active state for Back to Top button */
#backToTopBtn:active {
    transform: translateY(1px); /* Slight press down */
}