@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&family=Josefin+Slab:wght@300;700&display=swap');

:root{

  --content-radius:25px;
    /* CSS HEX */
--night: #000f08ff;
--delft-blue: #1a3175ff;
--caribbean-current: #317787ff;
--burnt-sienna: #f07a56ff;
--seashell: #fdf3edff;
--darker-color:var(--night); /*#08090a;*/
--lighter-color:var(--seashell) /*#607466;*/
--cine-color:#ed994a;
--anim-color:#c5dfa9;
--link-color:var(--burnt-sienna);
}

html{
  background-color: var(--night) ;
  font-size: 1.1em;
  scroll-behavior: smooth;
  color: var(--seashell);
  line-height: 1.2em;
  font-family: 'Josefin', sans-serif;
  font-weight: 400;
  text-align: justify;
}

header{
  padding: 0;
  padding-top: 15px;
  color: var(--seashell);
  position: relative;
}
header h2{
  font-family: 'Josefin slab', serif;
  font-size: 1em;
  padding: 0;
  margin: 0;
  top: -1em;

}

.list ul, .list ul>li{
  list-style: disc;
  display: block;
}

#titres{
  list-style: none;
  text-align: right;
}

.inline{
  display: inline;
}

h3{
  font-family: 'Josefin slab', serif;
}

h4, h5{
  font-family: 'Josefin sans', monospace;
}


li a {
  color:var(--seashell);
  padding-inline:calc(var( --content-radius)*.7);
}

p > a, .list ul > li a{
  color:var(--burnt-sienna);
  padding-inline:calc(var( --content-radius)*.7);
}

a:hover, a:active, a:hover, .list ul > li a:hover{
  color:var(--darker-color);
  background-color: var(--link-color);
}

nav, .nav-wrapper{
  text-align: center;
  position: relative;
  background-color:black;
  color:var(--seashell);
  padding-bottom: 15px;
  font-size: 1rem;
}
.hidden{
  display: none;
}
nav ul a,
nav .brand-logo {
  color: var(--seashell);

}

nav ul a:hover{
	background:var(--link-color);
	color:var(--night);
}
nav.nav-center ul {
    text-align: center;
    margin-bottom: 15px;

    background-color:black;
    color:var(--seashell);
}
nav.nav-center ul li {
    display: inline;
    float: none;
}
nav.nav-center ul li a {
    display: inline-block;
}

nav.nav-center ul.sidenav li a, .page-footer ul li a{
	display:block;
	color:white;
}
nav.nav-center ul.sidenav li a:hover, .page-footer ul li a:hover{
	color:var(--darker-color);
	background:var(--lighter-color);
}



.sidenav-trigger {
  color: #26a69a;
}


.sticky-nav{
	position:fixed;
	top:0;
	z-index:999;
	transition:.5s;
	/*line-height:1.2rem;
	height:1.4rem;*/
  width: 100vw;
}

.breadcrumb{
  color: var(--lighter-color);
}

#homeIcone{
  text-align: right;
  vertical-align: middle;
}

#socials{
  position: absolute;
  text-align: right;
  right: 15px;
  bottom: 0;

}
#socials ul li a{
  background: none;
  color: white
}
#socials ul li a i{
  z-index: 2;
}
.container{
  margin-top: 0;
  padding-top: 0;
}
header{
  padding-top: 0;
  max-height:738px;
  display: block;
}

.logo {
  max-height: 25vh;
}

.smaller{
  font-size: .7rem;
}

nav ul>li, .socials ul>li, .socials ul, .socials li{
  list-style-position: inside;
  list-style-type: none;
  display: inline;
  font-family: 'Josefin Slab', serif;
  font-weight: 300;
  font-size: 1.5em !important;

}
.parallax-container{
  height: 350px;
}

section{
  clear: both;
  position: relative;


}

section h2{
  font-family:'Josefin Slab', serif;
  font-weight: 700;

}

.center{
  text-align: center;
}

.align-right{
    text-align: right;
}
.container {
  z-index: 0;
}
.light{
  color:var(--burnt-sienna);
}
.darker{
  color: var(--night);
}
.collapsible-header{
  color:var(--night);
  background-color: var(--burnt-sienna);
  border-bottom-style: dotted;
  border-bottom-color: var(--night);
  border-bottom-width: thin;
  padding-bottom: 5px;
}

.collapsible-body{
  padding-bottom: .5rem;
  margin-left: 2rem;
  margin-right: 6rem;
}

.material-icons{
  vertical-align: middle;
}
.thumbnail img, .thumbnail a{
  overflow: hidden;
 max-width: 100%;

  text-align: center;
  object-fit: cover;
  /*min-width: 100%;*/
  /*max-height: 100vh;*/
/*  position: absolute;
  top:-20vw;
  z-index: 1;*/

  opacity: .7;
  transition: .5s all ease-out ;
  padding: 1px;
  margin: 0;
  border-radius: calc(var(--content-radius) *.25);
}

.lightbox img{
   height: 100%;
   margin: auto;
   opacity: .7;
   transition: .5s all ease-out ;
   padding: 1px;
}

.lightbox{
  height: 250px;
  overflow: hidden;
  position: relative;
  text-align: center;
  display: block;
}

.thumbnail img:hover, .thumbnail a:hover, .lightbox a:hover, .lightbox img:hover{
  opacity: 1;
  transition: .5s all ease-out;
  /*transform: scale(95%);*/

}

ul > li > p{
  padding-inline:calc(var(--content-radius)*3);
  font-family: 'Roboto', sans-serif;
  font-weight: 100;

}
ul > li > p:first-of-type, .content p:first-of-type{
    padding-top: var(--content-radius);
}

ul > li > p:last-of-type, .content p:last-of-type{
  padding-bottom: var(--content-radius);
}

.block{
  display: block;
}

.slimlink {
  padding: 0;
}

.content ul {
  margin: 5px;
  padding-top:var(--content-radius);
  padding-bottom: var(--content-radius);
  text-align: center;
}

.thumbnail {
  padding-bottom: var( --content-radius);
}

.thumbnail .col{
  padding: 0;
}

.thumbnail img{

}

@media (max-width: 1000px) {
    h1{
      font-size: 8em;
      min-height: 0;
    }

    .collapsible-header i{
      font-size: 2rem;
    }
    #minimenu{
      text-align: center;
    }
}

@media(max-width: 600px) or (pointer: coarse) {
  .content ul li, nav ul li{
    display: block;
    border-bottom : 1px dotted var(--darker-color);
    font-size: 1.1em;
    text-align: center;
  }
  .hide-on-small-only{
    display: none;
  }
  li a{
    display: block;
    padding: var(--content-radius);
  }

  h1 {
    font-size: 7em;
    min-height: 1.5em;
  }
}

.content{
  /*font-family: 'Roboto Slab', serif;
  font-weight: 200;*/
}
li a, a{
  border-top-left-radius: var(--content-radius);
  border-bottom-right-radius: var(--content-radius);
}


.preview{
  overflow: hidden;
}
.preview img{
  max-width: 25vw;
}