/* ---- Base styling --- */
body {
  font-family: "Cactus Classical Serif", serif;
  font-size: 16px;
  background-color: #272727;
  color: #fceeda;
  line-height: 1.5;
}

/* --- Links --- */
a {
  color: #66aaff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.screen-centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* --- Layout --- */
/* ---Rows & Columns for photos --- */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Abstand zwischen den Spalten */
  justify-content: center;
  margin: 10px;
}

.column {
  max-width: 48%; /* Etwas kleiner als 50%, damit Platz zwischen den Spalten bleibt */
  box-sizing: border-box;
  padding: 10px;
  flex: 0 0 48%; /* Make columns equally wide */
}

.column img {
  width: 100%;
  height: auto;
}

h1 {
  font-size: 1.25rem;
}

/* Used in all recipes */
.text {
  margin: auto;
  width: 33rem;
  max-width: 90%;
}

table.in-paragraph{
  padding: 0 0 1rem 1rem;
}

th {
  text-align: left;
  padding-bottom: 0.2rem;
}

td {
  padding-right: 1rem;
}

li {
  padding-bottom: 0.4rem;
}

/* Mobile Ansicht */
@media (max-width: 900px) { 
  .column {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .screen-centered {
    width: 85%;
  }
}

/* --- Figures --- */
figure {
  margin: 0 0 20px;
  text-align: left;
}

figcaption {
  font-family: "Cactus Classical Serif";
  font-size: 16px;
  margin-top: 8px;
}

/* --- Table-List Class for responsive projects site --- */
.table-list {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.table-list td {
  padding: 16px;
  vertical-align: top;
}

@media (max-width: 900px) { 
  /* stack each row vertically */
  .table-list tr {
    display: block;
  }

  /* each cell becomes a full-width block so the name/link sits above the description */
  .table-list td {
    display: block;
  }
}

/* makes the project links more visually distinct */
.table-list td:first-child a {
  font-weight: 700;
}

/* --- Canvas Styles for JavaScript Canvas --- */
#bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: -2; /* put it behind everything */
}
#fg {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* put it behind everything but the background*/
}