html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Playfair Display', serif;
  background-color: #f8f0e3; /* Parchment-like background color */
  color: #3d3522;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url('medieval-pattern.png'); /* Add a subtle texture */
  background-repeat: repeat;
}

a {
  text-decoration: none;
  color: #3d3522;
}
a:focus {
    outline-width: 0;
}

h1 {
  font-size: 3.5em;
  font-weight: 700;
  letter-spacing: 2px;
  color: #8b4513; /* Saddle Brown */
  text-align: center;
  margin-bottom: 20px;
}
h2 {
  font-size: 2.5em;
  font-weight: 700;
  letter-spacing: 2px;
  color: #8b4513; /* Saddle Brown */
  margin-bottom: 20px;
}
#cfp {
  text-align: center;
}

p {
  text-align: left;
  font-size: 1.2em;
  line-height: 1.6;
  max-width: 80vw;
  margin: 0 auto;
}

ul {
  list-style-type: none;
  font-size: 1.2em;
  line-height: 1.6;
}
#topics{
  margin-left: 14vw;
}

#timeline {
  font-size: 1em;
  line-height: 1.6;
  margin-left: 12vw;
}

#title-container {
    margin-top: 30vh;
    height: 70vh;
}
#subtitle {
  text-align: center;
}
#programme{
  text-align: center;
  margin-top: 20vh;
  height: 50vh;
  color: #8b4513; /* Saddle Brown */
}

.light-section {
  width: 90vw;
  background-color: #fefdfc;
  margin-left: 5vw;
  padding-left: 5vw;
  padding-top: 10vh;
  padding-bottom: 10vh;

  border-top: 20px solid #f8f0e3;

}
.light-section h2 {
  margin-top: 0;
}
#logo-container, #organizer {
  margin-top: 15vh;
  margin-bottom: 10vh;
  text-align: center;
}

#logo-container img {
  width: auto;
  height: 10vh;
  margin-top: 10px;
}
#tuebingen-logo {
  margin-right: 5vw;
}
#tuebingen-logo2 {
  margin-left: 5vw;
}
#submit {
  position:relative;
}

#manicula1{
  width:100px;
  position: absolute;
  margin-left:-100px;
  margin-top: 5px;
  transform: scaleX(-1);
}
#manicula2{
  width:100px;
  position:absolute;
  left:-80px;
  top:-120px;
  transform: rotate(-20deg);
}
#manicula3{
  width:80px;
  position:absolute;
  left:140px;
  top:-140px;
  transform: rotate(-20deg);
}
#manicula4{
  width:70px;
  position:absolute;
  left:-57px;
  top:-140px;
}


/* MOBILE*/
@media only screen and (max-width: 767px) {
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: 'Playfair Display', serif;
    background-color: #f8f0e3; /* Parchment-like background color */
    color: #3d3522;
    margin: 0;
    padding: 0;
    background-image: url('medieval-pattern.png'); /* Add a subtle texture */
    background-repeat: repeat;
  }

  a {
    text-decoration: none;
    color: #3d3522;
  }
  a:focus {
      outline-width: 0;
  }

  h1, h2 {
    font-weight: 700;
    letter-spacing: 2px;
    color: #8b4513; /* Saddle Brown */
    text-align: center;
    margin-bottom: 20px;
  }
  
  h1 {
    font-size: 2.5em;
  }
  h2 {
    font-size: 1.5em;

  }

  #cfp {
    text-align: center;
  }

  p, ul {
    font-size: 1em;
    line-height: 1.6;
    padding: 0 10px;
  }
  ul, li {
    margin: 2vw !important;
  }
  #closing-description {
    margin-top: 20px;
  }

  #topics {
    margin-left: 0;
  }

  #timeline {
    margin-left: 0;
  }

  #title-container {
    margin-top: 20vh;
    height: 80vh;
  }

  #subtitle {
    text-align: center;
  }

  .light-section {
    width: 90vw;
    background-color: #fefdfc;
    margin: 20px auto;
    padding: 10px;
  }

  .light-section h2 {
    margin-top: 0;
  }

  #logo-container {
    margin: 10px 10vh;
    text-align: center;
  }
  
  #organizer {
    margin-top: 10vh;
    margin-bottom: 4vh;
  }

  #logo-container img {
    width: 70%;
    height: auto;
    margin-top: 10px;
    vertical-align: middle;
  }
  #mariecurie-logo {
    width: 30vw !important;
  }

  #manicula1, #manicula2, #manicula3, #manicula4 {
    display: none; /* Hide the pointer images on mobile */
  }
}


