/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your HTML content. */

body {
    margin: 0;
    padding: 0;
    background-image: url('background-tile.png'); 
    background-repeat: repeat; 
    min-height: 100vh; /* Forces page to take up full screen height */
    position: relative;
    
    /* Turn the body into a flex container to push the footer down */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns items to the top; no forced gaps! */
    
}

.navbar {
  margin: 0;
  display: block;
  background-color: #2897FA;
  
  position: fixed;
  top: 0;
  left: 0;
  
  width: 100%;
  
  height: 60px; 
  
  overflow: auto; 
}


.header-image {
    width: 100%;
    height: 697px;              
    background-image: url("computer.png");
    background-repeat: no-repeat;
    background-position: center top; 
    margin-top: 100px; 
}

.content {
  flex: 1; /* Automatically grows to push the banner to the absolute bottom */
}

p {
  color: blue;
}

.text-box {
  /* Dimensions */
  max-width: 800px;       /* Keeps the box from getting too wide */
  width: 100%;            /* Allows the box to shrink on small screens */
  
  /* Spacing */
  padding: 20px;          /* Inner space between text and the border */
  margin: 20px 400px;      /* Outer space; "auto" centers the box on the page */
  
  /* Styling */
  background-color: #ffffff; /* White background */
  border: 8px solid #333333; /* Dark gray border line */
  border-radius: 2px;     /* Rounds the corners slightly */
  
  /* Text Control */
  color: #333333;         /* Dark text color */
  line-height: 0.1;       /* Adds space between lines of text for easy reading */
  
  box-shadow: 0 4px 8px rgba(0,0,0,1);
}

.footer-banner {
  background-image: url('base.png'); 
  background-repeat: repeat-x; 
  background-size: auto 350px; /* Adjust 150px to change how big the bridge looks */
  height: 350px;               /* Match this number to the background-size height */
  width: 100%;
  display: block; 
  filter: drop-shadow(0px 0px 8px rgba(214, 199, 255, 1));
}