/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * this is the css
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * hello there 
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
:root {

  --brown: hsl(100, 6.4%, 90%);
  --lighter: rgb(255, 255, 255, 0.25);
  --little-lighter: rgba(255, 255, 255, 0.05);
  --little-darker: hsla(0, 0%, 0%, 0.05);
  --darker: rgb(0, 0, 0, 0.25);
  --lot-darkwr: rgb(0, 0, 0, 0.8);


  /* The default accent color used in the entire website */
  /* This value is overidden in the Event page. */

  --accent: var(--brown);


  /* Radiuses */

  --radius: 0.15rem;

  /* Borders and outlines */

  --single: 1px solid;
  --double: 4px double;
  --focus: 2px dotted rgb(133, 50, 50);


  /* Transition and animation speeds */

  --fast: 0.25s;
}

/* preveting headaches */

*,
*::before,
*::after {
  box-sizing: border-box;
  position: relative;
}

*:focus {
  outline: none;
}

*:focus-visible {
  outline: var(--focus);
}





/* main structural set-up */

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;
  background-color: var(--accent);
  color: var(--lot-darkwr);
  font-family: Arial, Helvetica, sans-serif;
}

body {
  padding: 0.75rem;
}

main,
header,
footer {
  margin-inline: auto;
  min-width: min(100%, 24rem);
}

main {
  max-width: min(100%, 52rem);
  padding-block: 0.67em;
}


header {
  max-width: min(100%, 54rem);
}

footer {
  padding-bottom: 2rem;
  padding-top: 2rem;
  text-align: center;
  max-width: min(100%, 24rem);
}

article,
section {
  margin-block: 0.75rem;
  margin-inline: auto;
  max-width: 100%;
  overflow: visible;
  padding: 0.75rem;
}

hr {
  border: none;
  border-top: var(--single) var(--darker);
}



/* anchors */

a,
a:active,
a:visited {
  text-decoration: underline;
  color: var(--lot-darkwr); 
}

a:hover,
a:focus {
  text-decoration: none;
  font-style: italic;
  text-transform: capitalize;
}

s a {
  text-decoration: none;
}



/* headers */

h1 {
  margin-top: 0;
  text-align: center;
}

h4 {
  margin-top: 0;
  text-align: center;
}

ul {
  margin-block: 0;
  padding-inline: 1.5rem;
  width: fit-content;
}

/* tables */

table tbody {
  text-align: left;
  width: 100%;
}

table {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 100%;
}

th
 {
  text-align: center;
  text-transform: lowercase;
  /* width: max-content; */
  width: 100%;
  
  
}

th,
td {
  min-width: max-content;
  padding: 0.3rem 0.3rem;
  vertical-align: middle;
}


td.linked_cell:hover {
  text-decoration: none;
  background: #ffe947;
  cursor: pointer;
  text-transform: capitalize;
}


/* input */

input {
  background-color: unset;
  border: unset;
  margin: 0;
  background-color: var(--little-darker);
  border-top: var(--single) var(--darker);
  border-left: var(--single) var(--darker);
  border-bottom: var(--single) var(--lighter);
  border-right: var(--single) var(--lighter);
  border-radius: var(--radius);
}

input[type="button"],
input[type="submit"],
.carve-out {
  background-color: var(--little-lighter);
  border-top: var(--single) var(--lighter);
  border-left: var(--single) var(--lighter);
  border-bottom: var(--single) var(--darker);
  border-right: var(--single) var(--darker);
  border-radius: var(--radius);
}


/* custom box style */

section,
article,
img,
th,
td,
.carve-in {
  background-color: var(--little-darker);
  border-top: var(--single) var(--darker);
  border-left: var(--single) var(--darker);
  border-bottom: var(--single) var(--lighter);
  border-right: var(--single) var(--lighter);
  border-radius: var(--radius);

}

address p {
  margin-block: 0;
}


/* skip button */

header a#skip {
  position: absolute;
  padding: 0.2rem 0.3rem;
  background-color: var(--brown);
  transform: translateY(-200%);
  transition: transform var(--fast) linear;
  z-index: 1;
}

header a#skip:focus {
  transform: translateY(0);
}


/* nav */

header nav {
  width: 100%; 
  margin: auto;
  padding: 2px;
  margin-block: 0.75rem;
}

header nav ul {
  list-style: none;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  padding: 0.75rem;
  display: flex;
  justify-content: space-between;
}

header nav ul li a {
  padding: 0.2rem 0.3rem;
}

/* figures, images, audio, video */

figure img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

figureBigger {
  overflow: visible; /* Hides parts of the image that overflow the container */
  text-align: center; /* Centers the image */
}

figureBigger img {
  height: auto; /* Maintains aspect ratio */
  display: inline-block; /* Aligns the image properly for centering */
  position: relative;
  background: transparent;
  border: none;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.8; /* Adjust this value as needed */
}

figureBigger figcaption {
  font-style: italic;
  text-align: center;
  max-width: min(100%, 24rem);
  margin: auto;
}

