@import url('https://fonts.googleapis.com/css2?family=EB+Garamond');
@import url('https://fonts.googleapis.com/css2?family=Mea+Culpa');

@font-face {
    font-family: 'Heavy Rain';
    src: url("https://pleurodelinae.neocities.org/fonts/heavy-rain.ttf");
    src: url("https://pleurodelinae.neocities.org/fonts/HeavyRain.woff");
}

body {
  margin: 0px;
  background: url(https://pleurodelinae.neocities.org/assets/background.jpg) repeat top fixed;
  background-position: 0% 50%;
  background-size: 400px;
  background-color:#100001;
  font-family: 'EB Garamond', serif;
}

.list li {
    position:relative;
    overflow:hidden;
    max-width:520px;
    font-size: 17px;
}

.list li span {
    display:inline;
    background-color:#f1ece5;
    padding-right:5px;
    z-index:2;
}

.list li .number {
    float:right;
    font-weight:normal;
    padding-left:5px;
}

h1 {
  color: #021714;
  font-weight:normal;
  font-size:42px;
  text-transform:uppercase;
  letter-spacing:0.075em;
  font-family: 'EB Garamond', serif;
 }
 
h2 {
 color: #021714;
 font-weight:normal;
 font-size:25px;
 text-transform:uppercase;
 letter-spacing:0.075em;
 font-family: 'EB Garamond', serif;
 }
 
h3 {
 color: #021714;
 font-weight:normal;
 font-size:20px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-family: 'EB Garamond', serif;
 }

p {
  text-align: left;
  font-family: 'EB Garamond', serif;
  font-size: 19px;
  line-height: 1.25;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  text-align: justify;
  hyphens: auto;
 }
 
 p.big-letter::first-letter {
  font-family: 'Mea Culpa', cursive;
  float: left;
  font-size: 49px;
  margin: -0.02em 0.15em 0 0;
}
 
.small {
  font-family: 'EB Garamond', serif;
  font-size: 17px;
  line-height: 1;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  hyphens: auto;
}
 
.augh {
 color: #DD470C;
 text-decoration: underline;
 }
 
.augh:hover {
 color: #6e3464;
 text-decoration: none;
 transition:.3s;
 }
 
a {
 color: #021714;
 text-decoration: none;
 }
 
a:hover {
 color: #021714;
 text-decoration: none;
 }

.tout {
 margin: 0 auto;
 max-width: 900px;
 border-top: 0px;
 border-bottom: 0px;
 box-shadow: 0px 0px 30px black;
 }

.nav {
 width: 225px;
 overflow-y: auto;
 float: left;
 background:url(https://pleurodelinae.neocities.org/assets/sidebar.jpg);
 text-align: center;
 height:100vh;
}

.droit {
 max-width: 675px;
 overflow-y: auto;
 background-color: #f1ece5;
 color: #021714;
 height:100vh; 
  padding:0px 15px 0px 15px;
 scrollbar-width:thin;
 scrollbar-color:#DD470C #f1ece5;
}

hr {
 border-color:#021714;
 border-top: 1px;
  }

	@media
	  only screen 
    and (max-width: 650px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {
		nav,tout {
			display: block;
            height: auto;
		}
        
        .nav {
           width: 100%;
           max-width: 675px;
           float: none;
           max-height:250px; 
      }
        
        .droit {
           height: inherit;
        }
        
        .list li {
    max-width:330px;
        }
        }