.wrapper {
  width:860px;
  margin:0 auto;
}

.content-section {
  display:flex;
  margin-top:20px;
  align-items:flex-start;
}

.content-section img {
  height:auto;
  max-width:250px;
  margin-right:20px;
}

.text-content {
  max-width:700px;
}

.index-title { 
  font-size:18px;
  margin-top:25px;
  margin-bottom:0.5px;
  letter-spacing:0.5px;
  text-shadow:0.6px 0.6px 0 #000;
}

.index-text-indent { 
  font-size:18px;
  text-indent:1em;
  text-align:left;
  margin-bottom:5px;
}

.h3-img {
  margin-left:3px;
  margin-right:3px;
  vertical-align:-2px;
}

.research-link {
  font-weight:bold;
  font-style:italic;
  margin-right:10px;
}

.underline-link {
  position:relative;
  text-decoration:none;
}

.underline-link::after {
  left:0;
  bottom:-2px;
  width:100%;
  content:'';
  height:1.8px;
  position:absolute;
  transform:scaleX(0);
  transform-origin:bottom right;
  background-color:#156082;
  transition:transform 0.5s ease;
}

.underline-link:hover::after {
  transform:scaleX(1);
  transform-origin:bottom left;
}

.black-link {
  color:black;
  text-decoration:none;
}

.image-centered {
  display:flex;
  align-items:center;
  text-decoration:none;
  justify-content:center;
}

.image-centered img {
  margin-right:6px;
}

.circular-image {
  margin:0px;
  width:150px;
  height:150px;
  overflow:hidden;
  margin-left:20px;
  border-radius:50%;
  outline:5px solid #ccc;
}

.circular-image img {
  width:100%;
  height:auto;
}

.modal {
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1000;
  display:none;
  position:fixed;
  overflow:hidden;
  align-items:center;
  justify-content:center;
  background-color:rgba(0, 0, 0, 0.7);
}

.modal-content {
  width:80%;
  padding:20px;
  max-width:400px;
  max-height:90vh;
  overflow-y:auto;
  overflow-x:auto;
  position:relative;
  text-align:center;
  border-radius:12px;
  background-color:#fff;
  box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-content img {
  height:auto;
  max-width:100%;
  border-radius:8px;
  backdrop-filter:blur(10px);
}

.modal-img {
  display:inline-block;
  transform-origin:center;
  transition:transform 0.6s;
}

.modal-img:hover {
  color:#3399cc;
  transform:scale(1.1);
}

.close {
  top:-10px;
  right:6px;
  color:#aaa;
  padding:2px;
  font-size:28px;
  cursor:pointer;
  font-weight:bold;
  position:absolute;
  transform-origin:center;
  transition:color 0.3s, transform 0.5s; 
}

.close:hover {
  color:#3399cc;
  transform:scale(1.1);
}

#scrollToTop {
  z-index:99;
  bottom:20px;
  border:none;
  outline:none;
  display:none;
  color:#3399cc;
  cursor:pointer;
  position:fixed;
  font-size:24px;
  padding:10px 20px;
  border-radius:15px;
  backdrop-filter:blur(10px);
  background:rgba(255, 255, 255, 0.2);
  box-shadow:0 4px 20px rgba(0, 0, 0, 0.3);
  transition:color 0.5s ease, transform 0.6s ease, box-shadow 0.5s ease, background 0.5s ease, backdrop-filter 0.5s ease;
}

#scrollToTop:hover {
  color:#1c7aae;
  transform:translateY(-5px);
  backdrop-filter:blur(15px);
  background:rgba(51, 153, 204, 0.2);
  box-shadow:0 8px 25px rgba(0, 0, 0, 0.4);
}

#scrollToTop:active {
  transform:translateY(2px);
  backdrop-filter:blur(5px);
  box-shadow:0 4px 15px rgba(0, 0, 0, 0.2);
}

.scrollToSection {
  top:60%;
  right:20px;
  z-index:99;
  position:fixed;
  transform:translateY(-50%);
}

.scrollToSection button {
  width:110px;
  border:none;
  outline:none;
  color:#3399cc;
  display:block;
  cursor:pointer;
  font-size:17px;
  text-align:left;
  padding:12px 10px;
  border-radius:15px;
  margin-bottom:15px;
  backdrop-filter:blur(10px);
  background:rgba(255, 255, 255, 0.2);
  box-shadow:0 4px 20px rgba(0, 0, 0, 0.3);
  transition:color 0.5s ease, transform 0.6s ease, box-shadow 0.5s ease, background 0.5s ease, backdrop-filter 0.5s ease;
}

.scrollToSection button:hover {
  color:#1c7aae;
  transform:translateY(-5px);
  backdrop-filter:blur(15px);
  background:rgba(51, 153, 204, 0.2);
  box-shadow:0 8px 25px rgba(0, 0, 0, 0.4);
}

.scrollToSection button:active {
  transform:translateY(2px);
  backdrop-filter:blur(5px);
  box-shadow:0 4px 15px rgba(0, 0, 0, 0.2);
}

#pdf-viewer {
  width:100%;
  height:100vh;
  display:flex;
  margin:0 auto;
  max-width:800px;
  align-items:center;
  flex-direction:column;
  justify-content:flex-start;
}

.pdf-page {
  flex:none;
  width:100%;
  margin-bottom:10px;
}

canvas {
  width:100%;
  height:auto;
}

.loading {
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  display:none;
  position:relative;
  align-items:center;
  justify-content:center;
}

.mjjLoader {
  display:flex;
  margin-top:20px;
  margin-bottom:20px;
  flex-direction:row; 
}

.mjjLoader div {
    width:6px;
    margin:2px;
    height:20px;
    background:#FE4A49;
    border-radius:25px; 
}

.mjjLoader div:nth-child(1) {
  animation:mjjLoader 1s ease-in-out infinite 0s;
}
.mjjLoader div:nth-child(2) {
  animation:mjjLoader 1s ease-in-out infinite 0.15s;
}
.mjjLoader div:nth-child(3) {
  animation:mjjLoader 1s ease-in-out infinite 0.3s;
}
.mjjLoader div:nth-child(4) {
  animation:mjjLoader 1s ease-in-out infinite 0.45s;
}
.mjjLoader div:nth-child(5) {
  animation:mjjLoader 1s ease-in-out infinite 0.3s;
}
.mjjLoader div:nth-child(6) {
  animation:mjjLoader 1s ease-in-out infinite 0.15s;
}
.mjjLoader div:nth-child(7) {
  animation:mjjLoader 1s ease-in-out infinite 0s;
}

@keyframes mjjLoader {
  0% {
    transform: scaleY(0.5);
    background: #FED766;
  }
  25% {
    transform:scaleY(1);
    background: #009FB7;
  }
  50% {
    transform: scaleY(2);
    background: #59CD90;
  }
  75% {
    transform:scaleY(1);
    background: #FE4A49;
  }
  100% {
    transform: scaleY(0.5);
    background: #D91E36;
  } 
}

@media (prefers-color-scheme:dark) {
  .black-link {
    color:white;
    text-decoration:none;
  }
  
  .modal-content {
    background-color:#424242;
  }
  
  #scrollToTop{
    background:#424242;
  }
  
  .scrollToSection button {
    background:#424242;
  }
}

@media (max-width:1099px) {
  .button-text {
    display:none;
  }
  .scrollToSection {
    top:60%;
    right:1px;
  }
  .scrollToSection button {
    width:30px;
    padding:5px 5px 5px 5px;
  }
  #scrollToTop {
    width:35px;
    border-radius:15Px;
    padding:5px 5px 5px 5px;
  }
}