/* 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
*/
#header-text{ 
color: #F6FDFD;
font-family: Jaini;
font-size: 80px;
font-style: normal;
font-weight: 400;
line-height: normal;
}


body {
    background-image: url(../_images/5e1618b1669a013872630facebd784b6225010a1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-bottom: 10px;
    width: 1400px;
}

header {
    background-color:#6B9EEF; 
}

#wrapper {
    position: relative;
    margin: 0 auto;
    width: 100px;
    background-color: bisque;
    color: white;
}

/* 
    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. 
*/


/* index description of me on home page */

/* Applies to the whole page */
body {
  margin: .5; /* removes default spacing */
  font-family: 'Chewy', cursive; /* playful font */
}


/* HEADER (top section) */
header {
  background-color: #6d93cf; /* blue background */
  color: white; /* white text */
  text-align: center; /* center everything */
  padding: 60px 20px; /* space inside header */
}


/* MAIN TITLE (h1 inside header) */
header h1 {
  font-size: 72px; /* big title */
  margin: 0; /* remove default spacing */
}


/* SUBTITLE (paragraph inside header) */
header p {
  font-size: 36px; /* smaller text */
  margin: 10px 0 40px; /* spacing above and below */
  color:purple;
}


/* NAVIGATION BAR */
nav {
  display: flex; /* makes links go in a row */
  justify-content: center; /* centers them */
  gap: 80px; /* space between links */
  flex-wrap: wrap; /* allows wrapping on small screens */
}


/* NAV LINKS */
nav a {
  color: white; /* text color */
  text-decoration: none; /* removes underline */
  font-size: 28px; /* link size */
  transition: 0.3s; /* smooth hover effect */
  display: inline-block;
}


/* HOVER EFFECT */
nav a:hover {
  opacity: 0.7; /* fade when hovered */
  Color: rgb(15, 48, 215);
}