figureSmaller img {
  width: 100%; /* Set the initial width to half */
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: width 0.5s ease; /* Smooth transition for resizing */
}


figureSmaller figcaption {
  font-style: italic;
  text-align: center;
  max-width: min(100%, 24rem);
  margin: auto;
}



figure audio,
figure video {
  width: 100%;
}

figure figcaption {
  font-style: italic;
  text-align: center;
  max-width: min(100%, 24rem);
  margin: auto;
}


figure#karl img {
  border-radius: 100%;
}


/* index */

main.index section {
  border-radius: 100%;
}



/* projects */

main.projects section ul,
main.projects_all section ul {
  max-width: 34rem;
  list-style: none;
  margin: 0;
  padding: 0.75rem;
}

main.projects section ul li details summary,
main.projects_all section ul li details summary {
  margin-inline: 4px;

}

main.projects section ul li:hover details summary,
main.projects_all section ul li:hover details summary {
  list-style-type: disclosure-open;
}

main.projects section ul li:hover details[open] summary,
main.projects_all section ul li:hover details[open] summary {
  list-style-type: disclosure-closed;
}

main.projects section ul li details[open],
main.projects_all section ul li details[open] {
  margin-block: 0.75rem;
}


main.projects section ul li details table,
main.projects_all section ul li details table {
  width: 100%;
}

main.projects section ul li details table tbody tr th,
main.projects_all section ul li details table tbody tr th {
  width: 4rem;
}



/* cv */

main.projects section,
main.projects_all section,
main.cv section {
  padding: 2px;
}

main.projects section p,
main.projects_all section p,
main.cv section p {
  position: sticky;
  left: 0;
  font-style: italic;
  width: 100%;
  text-align: center;
  margin-block: 0.75rem;
}

.gallery {
  text-align: center;
}

.print_only {
  display: none;
}

@media print {

  header,
  footer {
    display: none;
  }

  .print_only {
    display: unset;
  }

  main.cv>h1 {
    display: none !important;
  }

  main.cv h1 {
    text-align: left;
    display: flex;
    align-items: center;
  }

  main.cv h1 figure {
    display: inline-block;
    border: none;
    margin: 0;
    margin-right: 1.5rem;
    margin-bottom: -0.5rem;
  }

  main.cv h1 figure img {
    display: inline-block;
    border: none;
    height: 1em;
  }

  main.cv h1,
  main.cv h2 {
    font-family: 'PicNic';
    /* font-size: 1em; */
  }
}

#mynetwork {
  width: 800px;
  height: 300px;
  background-color: var(--brown);

}

.section-caption {
  font-style: italic;
  text-align: center;
  max-width: min(100%, 24rem);
  margin: auto;
}

.image-overlay {
  display: none;
  position: fixed;
  top: 50px;
  /* Adjust top position as needed */
  left: 20px;
  /* Adjust left position as needed */
  z-index: 9999;
}

/* Main content layout */
.ig-content {
  display: flex;
  flex-direction: column; /* Changed to column layout */
  align-items: flex-start;
}

.text-content {
  max-width: 34rem;
  list-style: none;
  margin: 0;
  padding: 0.75rem;
}

.image-item {
  margin-top: 10px; /* Space between text and image */
  width: 100%; /* Adjust width as needed */
  
}

.image-item img {
  max-width: 100%; /* Ensure image does not exceed container width */
  height: auto; /* Maintain aspect ratio */
  transition: transform 0.3s ease; /* Transition for hover effect */
}

.image-item img:hover {
  transform: scale(1.001); /* Slightly enlarge image on hover */
}

/* Your existing styles for image items */
.image-item {
  width: 100%;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  /* Include opacity in the transition */
  cursor: pointer;
  opacity: 0.8;
  /* Set initial opacity */
  padding: 0.75rem;
  position: relative;
}

.image-item img {
  width: 100%;
  height: auto;
}

/* Hover effect */
.image-item:hover {
  opacity: 1;
  /* Full opacity on hover */
}


/* Style for the canvas */
#projectCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Ensures the canvas doesn't block mouse events */
  z-index: -1;
  /* Places the canvas behind other elements */
  transition: opacity 0.3s ease;
  /* Smooth transition for opacity changes */
}

.chart-text {
  fill: var(--lot-darkwr);
}

.chart-line {
  stroke: var(--lot-darkwr);
}

/* CSS for image section */
.image-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* Optional: Add padding, margin, or other styles as needed */
}

.image-section figure {
  flex: 1;
  /* Allow figures to expand within the container */
  /* text-align: center; */
}

.image-container figure {
  margin: 0;
}

.image-container img {
  max-width: 100%;
  /* Ensure images don't exceed their container */
  height: auto;
  /* Maintain image aspect ratio */
}

.opaque {
  opacity: .5;
}

.hidden {
  display: none
}

/* Hide the summary by default */
.project-details summary {
  display: block;
  cursor: pointer;
  user-select: none;
  outline: none;
}

