html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 1em;
  font-family: "GENSCO";
  background-color: var(--bgcolor);
  color: var(--textcolor);
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ol {
margin-right: 3em;
  font-size: 1.5em;
}


header {
  background-color: var(--header-bg);
  font-size: 2.5rem;
}

header h1 {
  background-color: var(--bgcolor);
  text-align: start;
  text-transform: uppercase;
  font-size: 1.5em;
  margin: 2em 2% 0 5%;
}

header .subtitle {
  font-size: 1.4rem;
}

.wild {
  background-color: var(--accent);
  text-align: center;
  font-family: "squati";
  padding-top: 0.5em;
  font-size: 2.2rem;
}


nav {
  font-family: "GENSCO";
  background-color: var(--accent);
  font-size: 1.5em;
}

.top-nav {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: auto;
  background-color: var(--accent);
  padding: 0.5rem 1rem;
  font-size: 4.5em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: upright;
  z-index: 999;
}


main {
  display: flex;
  width: 100%;
  height: 100vh;
}

#image-column,
.text-column {
  height: 100%;
  overflow-y: auto;
}

#image-column {
  width: 35%;
  padding-left: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff; 
}

#image-column img {
  width: 90%;
  max-width: 77%;
  height: auto;
  margin: 2rem 0;
}

.text-column {
  width: 65%;
  padding: 1rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 95%;
  word-wrap: break-word;
}


.text {
  background-color: var(--bgcolor);
  margin: 0 15% 6em 5%;
  font-size: 1.2rem;
}

.text p {
  font-size: 1.5em;
  padding-bottom: 1em;
  margin: 0 5%;
}

.text .quote {
  font-size: 1.5em;
  text-align: center;
  margin-bottom:1em
  
}

.intro {
  font-size: 1.5rem;
}

.hidden {
  background-color: var(--bgcolor);
  font-size: 1.4rem;
  max-width: 85ch;
  padding-left: 1em;
}

.readmore {
  background-color: var(--accent);
  font-size: 1.5em;
  margin: 0 20% 0 10%;
}

.readmore h3 {
  font-size: 2em;
  text-align: start;
}

.readmore p::before {
  content: "• ";
}

.biography {
  font-size: 1.8em;
  margin: 150px 15% 200px 5%;
  text-align: start;
}

.epigraphe {
  font-size: 1.5em;
  text-align: end;
  margin: 60px 20% 10px 5%;
}

.authors {
  font-size: 1em;
  margin: 0 0 140px 5%;
}

.authors1 {
  font-size: 0.75rem;
  margin-bottom: 10vh;
}

.keywords {
  font-size: 0.6em;
  text-align: end;
  margin: 0 20% 0 19%;
  margin-bottom: 2em;

}

.keywords a::before {
  content: " #";
}

.li {
  padding-left: 5em;
  margin: 0 15% 0 5%;
}

.footnotes {
  background-color: var(--accent-light);
}


.articles-prev-next {
  position: fixed;
  right: 2rem;
  height: 90vh;
  top: clamp(2rem, 1%, calc(100vh - 40rem));
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  gap: 3rem;
  font-size: 1em;
  border-left: 1px solid var(--bordercolor);
  padding-left: 0rem;
  z-index: 999;
}

.articles-prev-next.animate {
  animation: pulse 0.2s ease-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}


#toggle-darkmode { display: none; }

label[for="toggle-darkmode"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 28px;
  background-color: rgb(2, 45, 76);
  border-radius: 14px;
  cursor: pointer;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  transition: background-color 0.3s;
}

label[for="toggle-darkmode"] span { display: none; }

label[for="toggle-darkmode"]::after {
  content: '';
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  position: absolute;
  left: 3px;
  transition: transform 0.3s;
}

#toggle-darkmode:checked + label {
  background-color: rgba(188, 92, 2, 0.764);
}

#toggle-darkmode:checked + label::after {
  transform: translateX(22px);
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.text p,
.intro,
.wild {
  opacity: 0;
  animation: fadeIn 1s forwards;
}


#image-column::-webkit-scrollbar { display: none; }
#image-column { scrollbar-width: none; -ms-overflow-style: none; }





:root,
:root[data-force-color-mode="light"] {
  color-scheme: light;
  --textcolor: rgb(2, 45, 76);
  --bgcolor: rgb(255, 255, 255);
}

:root[data-force-color-mode="dark"] {
  color-scheme: dark;
  --textcolor: rgb(185, 213, 205);
  --bgcolor: rgb(9, 31, 52); 
}

:root[data-force-color-mode="dark"] #image-column {
  background-color: rgb(2, 45, 76);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --textcolor: rgb(185, 213, 205);
    --bgcolor: rgb(2, 45, 76);
  }
}







@media (max-width: 840px) {
  main {
    flex-direction: column;
    height: auto;
  }

  
  #image-column {
    display: none;
  }

  
  .text-column {
    width: 100%;
    height: 100vh; 
    overflow-y: auto;
    padding: 2em;
    box-sizing: border-box;
    
  }

 header h1 { font-size: 0.8em; }
  header .subtitle { font-size: 0.4em; }
  .wild { font-size: 0.4em; }
  .text { font-size: 0.7em;  }
  .authors { font-size: 0.3em; 
  margin-bottom: 20px;  }
  .keywords { font-size: 0.4em; }
  .declaration1 { font-size: 0.6em; }
  .readmore { font-size: 0.9em; margin-right: 0em; }
  .biography { font-size: 0.9em; margin-right: 0em; }
  ol{ font-size: 0.5em; }
 
 

  .text {
    margin-left: 0em;
    margin-right: 2%;
    
  }
  .top-nav {
  position: initial;
        
   
    
  width: auto;
  background-color: var(--accent);
 
  font-size: 0.9em;
  text-transform: uppercase;
  writing-mode:horizontal-tb;
  text-orientation: initial;
  z-index: 999;
}
.articles-prev-next {
 
left: 1rem;
right: auto;
}

}