/* =========================================
   [dot] dama — GRAPHICS PAGE CSS
   ========================================= */

body {
  margin: 0;
  padding: 20px;

  background-image: url("https://file.garden/aU7jzwg-fiDMgePf/23fca70851881646d7897ab44442f1cb.jpg");
  background-repeat: repeat;
  background-attachment: fixed;

  color: white;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}



/* =========================================
   LINKS
   ========================================= */

a {
  color: white;
  text-decoration: underline;
}

a:hover {
  color: #ff00ff;
}


/* =========================================
   MAIN LAYOUT
   ========================================= */

.layout {
  max-width: 1000px;
  margin: 0 auto;

  background-image: url("https://i.pinimg.com/originals/aa/1e/ca/aa1eca9c8f249778958e8e1d410e0b47.gif");
  background-repeat: repeat;
  background-attachment: fixed;

  border: 2px solid magenta;
}


/* =========================================
   HEADER
   ========================================= */

header {
  background-color: #000;
  border-bottom: 2px solid magenta;
}

.header-content {
  padding: 15px 20px;
}

.header-title {
  color: white;

  font-size: 28px;
  font-weight: bold;

  text-align: center;

  margin-bottom: 10px;
}


/* =========================================
   NAVIGATION
   ========================================= */

nav ul {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 8px;

  margin: 0;
  padding: 0;

  list-style: none;
}

nav li {
  margin: 0;
  padding: 0;
}

nav a {
  display: block;

  padding: 4px 10px;

  color: white;
  background-color: #000;

  border: 1px solid magenta;

  text-decoration: none;
}

nav a:hover {
  color: white;
  background-color: magenta;
}


/* =========================================
   MAIN CONTENT
   ========================================= */

main {
  padding: 25px;

  color: white;
}


/* =========================================
   GRAPHICS INTRO
   ========================================= */

main > p {
  text-align: center;
}

main > br {
  line-height: 1;
}


/* =========================================
   GRAPHICS TABS
   ========================================= */

.graphics-tabs {
  margin-top: 20px;
}


/* TAB BUTTON CONTAINER */

.tab-buttons {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 6px;

  margin-bottom: 20px;
}


/* =========================================
   TAB BUTTONS
   ========================================= */

.tab-button {
  padding: 7px 16px;

  color: white;
  background-color: #000;

  border: 2px solid magenta;

  font-family: inherit;
  font-size: 14px;
  font-weight: bold;

  cursor: pointer;

  box-shadow: 2px 2px 0 #d99ab5;

  transition: 0.1s;
}


/* HOVER */

.tab-button:hover {
  color: white;
  background-color: magenta;

  transform: translate(1px, 1px);

  box-shadow: 1px 1px 0 #000;
}


/* CURRENT TAB */

.tab-button.active {
  color: white;
  background-color: magenta;

  box-shadow: 2px 2px 0 #d99ab5;
}


/* =========================================
   TAB CONTENT
   ========================================= */

.tab-content {
  display: none;

  padding: 20px;

  background-color: #000;

  border: 2px solid magenta;

  color: white;
}


/* SHOW ACTIVE TAB */

.tab-content.active {
  display: block;
}


/* =========================================
   TAB HEADINGS
   ========================================= */

.tab-content h2 {
  margin-top: 0;
  margin-bottom: 15px;

  padding-bottom: 5px;

  color: white;

  font-size: 20px;

  border-bottom: 1px dashed magenta;

  text-align: center;
}


/* =========================================
   GRAPHICS
   ========================================= */

.tab-content img {
  display: inline-block;

  margin: 4px;

  vertical-align: middle;
}


/* =========================================
   GRAPHICS AREA
   ========================================= */

.tab-content {
  text-align: center;
}


/* =========================================
   HORIZONTAL RULE
   ========================================= */

hr {
  border: 0;

  border-top: 1px dashed magenta;

  margin: 20px 0;
}


/* =========================================
   SKIP LINK
   ========================================= */

#skip-to-content-link {
  position: absolute;

  left: -9999px;
}

#skip-to-content-link:focus {
  left: 10px;
  top: 10px;

  padding: 8px;

  color: white;
  background-color: #000;

  border: 1px solid magenta;

  z-index: 9999;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

  body {
    padding: 8px;
  }

  .layout {
    width: 100%;
  }

  main {
    padding: 12px;
  }

  .header-title {
    font-size: 22px;
  }

  nav ul {
    flex-wrap: wrap;
  }

  .tab-buttons {
    gap: 4px;
  }

  .tab-button {
    padding: 6px 10px;
    font-size: 12px;
  }

  .tab-content {
    padding: 10px;
  }

}