/* Example of how to import fonts from Google Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;700;800&display=swap'); */

/* Variable Colors */
:root {
  --color-white: #ffffff;
  --color-topnav: #333;
  --color-black: #000000;
  --color-topnav-button: #f2f2f2;
  --cool-color-background: #f2f3f7;
  --warm-color-background: rgb(242, 241, 241);
  --info-color: #daedfc;
  --alert-color: #fcf1da;
}

/* A couple notes:
1. Please do not create styles on the main html pages. If you want to add styles, just create a new css file and import it.
2. I already implemented .background-div class in ezcheckprinting. I figured out how to get the picture to display better
3. If you are needing to set a style for an html tag, just create a new css class. */

/* Style for the top menu */
.topnav {
  overflow: hidden;
  background-color: var(--color-topnav);
}

.topnav a {
  float: left;
  display: block;
  color: var(--color-topnav-button);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color: #ddd;
  color: var(--color-black);
}

/* Style for the dropdown menu */
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  margin: 0;
  cursor: pointer;
  /* Added cursor pointer */
}

/* Style for the dropdown menu */
.dropdown-content {
  display: none;
  /* Hide dropdown by default */
  position: absolute;
  background-color: #333;
  padding: 10px;
  z-index: 10;
  min-width: 600px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  /* Grid Layout */
  grid-template-columns: repeat(3, 1fr);
  /* 3 columns */
  grid-gap: 20px;
  /* Space between columns */

  align-items: start;
}

/* Style for each dropdown section */
.dropdown-section {
  display: flex;
  flex-direction: column;
  /* Stack links vertically */

  align-self: start;
}

.dropdown-subheading {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-topnav-button);
  background-color: var(--color-topnav);
  border-bottom: 1px solid #444;
}

.dropdown-section a {
  color: white;
  padding: 8px 0;
  text-decoration: none;
  display: block;
  font-size: 14px;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown on hover */
.dropdown:hover .dropdown-content {
  display: grid;
  /* Show dropdown as grid */
}

/* Define which column each section lives in */
.column-1 {
  grid-column: 1 / 2;
}

.column-2 {
  grid-column: 2 / 3;
}

.column-3 {
  grid-column: 3 / 4;
}

.column-4 {
  grid-column: 4 / 5;
}

.column-5 {
  grid-column: 5 / 6;
}

/* Responsive Design: Stack sections vertically on smaller screens */
@media (max-width: 768px) {
  .dropdown-content {
    grid-template-columns: 1fr;
    /* Stack all sections in one column */
    grid-gap: 10px;
  }
}

/* Style internal page content width display */
.w3-container-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* Style for other sections */
.white-section,
.cool-color-section,
.warm-color-section,
.alert-color-section,
.info-color-section,
.primary-color-background {
  padding: 15px;
}

.white-section {
  background-color: var(--color-white);
}

.cool-color-section {
  background-color: var(--cool-color-background);
}

.warm-color-section {
  background-color: var(--warm-color-background);
}

.alert-color-section {
  background-color: var(--alert-color);
}

.info-color-section {
  background-color: var(--info-color);
}

.primary-color-section {
  background-color: var(--color-primary);
  color: var(--color-white);
}