/*
 * COLOUR CONSTANTS
*/

:root {
  --text: #e0e0e0;       /* color7 */
  --black: #111111;  /* black */
  --red: #d06060;  /* red */
  --green: #60b060;  /* green */
  --yellow: #d0a060;  /* yellow */
  --blue: #6080d0;  /* blue */
  --magenta: #a080d0;  /* magenta */
  --cyan: #60b0b0;  /* cyan */
  --white: #e0e0e0;  /* white */

  --brblack: #404040;  /* bright black */
  --brred: #e07070;  /* bright red */
  --brgreen: #70c070;  /* bright green */
  --bryellow: #e0b070;  /* bright yellow */
  --brblue: #7090e0;  /* bright blue */
  --brmagenta: #b090e0;  /* bright magenta */
  --brcyan: #70c0c0;  /* bright cyan */
  --brwhite: #ffffff;  /* bright white */

}


body {
  margin: 0;
  font-family: 'Source Code Pro', Arial, Helvetica, sans-serif;
  color: var(--text);
  background-color: var(--black);
}

a {
  color: inherit;
}

nav {
  overflow: hidden;
  background-color: var(--brblack);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

nav h1 {
  float: left;
  color: var(--text);
  background-color: var(--magenta);
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  padding: 14px 16px;
  margin: 0px;
}

nav a {
  float: left;
  color: var(--text);
  text-align: center;
  flex-grow: 1;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
  transition: 0.3s ease;
}

nav a.active {
  background-color: var(--blue);
  color: white;
}

nav a:hover {
  background-color: var(--brblue);
}

nav a.active:hover {
  background-color: var(--brblue);
  color: var(--black);
}

/*
 * Main Content
 */

section.content {
  margin-left: 20px;
  margin-right: 20px;
}

article.content {
  padding: 0px 20px;
  transition: 0.3s ease;
}

h1.content-header {
  font-size: 28px;
  transition:  0.3s ease;
  color: var(--brblue);
}

h1.content-header::before {
  content: "*";
  font-weight: bolder;
  color: var(--brred);
}

h1.content-header span {
  text-decoration: underline;
}

h1#welcome-message {
  margin-bottom: 0;
}

h2.content-header {
  font-size: 28px;
  margin-bottom: 10px;
  transition: 0.3s ease;
  color: var(--yellow);
}

h2.content-header::before {
  content: "-";
  font-weight: bolder;
  color: var(--brred);
  transition: 0.3s ease;
}

h2.content-header.expanded::before {
  content: "+";
}

h2.content-header span {
  text-decoration: underline;
}

h3.content-header {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 24px;
  transition: 0.3s ease;
  color: var(--brmagenta);
}

h3.content-header::before {
  content: "=";
  font-weight: bolder;
  color: var(--brred);
  transition: 0.3s ease;
}

h3.content-header span {
  text-decoration: underline;
}

h4.content-header {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 20px;
  color: var(--yellow);
}

h4#welcome-message::before {
  color: var(--brred);
  content: "  ->  ";
}

.drop-header {
  cursor: pointer;
}

section.drop-content {
  display: block; /* Make sure it's displayed for transition to work */
  max-height: 0; /* Initially collapsed */
  overflow: hidden; /* Hide overflowing content */
  transition: 0.5s ease; /* Smooth transition */
  margin-top: 10px;
}

.drop-content {
  display: block;
}

p {
  font-weight: 550;
  font-size: 16px;
  margin: 1em;
}

p.content {
  text-indent: 2ch;
}

p.content-cite {
  margin-top: 5px;
  margin-left: 85px;
  transition: 0.3s ease;
}

p.content-header-blurb {
  font-size: 18px;
  margin-top: 0;
}

code {
  color: var(--brgreen);
  background-color: var(--brblack);
  padding: 4px 8px;
  border-radius: 8px;
}

blockquote.content {
  margin: 0px 32px;
  padding-left: 0;
  border-left: 2px solid var(--brblue);
  transition: 0.3s ease;
}

blockquote.content p {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 0;
}

blockquote.content p::before {
  content: "\201C";
}

blockquote.content p::after {
  content: "\201D";
}

div.table-container {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
}

table, th, td {
  border:1px solid var(--blue);
  border-collapse: collapse;
}

th {
  font-size: 20px;
}

td {
  text-align: center;
  padding: 10px;
  font-size: 16px;
}

/*
 * 2xN Grid
 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-auto-rows: auto;
  gap: 2vw;
  margin-left: auto;
  margin-right: auto;
  max-width: 1500px;
}

.grid-item {
  padding: 10px;
  border: 2px solid var(--red);
  border-radius: 10px;
  text-align: center;
  align-items: center;
  transition: 0.3s ease;
}

.grid-item:hover {
  border: 4px solid var(--brred);
}

.single-grid-item {
  padding: 10px;
  border: 2px solid var(--brblue);
  border-radius: 10px;
  text-align: center;
  width: fit-content;
  transition: 0.3s ease;
}

.single-grid-item:hover {
  border: 4px solid var(--brred);
}

h2.grid-item-heading::before {
  content: "+";
  text-decoration: none;
  color: var(--brred);
  margin-left: 5px;
}

h2.grid-item-heading span {
  text-decoration: underline;
  color: var(--yellow);
}

hr.sep {
  margin-top: 0;
  margin-bottom: 0;
}

hr.sep-bottom {
  margin-bottom: 0;
}

hr.sep-footer {
  margin-top: 20px;
}

hr.spacer {
  border: none;
  height: 5px;
}

/* Media query for smaller screens (e.g., max-width 600px) */
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr; /* Switch to 1 column */
  }
  
  h1.content-header {
    font-size: 24px;
  }
  h2.content-header {
    font-size: 24px;
  }
  h3.content-header {
    font-size: 20px;
  }
  article.content {
    padding; 0px 5px;
  }

  blockquote.content {
    padding-left: 0;
    margin-left: 20px;
  }
  p.content-cite {
    margin: auto;
    text-align: center;
    padding-right: 10ch;
  }

}

/*
 *  Frameworks & Languages
 */
#frameworks {
    display: flex; /* Use flexbox layout */
    flex-wrap: wrap; /* Allow items to wrap to the next line if necessary */
    justify-content: center; /* Distribute items with equal space between them */
    gap: 10px; /* Space between items */
}

#frameworks .language-tool {
    /*flex: 1 1 120px; /* Allow boxes to grow and shrink, with a minimum width of 150px */*/
    display: flex;
    justify-content: center; /* Center the images horizontally */
    align-items: center; /* Center the images vertically */
}

.framework-img {
    max-width: 48px;
    height: auto;
}

.image-preview {
  width: 100%;
  position: relative;
  display: flex; /* Enable flexbox */
  justify-content: center; /* Horizontally center image */
  align-items: center; /* Vertically center image */
  height: 100%;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  /*aspect-ratio: 4 / 3;*/
}

.image-preview-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: rgba(.1216, .1216, .1216, 0.0);
  color: rgba(0.0, 0.0, 0.0, 0.0);
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px; /* Adjust text size */
  font-weight: bold;
  box-sizing: border-box;
  transition: 0.6s ease;
}

.image-preview-text:hover {
  background-color: rgba(.1216, .1216, .1216, 0.5);
  color: var(--text);
}

/*
 * Footer
 */

footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: var(--black);
}

footer h1.content-header {
  color: var(--green);
}

.footer-copy {
  color: var(--brmagenta);
}

.footer-date {
  color: var(--brmagenta);
}

.footer-quote {
  color: var(--bryellow);
}