/* 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 {
    background-color: black;
    width: 1475px;
    height: 549px;
}


/* Jack Cahill, Welcome to my Website*/
/* Page background */
body{
   width: 100%;
height: 100px;
left: 165px;
color: white;
font-family: Inter;
font-size: 64px;
font-style: normal;
font-weight: 400;
line-height: normal;

}

.home-text {
    color: white;
    font-family: Inter, Arial, sans-serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.6;         /* readability */
    width: 1000px;              /* full width of container */
    max-width: 100%;          /* ignore previous limits */
    margin: 0 0 40px 0;
    text-align: left;         /* align text to left */
}

/* About Section */
.about-section {
    width: 100%;
    padding: 20px 40px;      /* spacing around text */
    box-sizing: border-box;
}

.about-text {
    color: white;
    font-family: Inter, Arial, sans-serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.6;         /* readability */
    width: 100%;              /* full width of container */
    max-width: 100%;          /* ignore previous limits */
    margin: 0 0 40px 0;
    text-align: left;         /* align text to left */
}

/* HEADER SECTION */
.site-header{
    background-color:black;
    color:white;
    text-align:center;
    padding:40px;
}

/* Title text */
.site-title{
    font-size:36px;
}

/* Subtitle */
.site-subtitle{
    font-size:40px;
    margin-bottom:30px;
}


/* NAVIGATION BAR */
.nav-list{
    list-style:none;
    display:flex;
    justify-content:center;
    gap:40px;
    padding:0;
}

.nav-list a{
    text-decoration:none;
    color:white;
    font-size:20px;
}


/* MAIN CONTENT AREA */
.main-content{

    /* baseball background image */
    background-image:url("baseball.jpg");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:space-between;

    padding:60px;
    color:white;
    
    


}


/* Left text block */
.intro-text{
    width:40%;
    font-size:22px;
}


/* Profile image on left */
.profile-image {
    width:250px;
  position: absolute;
  top: 650px;   /* distance from the top of container */
  right: 20px; /* distance from the right edge */
  border: 2px solid white; /* optional border */
  border-radius: 8px;       /* optional rounded corners */

}


/* Contact section at bottom */
.contact-info{
    background-image:url("baseball.jpg");
    background-size:cover;
    color:white;
    padding:40px;
    font-size:20px;
}


/* 
    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. 
*/
body {
    background-image: url(../_images/Background\ image.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
    padding-bottom: 10px;
    
}
nav {
position: absolute;
left: 300px;
top: 400px;
width: 1920;
height: 83px;
color: #FFF;

font-family: Inter;
font-size: 48px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

nav a {
    text-decoration: none;
    color: white;
    background-color: black;
    display: inline-block;
    margin-right: 30px;
}

nav a:hover {
    color: red;
}

h1 {
    color: white;
}

/* Remove default spacing */
body{
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
}

/* HEADER AREA */
header{
    background:black;
    color:white;
    text-align:center;
    padding:30px;
}

/* Navigation bar */
.navbar{
    list-style:none;
    display:flex;
    justify-content:center;
    gap:60px;
    padding:0;
    margin-top:20px;
}

/* Navigation links */
.navbar a{
    color:white;
    text-decoration:none;
    font-size:22px;
}

.navbar a:hover{
    text-decoration:underline;
}

/* BACKGROUND SECTION */
.gallery-section{

    background-image:url("images/baseball-background.jpg");
    background-size:cover;
    background-position:center;

    padding:60px;
    color:white;
}

/* Text above gallery */
.gallery-text{
    font-size:28px;
    max width: 100%;
    margin-bottom:40px;
}

/* Gallery grid layout */
.gallery-grid{

    display:grid;

    grid-template-columns: 1fr 1fr; /* two columns */

    gap:40px;

    max-width:900px;
}

/* Images */
.gallery-grid img{

    width:100%;
    height:auto;

    border-radius:4px;

}