/* Style summary hover */
.project-details summary:hover {
  background-color: lightgray;
  /* Change background color on hover */
}

/* Hide the details content by default */
.details-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  /* Transition for smooth opening/closing */
}

/* Show the details content when details are open */
.project-details[open] .details-content {
  max-height: 1000px;
  /* Adjust to a large value or 'auto' for dynamic content */
  transition: max-height 0.5s ease-in;
  /* Smooth transition when details open */
}

.button:hover {
  background-color: #e7e7e7;
}

.button {
  background-color: rgb(0, 0, 0, 0.05);
  /* Green */
  border: none;
  color: white;
  padding: 1px 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}


::selection {
  background: #ffe947;
}

/* Web of Deviations specific styles */
.arena-column {
  float: left;
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
}

#input-grid, #output-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 150px;
  grid-gap: 10px;
}

.arena-image-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.arena-image-item:hover {
  transform: scale(1.1);
}

#enlarged-image-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.08);
  align-items: center;
  justify-content: center;
}

#enlarged-image {
  max-width: 80%;
  max-height: 80%;
  transition: transform 0.4s ease;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


.image-grid {
  display: grid;
  grid-template: auto / auto auto;  
  grid-gap: 10px;
}

.image-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 10px;
  text-align: center;
}

#projectsContainer {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: min(100%, 52rem);
  margin: 0 auto;
  border: none;
}
/* #projectsContainer img {
  align-items: center;
  justify-content: center;
  display: inline-block;

} */

.block-item {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
}

.block-item2 {
  padding: 10px;
  margin-bottom: 10px;
  object-fit: cover;
  object-position: center;
}

.homeimg {
  width: 70%;
  object-fit: cover;
  height: auto; /* Maintains aspect ratio */
  display: inline-block; /* Aligns the image properly for centering */
  position: fixed;
  background: transparent;
  border: none;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.8; /* Adjust this value as needed */
    overflow: visible; /* Hides parts of the image that overflow the container */
  text-align: center; /* Centers the image */
}

.image-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block-title {
  font-weight: bold;
  text-align: justify
}
.block-description {
  margin-top: 5px;
  font-weight: bold;
}

#projectTable, 
#experienceTable {
  width: 100%;
  max-width: 100%; /* Ensures table doesn't exceed the parent's width */
  table-layout: fixed; /* Helps in controlling the column widths */
}

/* Project styles moved to index.html inline styles */


#proxytitle {
  position: -webkit-sticky; /* Safari & IE */
position: sticky;
top: 0;
}


.scrolling-wrapper {
  width: 100%; /* Adjust based on your needs, keeping it more horizontal */
  height: 300px; /* Adjust the height as needed */
  overflow-y: scroll; /* Enables vertical scrolling */
  overflow-x: hidden; /* Hides horizontal scrollbar */
  display: block;
  margin: auto;
  border: 1px solid #ccc; /* Optional: adds a border around the div */
}

.scrolling-wrapper img {
  width: 100%; /* Makes image width fit the container */
  height: auto; /* Keeps image aspect ratio intact */
  display: block; /* Ensures images stack vertically */
  margin-bottom: 10px; /* Optional: adds space between images */
}


.scrolling-wrapper2 {
  width: 100%; /* Adjust based on your needs, keeping it more horizontal */
  height: 700px; /* Adjust the height as needed */
  overflow-y: scroll; /* Enables vertical scrolling */
  overflow-x: hidden; /* Hides horizontal scrollbar */
  display: block;
  margin: auto;
  border: 1px solid #ccc; /* Optional: adds a border around the div */
}

.scrolling-wrapper2 img {
  width: 100%; /* Makes image width fit the container */
  height: auto; /* Keeps image aspect ratio intact */
  display: block; /* Ensures images stack vertically */
  margin-bottom: 10px; /* Optional: adds space between images */
}

#backgroundContainer {
  position: fixed;
  top: 100px;
  width: 80%;
  height: 80%;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  
}

.project-info {
  color: black; /* Adjust color based on your image's color scheme */
  opacity: 0.7;
  text-align: center;
  padding: 10px;

}

.project-info h2, .project-info p {
  margin: 0;
  padding: 5px;
}

/* Style for the row containing the columns */
.row {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 20px;
}

/* Style for each column */
.arena-column {
  flex: 1;
  padding: 0 15px;
}

/* Style for each data entry */
.data-entry {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 5px;
}

.data-entry h3 {
  margin: 0 0 20px 0;
  color: inherit; /* Dark grey color for text */
}

.data-entry a,
.data-entry span {
  color: inherit;  
  text-decoration: underline;
  
}

.data-entry a:hover {
  text-decoration: underline;
}


@media screen and (max-width: 600px) {
  .arena-column {
    flex-direction: column;
    width: 100%;
  }

  .row {
    flex-direction: column;
    align-items: center;
  }
}

.project-thumb {
  width: 100%;
  max-width: 400px;
  border-radius: 6px;
  margin-bottom: 12px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}