<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

/* General table styling */
table {
  width: 100%; /* Make the table take up the full width of the screen */
  border-spacing: 10px; /* Adjust spacing for smaller screens */
}
@font-face {
    font-family: 'Karrik';
    src: url('Web/WOFF2/Karrik-Regular.woff2') format('woff2'),
         url('Web/WOFF/Karrik-Regular.woff') format('woff'),
         url('Web/TFF/Karrik-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* improves loading performance */
}

/* Ensure the first column doesn't take up too much space */
td:first-child {
  /* width: 40%;  Limit the width of the left column */
    text-align: right; /* Align text to the top of the cell */
}

/* Italicize the text in the right column */
td:nth-child(2) {
  font-style: italic;
}

.li {
    list-style: numbered;
}

/* Apply numbered style to list items */
ul {
  list-style-type: decimal; /* Use numbers for the list */
  list-style-position: inside; /* Align numbers next to the text */
  padding-left: 0; /* Remove extra indentation */
}

table {
  border-spacing: 20px; /* Adds 20px space between columns and rows */
}

/* Adjust font size and padding for smaller screens */
@media (max-width: 768px) {
  td {
    font-size: 14px; /* Reduce font size for smaller screens */
    padding: 5px; /* Reduce padding */
  }

  ul {
    padding-left: 20px; /* Adjust list indentation */
  }
}

@media (max-width: 480px) {
  td {
    font-size: 12px; /* Further reduce font size for very small screens */
  }

  table {
    border-spacing: 5px; /* Reduce spacing between table cells */
  }

  ul {
    padding-left: 15px; /* Further adjust list indentation */
  }
}

body {
    font-family: Karrik, sans-serif; /* Set the font to Verdana */
  border: none; /* Adds a 5px solid black border around the page */
  margin: 10px; /* Adds space between the border and the browser window */
  padding: 10px; /* Adds space between the border and the content */
}

.placeholder-image {
  display: block;
  margin: 20px auto;
  max-width: 100%; /* Scale down for smaller screens */
  width: 800px; /* Default width for larger screens */
}

.blockquote {
  text-align: center;
  margin: 20px auto;
  max-width: 100%; /* Scale down for smaller screens */
  width: 800px; /* Default width for larger screens */
}

.image-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr); /* 5 columns */
      gap: 10px; /* Space between grid items */
      padding: 10px;
    }

/* FIXED: Add proper styling for model-viewer */
model-viewer {
  width: 100%;
  height: 400px;
  background-color: #f0f0f0;
  margin: 20px 0;
  border-radius: 8px;
}

/* Loading state styling */
.model-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  background-color: #f9f9f9;
  border: 2px dashed #ccc;
  margin: 20px 0;
  font-family: Verdana, sans-serif;
  color: #666;
}

</style>
</head>
<body>
<a href="index.html">home</a>

<h1>About</h1>
<p>
  Bruchstellen was a research studio offered by Artur Meier, Simon Ullrich and Christian Hörner during the School of Garage in August 2025. Participants: Lena Meyer, Mischa Ushakov and Vanessa Köth.
<br>
<p>
Impressum
</p>

Urbane Liga e.V.
<br>
Alt-Moabit 22
<br>
10555 Berlin
<br>
  <a href="https://urbane-liga.de/">www.urbane-liga.de</a>

</p>

<p>
  Font: Karrik by <a href="http://karrik.phantom-foundry.com/#second">Jean-Baptiste Morizot and Lucas Le Bihan</a>
</p>

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<div class="image-grid">
  <img src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExaXp4aHE4OTh0ejNhcjh4c2VjZTZqZnZsc2l3aXFwaDR4N3Z1eWRxeiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/ieV5cxcGTAFtWfGy3S/giphy.gif" alt="gif1"> 
</div>


</body>
</html>