/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url('num.gif'); /* Replace with your GIF's path or URL */
  background-size: auto; /* Scales the GIF to cover the entire element */
  background-repeat: repeat; /* Prevents the GIF from repeating */
  background-position: center center; /* Centers the GIF horizontally and vertically */
  height: 100vh; /* Ensures the body takes up the full viewport height */
  margin: 0; /* Removes default body margin */
}

/* Styles for screens smaller than 768px */
@media only screen and (max-width: 767px) {
    body {
        font-size: 14px;
    }
    .container {
        width: 90%;
    }
}

/* Styles for screens larger than or equal to 768px */
@media only screen and (min-width: 768px) {
    body {
        font-size: 16px;
    }
    .container {
        max-width: 960px;
    }
}

#banner {
 background-color: green;
 width: 1284px;
 height: 130px;
 position: absolute;
 top: 10px;
 left: 318px;
 border-radius: 5px;
}

#welcome{
  background-color: grey;
  width: 733px;
  height: 895px;
  position: absolute;
  top: 150px;
  left: 588px;
  border-radius: 5px;
  border: 5px ridge grey;
}

#nav{
 background-color: grey;
 width: 255px;
 height: 405px;
 position: absolute;
 top: 150px;
 left: 318px;
 border-radius: 5px;
 border: 5px ridge grey;
}

#updates{
 background-color: grey;
 width: 255px;
 height: 410px;
 position: absolute;
 top: 570px;
 left: 318px;
 border-radius: 5px;
 border: 5px ridge grey;
}

#calender{
  background-color: grey;
  width: 255px;
  height: 410px;
  position: absolute;
  top: 150px;
  left: 1337px;
  border-radius: 5px;
  border: 5px ridge grey;
}

#footer{
 background-color: green;
 width: 1284px;
 height: 50px;
 position: absolute;
 bottom: -168px;
 left: 318px;
 border-radius: 5px;
 }