/* 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;
}

/* 
    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 {
    color: #FFF;
font-family: "Irish Grover";
font-size: 96px;
font-style: normal;
font-weight: 400;
line-height: normal;


color: #FFF;
font-family: "Irish Grover";
font-size: 64px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;

color: #F5F5F5;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
font-family: Inter;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: normal;


    border: 1px solid rgba(0, 0, 0, 0.00);
background: #000000;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.00);


}

body { background-image: url(../_images/47717-reuben-sandwich-ii-mike-phillips-b77c676e6aaf45e280d34e0c668d8f2f.webp) lightgray 50% / cover no-repeat;
}

/*  
    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: rgb(0, 127, 40);}
#wrapper {
    
    margin: 0 auto;
    width: 1080px;
    min-height: 1920px;
    position: relative;
}


#header-text { color: #FFF;
font-family: "Irish Grover";
font-size: 64px;
font-style: normal;
font-weight: 400;
line-height: normal;}


/* The body controls the whole page */
body{
    margin:0;                 /* Removes default browser spacing */
    font-family: Arial, sans-serif;
}


/* HEADER STYLE */
header{
    background-color:#0f5c17;   /* Dark green background */
    text-align:center;          /* Centers all text */
    padding:20px;               /* Adds space inside header */
    color:white;                /* Makes text white */
}


/* MAIN NAME */
h1{
    font-family: 'Uncial Antiqua', serif; /* Decorative font */
    font-size:48px;
    margin:0;
}


/* SUBTITLE */
h2{
    font-family: 'Uncial Antiqua', serif;
    font-size:42px;
    margin:10px 0 20px 0;
}


/* NAVIGATION BAR */
nav ul{
    list-style:none;     /* Removes bullet points */
    padding:0;
    margin:0;
}


/* NAVIGATION LINKS IN A ROW */
nav ul li{
    display:inline-block;  /* Makes the links line up horizontally */
    margin:0 25px;
}


/* STYLE OF THE LINK TEXT */
nav ul li a{
    text-decoration:none;  /* Removes underline */
    color:white;
    font-family: 'Uncial Antiqua', serif;
    font-size:24px;
}


/* Hover effect when mouse goes over links */
nav ul li a:hover{
    color:#d4ffd4;   /* Light green highlight */
}