/* Starter Stylesheet for our project.
-----------------------------------------------
Please read the comments to understand what
this code does. 

Refer to w3schools.com for help
-----------------------------------------------
*/

/*  This removes the default browser settings */
* {
    margin: 0; 
    padding: 0;
}

/*  
    This sets the outer container for your site.
    To use it, you will need to create division tag
    to hold the content. Give it an id="wrapper".
    I would look like this...
        <div id="wrapper">
    Put this division right after the body tag
    and close it right before the close of the body tag
*/

/*Background Picture*/
body {
    background-image: url(../_images/Abstract.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
    padding-bottom: 10 px;
    width: 1400 px;
}


/* Patrick Bova, Welcome to my Website */
#header-text{
width: 409px;
height: 76px;
color: #000;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
font-family: Inter;
font-size: 64px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

#header-text1{
    width: 564px;
height: 62px;
color: #000;
font-family: Inter;
font-size: 48px;
font-style: normal;
font-weight: 500;
line-height: normal;
}

#header-bkg{
    width: 1600px;
    height: 150px;
    background: #F5F5F5;

}

#wrapper {
   
    margin: 0 auto;
    width: 1080px;
    min-height: 1920px;
    position: relative;
}

footer {
    position:absolute;
    bottom: opx;
    height: 25px;
    width: 100%;
    color: black;
    background-color: grey;
}

/* 1. The Header Container */
#header-bkg {
  background-color: #1a73e8; /* The blue from your screenshot */
  padding: 60px 20px;       /* Adds space at top/bottom for that 'hero' look */
  
  /* FLEXBOX MAGIC STARTS HERE */
  display: flex;            /* Turns on the flexible layout engine */
  flex-direction: column;   /* Stacks children (H1, H2, Nav) vertically */
  align-items: center;      /* Centers items horizontally (Left-to-Right) */
  justify-content: center;  /* Centers items vertically (Top-to-Bottom) */
  text-align: center;       /* Ensures the text itself is centered */
}

/* 2. Styling the Text */
#header-text {
  margin: 10px 0;           /* Adds a little breathing room between lines */
  font-family: Arial, sans-serif;
  color: white;             /* Changed to white for better contrast on blue */
}

h1#header-text {
  font-size: 48px;
  font-weight: 800;
}

h2#header-text {
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 30px;      /* Pushes the nav bar down a bit */
}

/* 3. The Navigation Bar */
nav {
  display: flex;            /* Makes the links sit in a row */
  gap: 30px;                /* Puts equal space between each link */
}

nav a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 18px;
}

nav a:hover {
  text-decoration: underline; /* Visual cue for the user */
}
/* 
    The is the syntax to set a background image.
    Copy the 2 styles below and put them in the tag
    you want to add a background image to. 
    Then, change the image to your image. 
*/
backgroundSample {
    background-image: url(../_images/bkg_main.png);
    background-repeat: no-repeat;
}