body {
  box-sizing: border-box;
}

img {
  margin-top: 5%;
  max-width: 100%;
  height: auto;
  padding-left: 0px;
  align-self: center;
}

.page-link.active {
  text-decoration: underline;
}

.imgMid {
  padding-top: 25px;
  max-width: 47%;
  height: auto;
  padding-left: 20px;
  align-self: start;
}

.imgMid:nth-child(4) {
  padding-top: 50px;
} 
.imgMida {
  padding-top: 2vh;
  max-width: 47%;
  height: auto;
  padding-left: 20px;
  align-self: start;
}

.imgSmll {
  padding-top: 50px;
  max-width: 30%;
  height: auto;
  padding-left: 25px;
  align-self: end;
}

.imgSmall {
  padding-top: 150px;
  max-width: 30%;
  height: auto;
  padding-left: 100px;
  align-self: end;
}

.textContainer {
  overflow:visible;
  width:auto;
  height:auto;
}

#textINFO {
  justify-content: center;
  align-items: center; 
  overflow-y: auto;
  z-index:+99;
  position: fixed;
  display:none;
  width: 50%;
  top: 50%;
  transform: translateY(-50%);
  left: 25%;
  background: rgba(105, 105, 105, 0);
  color:black;
  padding: 1% 1%;
  font-family: "Spectral";
  font-size: calc(0.9vw + 0.9vh);
  border:0px;
  line-height: 1.5;
  z-index:+50;
}

#textINFOen
{ opacity:1;
  display:none;}

#textINFOfr
{ opacity:1;
  display:inline-block;}

#textINFO:hover {
  opacity: 1;
}

@media screen and (max-width: 925px) {
  #textINFO {
    width: 70%;
    left: 15%;
    font-size: calc(1.1vw + 1.1vh);
  }
}

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

a:hover
{  opacity: 0.8;
   border: 0;
  color: black;
  text-decoration: underline;
}

a:visited {
  text-decoration: none;
  color: black;
}

.site-title {
  font-size: 2rem !important;
  line-height: 1;
}

h2 { 
  font-size: 1.5rem;
  font-family: "Grand Haven", Times, serif;
}

@media screen and (min-width: 1000px) {
  .site-title {
    font-size: 2rem !important;
    padding-left: 1%;
  }
}
@media screen and (min-width: 501px) and (max-width: 999px) {
  .site-title {
    padding-left: 20px;
  }
  .site-title, .lang-links a, .links a {
    font-size: 1.5rem !important;
  }
  h2 {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 500px) {
  .site-title, .lang-links a, .links a {
    font-size: 1.25rem !important;
  }
  h2 {
    font-size: 1rem;
  }
}

#lgSwitch {
  text-decoration: none;
  opacity: 1;
  transition-duration: 0.4s;
  font-family: "Spectral", Times, serif;
  margin: 0px 0px 0px 0px;
  font-size: calc(1vw + 1vh);
  padding: 0px 0px;
  background-color: transparent;
  border-radius: 0;
  color:black;
  border:0px;
}
#lgSwitch:hover {
  opacity: 0.8;
  font-style: italic;
  border: 0;
  color: black;
}
#lgSwitch:focus {
  outline: none;
  box-shadow: none;
}

.d-none {
  display: none !important;
}

img.ShuffleMe {
  opacity: 0;
}
.fade-in {
  animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.ShuffleMeContainer {
  display: flex;
  flex-wrap: wrap;
}
.ShuffleMeContainer .ShuffleMe:first-child img {
  padding-top: 0;
}

.lang-links, .links {
  font-family:"Grand Haven", Times, serif;
  display: flex;
  padding-right: 2%;
}

.lang-links {
  justify-content: right;
  display: none;
}

.links {
  justify-content: space-between;
  width: 25%;
}

.lang-links a, .links a {
  margin-right: 25px;
  font-size: 2rem;
  line-height: 1;
}

h1 {
  font-family: "Grand Haven", Times, serif;
  font-size: 2rem;
}

.nav {
  position: fixed;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 100vw;
  align-items: flex-start;
  margin-top: 0.5rem;
  justify-content: space-between;
}

li {
  font-family: "Spectral";
  list-style-type: none;
  font-size: calc(0.75vw + 0.75vh);
  margin: 1rem;
  padding: 0.75rem 1.5rem;
  width: 23vw;
}

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 0;
  width: 100%;
  justify-content: start;
  align-items: flex-end;
}

ul.project-list {
  flex-direction: column;
  align-items: flex-start;
}

ul.project-list li {
  width: 90vw;
  padding: 0.75rem 0.5rem;
  margin:0.25rem;
}

ul li a img {
  width: auto;
}

ul li a p {
  margin-top: 0.75rem;
}

@media screen and (max-width: 925px) {
  ul {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 2rem;
  }
  li {
    width: 60vw;
  }
}
nav {
  display: flex;
  flex-direction: row;
  padding-left: 2%;
  padding-right: 2%;
  width: 50%;
  justify-content: space-between
}
.desktop-lang-links {
  justify-content: end;
}
.press {
  max-width: 90vw;
  padding-top: 2%;
  padding-left:0.5%;
}
.nav-link {
  display: none;
}
@media (max-width: 920px) {
  .desktop-nav-link, .desktop-lang-link, .desktop-nav {
    display: none;
  }
  .nav-link, .lang-links {
    display: block;
    position: fixed;
  }
  .nav-link {
    bottom: 5px;
    left: 0;
    padding-left: 2%;
    width: 100%;
  }
  .lang-links {
    bottom: 5px;
    right: 0;
  }
  .lang-links a {
    margin-right: 5px;
  }
  .lang-links a:first-child {
    margin-right: 15px;
  }
  .nav {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

.cv-link {
  justify-content: left;
}

.page-content {
  padding: 50px 0;
}

/* Split screen layout for projects page */
.projects-container {
  display: flex;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

.projects-list {
  width: 33.33%;
  padding: 2rem;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  box-sizing: border-box;
}

.projects-preview {
  width: 66.67%;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.project-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.project-list li {
  margin: 0;
  padding: 0.75rem 0;
}

.project-list li h2 {
  margin: 0;
  padding: 0;
}

.project-link {
  display: block;
  padding: 1rem 0;
  font-family: "Grand Haven", Times, serif;
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.project-link:hover {
  text-decoration: underline;
}

.project-preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-preview-image.active {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .projects-container {
    flex-direction: column;
  }
  
  .projects-list {
    width: 100%;
    height: auto;
  }
  
  .projects-preview {
    width: 100%;
    height: 50vh;
  }
}