/*css reset soft*/

* {
	margin: 0;
	padding: 0;
	border: 0; /* Setzt margin, padding und border für alle Elemnte auf 0 */
	box-sizing: border-box;  /* box-sizing wird auf border-box geändert, damit padding und border in die Gesamtgröße eines Elements mit eingerechnet werden */
  }
  
  img, video {
	max-width: 100%; /* Verhindert das Bilder usw. über übergeordnete Elemente hinaus gehen*/
	height: auto; /* So wird das Seitenverhältnis festgelegt */
  }
  
  ul, ol {
	list-style: none; /* 
  Entfernt die Listensymbole bei ungeordneten und geordneten Listen, so können hier eigene Sytle verwendet werden
  */
  }
  
  a {
	text-decoration: none; /* 
  Setzt die Standardstile von Links zurück und entfernt die Unterstreichung.
  */
  }
  
  html {
	line-height: 1.5; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
  /**
   * 1. Correct the line height in all browsers.
   * 2. Prevent adjustments of font size after orientation changes in iOS.
   */
  }
  
  small {
	font-size: 80%;
  /**
   * Add the correct font size in all browsers.
   */
  }
  
  /*css reset soft end*/
  
  body {
	  max-width: 900px;
	  margin: 0 auto;
	font-family:sans-serif;
  background-color: white;
	   }
  
  
  /* header style */
  header {
	background-color:#515251;
	border-radius:10px;
	padding: 10px;
	margin:15px;
  }
  
  h1 {
	text-align:center;
	color:white;
  }
  
  header p {
	text-align:center;
	color:white;
  }
  
  header ul {
	text-align:center;
	margin-top:15px;
	font-weight:bold;
  }
  
  header ul li a {
	  list-style: none;
	  color:white;
	}
  
  header ul li a:hover {
	font-size:105%;
  }
  
  .header{
	display:flex;
	flex-direction:row;
	justify-content:space-evenly;
  }
  /* header style ends  */
  
  /* main style */
  h2 {
	text-align:center;
	color:white;
  }

  .text {
    text-align: left;
    max-width: 800px; /* Begrenzung der Breite */
    width: 80%; /* Anpassung an verschiedene Bildschirmgrößen */
    margin: 0 auto; /* Zentrierung */
    
}

@media (max-width: 600px) {
  .text {
      width: 95%; /* Größere Breite auf kleineren Bildschirmen */
      max-width: none; /* Falls max-width das Problem verursacht */
      line-height: 1.2;
  }
}

  h3 {
	text-align:center;
	color:white;
  }
  
  .REFLECTION, .CODE {
	background-color: #515251;
	margin:15px;
	padding: 10px;
	border-radius: 10px;
  }

  .REFLECTION p {
	color:white;
	display:flex;
	justify-content:space-evenly;
	flex-wrap: wrap;
	margin:20px;
  }

  .CODE:hover {
  background-color: black;
  }

  .THEMA {
	background-color:white;
	margin:15px;
	padding: 10px;
	border-radius: 10px;
  }

  .image-container2{
    display: flex;
    flex-direction:row;  
    justify-content:space-evenly;
    flex-wrap: wrap;
    }
  
    .p5 {
      padding:10px;
      height:390px;
      border-radius: 20px;
      width: 300px
      }

      video {
        padding: 10px;
        height: 390px; /* Einheitliche Höhe wie die Bilder */
        border-radius: 20px;
        width: 300px; /* Breite bleibt gleich */
        object-fit: cover; /* Video-Inhalt wird zugeschnitten, um die Höhe einzuhalten */
    }

      .p5:hover {
        transform: scale(1.05);
        transform: scale(x, y);
        }

        .video:hover {
          transform: scale(1.05);
          transform: scale(x, y);
          }

      figcaption { 
        text-align:center;
        color:black;
        margin-bottom:15px;
        }

  .BACK {
	background-color: #515251;
	margin:15px;
	padding: 10px;
	border-radius: 10px;
  }

  .BACK:hover {
	background-color: black;
  }


  
  
  
  
  
  
  
	  
  
  
   
	
  
  /* main style ends */
  
  /* footer style */
  .footer {
    display: flex;
    justify-content: center; 
    align-items: center;   
    
  }
  
  .me {
    max-width: 60px; 
    height: auto;  
  }
  
  /* footer style ends */
  
  @media(max-width: 600px) {
	  body {
		  width: auto;
	  }
   
  }