/* Reset some default browser styles */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #000;  /* This sets the background to black */
    color: #fff;  /* This sets the default text color to white */
    line-height: 1.6;
}

body {
    background-image: url('images/image_toelz.jpeg');
    background-size: cover;         /* Cover the entire page */
    background-position: center;    /* Center the background image */
    background-repeat: no-repeat;   /* Do not repeat the image */
    background-attachment: fixed;   /* Optional: fixes the background image during scrolling */
}

header, section, footer {
    max-width: 80%; /* 800px; */
    /*width: 100%;*/  /* This sets the width to 100% */
    margin: 20px auto;
    padding: 40px;
    background-color: #001F3F;  /* This sets the background to dark navy blue */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

header {
    text-align: center;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a, a {
    text-decoration: none;
    color: #d9d9d9;  /* This sets link color to white */
}

nav ul li a:hover, a:hover {
    text-decoration: underline;
    color: #4AAFF7;  /* This sets link hover color to a light blue */
}

/* For internal links */
a.internal-link {
    color: #ffffff; /* white */
}

h2, h3 {
    color: #7892b0;  /* #b0b0b0; /* /* Another shade of Light Gray */
}

h1 {
    color: #ffffff;  /* #b0b0b0; /* /* Another shade of Light Gray */
}

footer {
    text-align: center;
}

/* Styles for the .right-image class */
.right-image {
    flex-direction: row-reverse; /* This swaps the order of flex items */
    justify-content: flex-end; /* This ensures that items are pushed to the right */
}
/*
.right-image img {
    position: absolute;
    right: 0;
    top: 0; *//* This ensures it aligns with the top of the container, adjust as needed *//*
    width: 20%;
    height: auto;
}
*/
/* Styles for the image inside the .right-image class */
.right-image img {
    margin-left: 20px; /* Adding some space between the image and the text */
    width: 20%;
    height: auto;
}

.smaller-image {
    width: 30%; /* Or whatever size you want */
    height: auto; /* Maintain the aspect ratio */
}

.image-text-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.image-text-wrapper {
    display: flex;
    align-items: center; /* This will vertically center the text next to the image */
    gap: 20px; /* This will add space between the image and text */
    margin-bottom: 20px; /* Optional: to add some spacing between the elements */
    margin-left: 20px;
    position: relative;
}

/* .pdf-container {
    max-width: 800px; *//* This should match the max-width of your header and footer *//*
    margin: auto; *//* This centers the div *//*
    overflow: hidden; *//* Ensures no part of the PDF spills out *//*
}

.pdf-container iframe {
    width: 100%; *//* Ensures the iframe takes up 100% of the .pdf-container’s width *//*
    height: 2000px; *//* Adjust the height as needed *//*
    border: none; *//* Optional: removes the border *//*
}

.pdf-container {
    max-width: 800px;
    margin: 20px auto;
    padding-top: 56.25%; *//* This is an example ratio for 16:9 - change as needed for your PDF *//*
    position: relative;
    height: 0;
}

.pdf-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: none;
} */

.pdf-container {
  width: 100%;
  height: 100vh; /* fills the full viewport height */
}

.pdf-container iframe {
  width: 100%;
  height: 100%;
}

.home-intro {
  text-align: center;
  margin: 0 auto;
  /* padding: 2rem 0; rely on wrapper for side padding */
}

.profile-pic {
  display: block;
  margin: 0 auto 1.5rem;    /* centers image */
  width: 200px;
  height: 200px;
  object-fit: cover;        /* keeps aspect ratio */
  border-radius: 50%;       /* circle */
  border: 3px solid #ccc;   /* optional border */
}

.text-content {
  text-align: center;       /* centers text */
  font-size: 1.1rem;
  line-height: 1.6;
 /* max-width: 70%; *//* Adjust this value as needed */
}

.home-intro h2 {
  font-size: 2.2rem;   /* adjust size */
  font-weight: 600;    /* optional: make bolder/lighter */
  margin-bottom: 1rem; /* space below */
}


.social-icons {
  margin-top: 0.8rem;
}

.social-icons a {
  margin: 0 8px;
  font-size: 1.5rem;
  color: #b8a9a9; /* make icons white */
  transition: color 0.3s;
}

.social-icons a:hover {
  color: #0077b5; /* LinkedIn blue as example */
}




.publication {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.publication img {
  width: 200px;        /* thumbnail size */
  height: auto;
  border-radius: 8px;  /* optional rounded corners */
  margin-right: 1.5rem;
}

/* Mobile layout: stack vertically */
@media (max-width: 800px) {
  .publication {
    flex-direction: column;   /* stack instead of row */
    align-items: center;      /* center everything */
    text-align: center;       /* center text under image */
  }

  .publication img {
    width: 70%;               /* scale down for small screens */
    max-width: 260px;         /* prevent too large images */
    margin-bottom: 1rem;      /* space below the image */
  }
}

.pub-details {
  flex: 1;
}

.pub-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #1d9bf0;      /* blue like in your screenshot */
  text-decoration: none;
}

.pub-title:hover {
  text-decoration: underline;
}

.pub-authors {
  margin: 0.5rem 0;
  color: #d6d2d2;
}

.pub-journal {
  font-style: italic;
  margin: 0.5rem 0 1rem 0;
}

.pub-links {
  margin-top: 0.5rem;
}

.pub-button {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  margin-right: 0.5rem;
  border: 1px solid #000;
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.9rem;
  color: #000;
  transition: background 0.3s;
}

.pub-button:hover {
  background: #000;
  color: #fff;
}

/*
.hobbies {
  text-align: center;   *//*  centers inline elements like <img> and <p> *//* 
  margin: 2rem auto;
  max-width: 700px;     *//*  optional: keeps it aligned with rest of site *//* 
}

.hobby-pic {
  display: block;
  margin: 0 auto 1rem auto; *//*  zentriert das Bild *//* 
  width: 250px;             *//*  Größe anpassen *//* 
  height: auto;
  border-radius: 12px;      *//*  Ecken abrunden (z.B. 8–15px) *//* 
  border: 3px solid #ccc;   *//*  grauer Rahmen *//* 
  object-fit: cover;        *//*  sorgt für sauberes Zuschneiden *//* 
}
*/

.hobbies {
  display: flex;
  justify-content: center; /* centers the row */
  gap: 1rem;               /* space between images */
  flex-wrap: wrap;         /* allows wrapping on small screens */
  margin: 2rem auto;       /* centers the section itself */
}

.hobby-pic {
  width: 100%;           /* let it grow/shrink within the container */
  max-width: 95%;        /* at most 90% of section width */
  min-width: 25%;        /* at least 25% of section width */
  height: auto;          /* keep aspect ratio */
  border-radius: 12px;
  border: 3px solid #ccc;
  object-fit: cover;
}

.subcaption {
  font-size: 0.9rem;
  text-align: center;
  color: #ccc;
  font-style: italic;
}