/* Programme */
@media only screen and (min-width: 601px) {
  
  body {margin: 0}
  
  .break {
    margin-top: 20px;
    font-style: italic;
  }

  #main {
    padding: 5vh;
    overflow: scroll;
    height: 90vh;
    background-color: white !important;
  }
  #main-poster {
    padding: 5vh;
    background-color: white !important;
  }

  .paper {
    cursor: pointer
  }

  #details {
    padding: 5vh;
    background-color: #f8f0e3;
    width: 40vw;
    height: 90vh;
    overflow: scroll;
    line-height: 1.5; 
  }

  #wrapper {
    display: flex;
    height: 100%;
  }

  * {
    font-family: "Playfair Display" 
  }

  .name, .title {
    font-weight: bold;
  }

  .abstract, .bio {
    text-align: justify;
  }

  #conference-title {
    font-size: 2.5em;
    font-weight: 700;
    letter-spacing: 2px;
    color: #8b4513;
    text-align: center;
    margin-bottom: 20px;
  }

  /*li:hover {
    color: #8b4513;
    text-decoration: underline
  }*/

  .paper {
      position: relative;
      padding-bottom:5px;
      text-decoration: none; /* Remove default underline */
      color: #333; /* Default text color */
  }

  .paper::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -2px; /* Adjust the distance from the text */
      width: 0%;
      height: 0px; /* Thickness of the underline */
      background-color: #4CAF50; /* Color of the underline */
      transition: height 0.4s ease; /* Add transition for smooth animation */
  }

  .paper:hover::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px; /* Adjust the distance from the text */
    width: 70%;
    height: 2px; /* Thickness of the underline */
    background-color: #8b4513; /* Color of the underline */
    transition: height 0.3s ease; /* Add transition for smooth animation */
      height: 4px; /* Increase the height on hover for a cool effect */
  }

  div:focus {
      outline: none;
  }


}

/* Mobile Styles */
@media only screen and (max-width: 600px) {
  body {
    margin: 0;
    font-family: "Playfair Display", sans-serif; /* Adjust font for mobile */
  }

  #main {
    padding: 5vh;
    overflow: scroll;
    height: auto; /* Adjust height for mobile */
    background-color: white !important;
  }

  .break {
    margin-top: 20px;
    font-style: italic;
  }

  .panel-head {
    font-size: 1.2rem; /* Adjust font size for mobile */
  }

  .paper {
    cursor: pointer;
  }

  #details {
    border-top: 0.5vh solid blue;
    border-radius: 50px;
    padding-top: 1vh;
    padding-left: 5vw;
    padding-right: 5vw;
    width: 90vw;
    background-color: #f8f0e3;
    height: 0; /* Adjust height for mobile */
    overflow: scroll;
    line-height: 1.5;
    border-color: #f8f0e3;
  }

  #conference-title, #programme-list {
    font-size: 1.5rem; /* Adjust font size for mobile */
    font-weight: 700;
    letter-spacing: 2px;
    color: #8b4513;
    text-align: center;
    margin-bottom: 20px;
  }
  

  .name,
  .title {
    font-weight: bold;
  }

  .abstract,
  .bio {
    text-align: justify;
  }

  .paper {
    position: relative;
    padding-bottom: 5px;
    text-decoration: none;
    color: #333;
  }

  .paper::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 0px;
    background-color: #4CAF50;
    transition: height 0.4s ease;
  }

  .paper:hover::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 70%;
    height: 2px;
    background-color: #8b4513;
    transition: height 0.3s ease;
    height: 4px;
  }

  div:focus {
    outline: none;
  }
  

  .slide-in {
    position: fixed;
    bottom: 0;
    background-color: #007bff;
    animation: slideUp 1s forwards;
  }
  
  @keyframes slideUp {
    from {
      height: 0;
      padding-top: 0;
    }
    to {
      height: 80vh;
      padding-top: 5vh;
    }
  }
  
  .slide-out{
    animation: slideDown 1s forwards;
  }
  @keyframes slideDown {
    from {
      height: 80vh;
      padding-top: 5vh;
    }
    to {
      height: 0;
      padding-top: 0;
    }
  }
  
  /*.slide-up {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: slideUp 0.5s ease forwards;
}

@keyframes slideUp {
  from {
    bottom: -100%; 
  }
  to {
    bottom: 20%;
  }
}
*/

}
.bio{
  margin-top: 20px;
}