:root{
  color-scheme: light dark;
  --color-dark-primary: #3a3a3a;
  --color-dark-secondary: #4a4a4a;
  --color-light-primary: #ffffff;
  --color-light-secondary: #f5f5f5;

  /* --color-amande: #dcefe4;
  --color-sauje: #5d7374;
  --color-noir: #18211e;

  --color-dark-primary: var(--color-sauje);
  --color-dark-secondary: var(--color-amande); */

  --color-rose: #efc9e3; 

  --color-primary: light-dark(var(--color-light-primary), var(--color-dark-primary));
  --color-secondary: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
  --color-accent: var(--color-rose);
  --color-text: light-dark(black, white);
  /* --color-text: light-dark(black, var(--color-noir)); */

  --color-invert-primary: light-dark(var(--color-dark-primary), var(--color-light-primary));
  --color-invert-secondary: light-dark(var(--color-dark-secondary), var(--color-light-secondary));
  --color-invert-text: light-dark(white, black);
}

@font-face {
  font-family: "HankenGrotesk";
  src: url("../webfonts/HankenGrotesk-VariableFont_wght.ttf");
}

html{
  color: var(--color-text);
  transition:
    background-color 0.5s,
    color 0.5s;
}

body {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  font-family: 'HankenGrotesk';

  position: relative;
  margin: 0;

  background-color: var(--color-primary);
  color: var(--color-text);

  transition: 
    background-color 0.5s,
    color 0.5s,
    opacity 2s;
}

@starting-style{
body{
		opacity: 0;
	}
}

@media (max-width: 1075px) {
  day-mode{
    right: 0; 
    bottom: 0; 
    margin-bottom: 50px; 
    margin-right: 50px;
  }
}

header, section{
  padding: 3rem 1.5rem;
  text-align: center;
}

header{
  line-height: 1.125;
}

h1, h2 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.125;
}

@media (min-width: 1075px){
  h1{
    font-size: 2.5rem;
  }

  h2{
    font-size: 2rem;
  }

  day-mode{
    right: 0; 
    top: 0; 
    margin-top: 50px; 
    margin-right: 50px;
  }
}


#authors{
  font-size: 1.25rem;
}

#authors a {
  /* color: hsl(204, 86%, 53%); */
  color: var(--color-text);
}

#authors a:hover{
  text-decoration: underline;
}

a{
  text-decoration: none;
}

#logos{
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
}

#logos img{
  height: 100px;
}

#logo-chapsvision{
  content: url("../images/logo_chapsvision.svg");
  content: light-dark(url("../images/logo_chapsvision.svg"), url("../images/logo_chapsvision_dark.svg"));
}

#logo-mines{
  content: url("../images/logo_mines.png");
  content: light-dark(url("../images/logo_mines.png"), url("../images/logo_mines_dark.png"));
}

#links{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

#caroussel{
  padding: 1.5rem 0.5rem;
  background-color: var(--color-secondary);
  color: var(--color-text);
  transition:
    background-color 0.5s,
    color 0.5s;
}

.container{
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

@media screen and (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

@media screen and (min-width: 10216) {
  .container:not(.is-max-desktop) {
    max-width: 1152px;
  }
}

@media screen and (min-width: 1408px) {
  .container:not(.is-max-desktop) {
    max-width: 1344px;
  }
}

section{
  margin-bottom: 3rem;
}

#abstract{
  text-align: justify;
}

#figure{
  content: url("../images/pipeline.svg");
  content: light-dark(url("../images/pipeline.svg"), url("../images/pipeline_dark.svg"));
}

#citation{
  background-color: var(--color-secondary);
  transition:
    background-color 0.5s;
  padding: 1.25rem 1.5rem;
  text-align: left;
}

#citation i:before{
  padding: 5px;
  border-radius: 5px;
  color: var(--color-text);

}

#citation i:hover{
  transform: scale(1.3);
}

#citation i{
  cursor: pointer;
  float: right;
  display: inline;
  transition: 
    transform 0.2s,
    opacity 0.2s;
}

#citation i[selected]{
  opacity: 0.2;
}

footer{
  padding: 3rem 1.5rem 6rem;
  background-color: var(--color-secondary);
  transition:
    background-color 0.5s,
    color 0.5s;
}