/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* --------------------------------------------------------------
   Global reset & base styles
-------------------------------------------------------------- */
body, h1, ul { margin: 0; padding: 0; }

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    background-color: #cfcfcf;
    background-image: url("concrete.jpg");
}

/* --------------------------------------------------------------
   Header
-------------------------------------------------------------- */
header {
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    height: 200px;
}
.checkers {
  background-image: 
    linear-gradient(45deg, white 25%, transparent 25%),
    linear-gradient(135deg, white 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, white 75%),
    linear-gradient(135deg, transparent 75%, white 75%);
  background-size: 80px 80px;
  background-position: 0 0, 40px 0, 40px -40px, 0px 40px;
  height: 200px; /* Adjust as needed */
  width: 100%;
}  

header h1 {
  font-size: 6rem;
  font-family: "Brush Script MT";
  border-style: groove;
  border-color: #5c5c5c;
  border-width: 12px;
  border-radius: 10px;
  background-color: #cfcfcf;
  background-image: url("metalgarage.jpg");
  background-size: 100% 100%;
  color: black;
  width: 40%;
  margin: auto;
  padding: 13px 40px;
}
/* ---------------------------------------------------------------
Main Tag Formatting
------------------------------------------------------------- */
#main {
  border-style: solid;
  border-width: 3px;
  border-radius: 10px;
  width: 50%;
  background-color: white;
  box-shadow: 5px 10px black;
  margin: auto;
}
/* ---------------------------------------------------------------
Wrapper Formatting
------------------------------------------------------------- */
#wrapper {
  margin-top: 15px;
  display: flex;
}

/* --------------------------------------------------------------
   Navigation – horizontal menu
-------------------------------------------------------------- */
#nav {
  
}
nav {
    background-color: #E32636;
    width: 25%;
    border-style: solid;
    border-color: black;
    box-shadow: 5px 10px black;
    margin: auto;
}

/* Flex container makes the <li> elements line up side‑by‑side */
nav ul {
                  /* <-- key: creates a row layout */
    justify-content: center;     /* centre the whole menu */
    list-style: none;            /* remove bullet points */
}

/* No extra margin/padding on the list items themselves */
nav li {
    margin: 15px;
    border-style: solid;
    border-color: black;
    border-radius: 5px;
    text-align: center;
    background-color: #C0C0C0;
    background-image: url("ToolBoxTray.jpg");
}

/* Styling for the clickable links */
nav a {
    display: block;
    padding: 5px 5px;
    color: black;
    text-decoration: none;
    font-weight: bold;
}

/* Hover effect */
nav a:hover {
    background-color: #2ad80a;
}

/* --------------------------------------------------------------
   Main content area
-------------------------------------------------------------- */
main {
    max-width: 960px;
    margin: auto;
    padding: 15px;
}