@media screen and (max-width: 600px) {
    /* CSS for mobile devices */
    body {
        font-size: 14px; /* Slightly smaller font size for better readability on smaller screens */
    }
    .navbar li {
        display: block; /* Stack navigation items vertically on smaller screens */
        padding: 10px; /* Less padding for navigation items on smaller screens */
    }
    .image img {
        width: 100%; /* Make images responsive and take full width on smaller screens */
        height: auto; /* Maintain aspect ratio of images */
    }
}
/* CSS for the website */
/* Importing the Roboto font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*{
    margin: 1%;
    padding: 1%;
    box-sizing: border-box;
}
body{
    background-color:hsl(210, 30%, 58%); /* Light blue background for the entire page */
    text-align: center; // Center-aligning text for the entire page */
    font-family: roboto, sans-serif; /* Using the imported Roboto font for the entire page */
    line-height: 0.3in; /* Adjusting line height for better readability */
}
header{
    background-color:  darkgray; /* Light gray background for the header */
    color: white; /* White text color for the header */
    padding: 20px;
}
.navbar li{
    padding: 20px;
    display: inline; /* Displaying navigation items inline for a horizontal menu */
    gap:20%;
}

nav ul li a{
    font-weight: bold;
    color:white; /* White text color for navigation links */
    transition:0.2s;
}
nav ul li a:hover{
    color:brown; /* Changing link color to brown on hover for better interactivity */
}
main h1{
     color:brown;
}
main p{
    color:lightblue;
}
.image img{
    margin:20px 0;
    padding:10;
    border-radius: 20%;
    border: 4px ,dotted ,
}
.section1 section{
    margin: 60px;
    padding: 40px;
    border-radius: 50%;
    border-style: ridge;
    background-color: black; 
}
.section2 section{
    margin: 60px;
    padding: 40px;
    border-radius: 50%;
    border-style: ridge;
    background-color: black;
}
.section4 section{
    margin: 60px;
    padding: 40px;
    border-radius: 50%;
    border-style: ridge;
    background-color: black;
}

table{
    padding: 20px;
    margin-left:auto;
    margin-right: auto;
    background-color: black; /* Black background for tables to create a strong contrast with the text and make it visually appealing */
}
th{
    color:red; /* Red text color for table headers to make them stand out against the black background */
}
tr{
    color:lightblue; /* Light blue text color for table rows to maintain a consistent color scheme and enhance readability against the black background */
}
.section4 section form{
    color: beige; /* Beige text color for form elements in section 4 to create a softer contrast against the black background and improve readability */
}