/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
    font-family: "Smythe";
    src: url("./Smythe-Regular.ttf") ;

}

@font-face {
    font-family: "Snigletregular" ;
    src: url("./Sniglet-Regular.ttf") ;
}

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

body {
  background-color: #759179;
  font-family: "Snigletregular";
  background-image:url(./img/dither5.png)
}

#logo{
  display: flex;
  justify-content: center;
}

h1{
  color:#ffe0cf;
  font-family: "Alkhemikal" !important;
  font-size: 35pt;
  margin-top:15px;
  margin-bottom:15px;
}

h2{
  color:#e7976a;
  font-family: "Alkhemikal" !important;
  font-size: 25pt;
  margin-top:15px;
  margin-bottom:15px;
}

h3{
  text-align:center; 
  margin-top: 100px; 
  margin-bottom:30px; 
  color: #ffe0cf;
  font-family: "Alkhemikal" ;
  font-size: 20pt
}

nav ul li a {
  color: white;
  font-size: 80%;
  margin:5px;
  text-decoration: none;
}

nav ul li a:hover {
  color: #e7976a;
  font-size: 80%;
  margin:5px;
  text-decoration: none;
}


img{
  max-width: inherit; /*Ceci assure que l'image ne dépasse jamais la taille de son conteneur*/
  max-height: inherit;
  height: inherit;
  width: inherit;
  object-fit: cover;
}

#main {
  margin: auto;
  min-width: 1000px;
  max-width: 1000px;

}

#main background-image{
  max-width: 100%;
}

#content {
  display: flex;
  flex-direction: row;
  height: 600px;
    background-image: url(./img/layout7.png);
}

nav, #sidebar {
min-width: 140px;
max-width: 140px;
padding: 10px;
/*background-color: rgb(41, 77, 53);*/
}

.articleholder {
  overflow: scroll;
  overflow-x: hidden;
  max-height: 100%;
  scrollbar-width: thin;
  scrollbar-color: #e7976a #140d08;
}

#welcomeimg {
  display:block;
  padding: 10px;
  border-color:black;
  border: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.article {
  padding-left: 5%;
  padding-right: 5%;
  border: 2px dotted;
  border-color:rgba(255, 255, 255, 0.267);
  margin: 2%;
  overflow: hidden;
}

.articleimg {
  max-height: 300px;
  max-width: 250px;
  overflow:hidden;
  float:left ;
  margin-right:15px;
  margin-bottom:15px;
}

p {
color:white;
}

#navigationlist{
  list-style: none;
  text-align: left;
}

#navigationlist li{
border-bottom: 1px dotted;
border-color:white;
  
}

#sidebar{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}

.bouton{
  max-width: 88px;
  max-height: 31px;
  margin-bottom: 5px;
}

footer { 
text-align: center;
}