style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* body */
body{
    background-color: #E6ECF7; /* Link Water */
}

/* Main Top Heading */
/* Adding basic styles for the header */
.sticky-header {
    position: sticky;
    top: 0;
    background-color: #E6ECF7; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /*  subtle shadow for better visibility */
    z-index: 100; /* Ensuring the header appears above other content */
}

/* Styling the header text  */
.main_text {
    padding: 30px;
    text-align: center;
}

.welcome {
    font-size: 36px; /*  font size */
    margin: 0;
    color: #007BFF; /* Text color */
    font-family: 'Roboto', sans-serif; /* font style */
    font-weight: bold; /*  bold style   */
    text-transform: uppercase; /* Uppercase text   */
    letter-spacing: 1px; /*  letter spacing for readability */
}

/* Dropdown */

/* Centered Dropdown Container */
.dropdown-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px; /* Adjust the margin  */
}

/* Styling the Dropdown Form */
.dropdown_form {
    text-align: center;
}

/* Styling the Location Label */
label {
    font-size: 33px; /* Adjust font size  */
    font-weight: bold;
    color: dodgerblue; /* text color */
    font-family: 'Montserrat', sans-serif; /* font style */
    margin-top: 5px;
}

/* Styling the Dropdown Select */
select {
    font-size: 16px; /* font size */
    font-weight: bold;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-top: 8px;
    background-color: #F4F4F4; /* Change the background color */
    color: #333; /* Change the text color */
    font-family: 'Montserrat', sans-serif; /* Change the font style */
    margin-left: 5px; /* Adjust as needed for gap */
}

/* Styling the Submit Button */
input[type="submit"] {
    background-color: #0deded; /* Button background color */
    color: #fff; /* Button text color */
    font-size: 18px; /* Adjust font size */
    font-family: 'Montserrat', sans-serif;
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 12px;
    margin-left: 10px; /* Adjust as needed for gap */
}

input[type="submit"]:hover {
    background-color: #2980b9; /* Hover color */
}


/* Weather Box Styling */
.weather-box {
    position: relative;
    margin: 40px auto; /* Center horizontally */
    max-width: 50%;
    text-align: center;
    border-radius: 10px;
    padding: 20px;
    background-color: #f0f0f0; /* Background color */
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.3); /*rgba(30,144,255,0.3) Box shadow for all sides */
}

/* Weather Heading Styling */
.weather-heading {
    font-size: 24px;
    color: #007BFF; /* Text color */
    margin: 0 0 20px; /* Spacing below the heading */
}

/* Weather Info Styling */
.weather-info {
    font-size: 18px;
    color: #333; /* Text color */
}

/* Weather Property Styling */
.weather-property {
    margin: 10px 0; /* Adjusting the line spacing between properties */
}

/* Property Label Styling */
.property-label {
    font-weight: bold;
    color: #444; /* Text color for labels */
}

/* Property Value Styling */
.property-value {
    font-weight: normal;
    color: #555; /* Text color for values */
}

/* Greeting Text  */
/* Styling for the user-location text */
.user-location {
    font-family: Arial, Helvetica, sans-serif; /* Choose an appropriate font family */
    font-size: 30px; /* Adjust the font size */
    font-weight: bold; /* Make the text bold */
    color: #333; /* Set the text color to a dark color */
    text-align: center; /* Center-align the text */
    margin-top: 35px; /* Add a margin at the top to create space */
  }
  
  /* Styling for the city name within the user-location text */
  #city-name {
    /* text-decoration: underline; Add underline to the city name */
    color: #007BFF; /* Use a different color for the city name, e.g., blue */
    /* border: 5px solid #007BFF; */
  }

  /* Define a min-height for the wrapper to push the footer down */
.wrapper {
    min-height: calc(100vh - 2 * (10px + 20px)); /* Adjust for your header and footer padding/margin */
  }
  
  /* Styles for your main content area */
  /* .main {
     existing styles for .main
  } */
  
  /* Styles for the footer */
.footer {
    background-color: #000; /* Black background color */
    color: #fff; /* White text color */
    padding: 20px 0; /* Adjusting the padding for spacing and increase the height */
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex; /* Used flexbox to arrange items horizontally */
    justify-content: space-between; /* Added space between items */
  }
  
  .footer-left{
    margin-left: 15px;
  }
  .footer-center{
    text-align: center;
  }
  .footer-right {
    margin-right: 20px; /* Added right margin for spacing */
  }

  .footer a {
    color: #fff; /* White text color for the link */
    font-size: 20px;
    letter-spacing: 1px;
    text-decoration: none; 
    height: 30px; /* height of the link */
    display: inline-block; /* link has the height */
    font-weight: 600; /* Font weight for feedback and contribute */
    transition: color 0.3s ease; /* Added a smooth color transition */
  }
  
  .footer a:hover {
    background-color: rgba(30,144,255,0.9);
    padding: 2px 1px;
    border-radius: 10px;
    text-decoration: none; 
  }

  /* Share button */
  .share-button {
    position: absolute; /* Position relative to the weather box */
    top: 0; /* Align with the top edge of the weather box */
    right: 0; /* Align with the right edge of the weather box */
    /* background-color: #007BFF; Button background color */
    color: #fff; /* Button text color */
    font-size: 30px; /* Adjust font size */
    font-family: 'Montserrat', sans-serif;
    padding: 5px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
 /* Media query for screens with a maximum width of 768px */
@media screen and (max-width: 1000px) {
    .weather-box {
      max-width: 90%; /* Increase the maximum width for smaller screens */
    }
  }