.fond-blog
{
    background-image: url(../img_blg/fond-fond.jpg);
    background-attachment:fixed;
    background-size:auto;
}

.title-blog
{
    font-family: 'Corinthia', cursive;
    text-shadow:  rgb(0, 0, 0) 1px 1px 0px;
    font-size: 500%;
    color: indianred;
    text-decoration: none;
    margin-bottom: 120px;
    margin-top: 105px;
}

.chatblog{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(7, max-content);
    grid-template-areas: "blog1 chat"
                         "blog2 chat"
                         "blog3 chat"
                         "blog6 chat"
                         "blog7 chat"
                         "blog8 chat"
                         "blog9 chat";}

#bloc_blog
{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../img_blg/fond.jpg);
    margin: 20px 20px 20px 20px;
    padding: 30px 50px 50px;
    font-family: 'Indie Flower', cursive;
    font-size: 28px;
    text-align: justify;
    color: rgb(26, 26, 26);
    line-height: 30px;
}
.blog1{grid-area: blog1;}
.blog2{grid-area: blog2;}
.blog3{grid-area: blog3;}
.blog4{grid-area: blog4;}
.blog5{grid-area: blog5;}
.blog6{grid-area: blog6;}
.blog7{grid-area: blog7;}
.blog8{grid-area: blog8;}
.blog9{grid-area: blog9;}
/*

.title-blog2
{
    font-family: 'Corinthia', cursive;
    text-shadow:  rgb(0, 0, 0) 1px 1px 0px;
    font-size: 400%;
    color: rgb(92, 113, 205);
    text-decoration: none;
    margin-bottom: 20px;
    line-height: 80px;

}*/

.citation
{
    text-align:right;
    font-size: 70%;
    font-family: Arial, Helvetica, sans-serif;
}

.title-article
{
    margin-top: 50px;
    font-family: 'Kalam', cursive;
    color: rgb(10, 27, 185);
    font-size: 200%;
    text-shadow:  rgb(0, 0, 0) 0px 1px 0px;
    line-height: 65px;
}

.fxlinkarchiv :hover{   
    font-size: 350%;     }


.archivlink{
    text-align: center;
    margin-top: 40px;
    font-family: 'Kalam', cursive;
    color: rgb(10, 27, 185);
    font-size: 300%;
    line-height: 30px;
    text-decoration: none;
    text-shadow:  rgb(0, 0, 0) 0px 1px 0px;
}

/*----------------------------------------------------FORUM----------------------------------------------------*/

.title-forum
{
    margin-top: 120px;
    font-family: 'Corinthia', cursive;
    text-shadow:  rgb(0, 0, 0) 1px 1px 0px;
    font-size: 900%;
    color: indianred;
    text-decoration: none;
    margin-bottom: 10px;
}

.count
{
    background: #222222;
	color: white;
	font-size: 15px;
    border-radius: 5px;
    padding: 10px;
    margin-top: 15px;
    line-height: 20px;

}
.chat
{
    grid-area: chat;
    margin: 20px 0px 20px 0px;
    background-image: url(../img_blg/fond.jpg);
}

.wrapper {

	border-radius: 5px;

	display: flex;
    flex-direction: column;
    align-items: center;

    
}
.frmline
{
    background: #222222;
	color: white;
	font-size: 20px;
    width: 88%;
	border-radius: 10px;
	border: none;
	outline: none;
	padding: 5px;
	margin-bottom: 10px;
	margin-top: 10px;
    font-family: 'Indie Flower', cursive;
    line-height: 25px;
}

.frm{
 
    background: #222222;
	color: white;
	font-size: 20px;
    width: 88%;
	border-radius: 10px;
	border: none;
	outline: none;
	padding: 5px;
	margin-bottom: 10px;
	margin-top: 10px;
    font-family: 'Indie Flower', cursive;
    line-height: 25px;
}

.wrapper .form input {
	background: #222222;
	color: white;
	font-size: 15px;
	width: 85%;
	border-radius: 10px;
	padding: 10px;
	border: none;
	outline: none;
	margin-bottom: 5px;
	margin-top: 5px;
}

.wrapper .form textarea {
	background: #222222;
	color: white;
	font-size: 15px;
	width: 85%;
	border-radius: 10px;
	padding: 10px;
	border: none;
	outline: none;
	resize: none;
	margin-top: 5px;
}

.wrapper .form .btn {
	background: #222222;
	color: white;
	font-size: 15px;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 10px;
	width: auto;
	border-radius: 10px;
	margin: 0 auto;
	display: block;
	margin-top: 5px;
	margin-bottom: 20px;
	opacity: 0.8;
	transition: 0.3s all ease;
}

.show_blog{
    display:flexbox;
    width: 50px;
    height:50px;
    cursor:pointer;
    background:transparent;
    border:none;
    position:relative;
}

.show_blog:hover{
    transform: rotate(90deg);
    transition: all .4s ease-in-out;
}

.sous-titre{font-style: italic; font-size: 70%; font-family:Verdana, Geneva, Tahoma, sans-serif;
    color: #000000;
}
@media only screen and (max-width:768px) /*phone*/
{
#bloc_blog{font-size: 1.3em; margin: 10% 0px 10% 0px; padding: 20px; font-weight: 800;}
.title-forum{font-size: 800%; margin-top: 20px;}
.chatblog{
    grid-template-columns:1fr;
    grid-template-rows: repeat(9, max-content);
    grid-template-areas: "blog1"
                         "chat"
                         "blog2"
                         "blog3"
                         "blog6"
                         "blog7"
                         "blog8"
                         "blog9";}
.archivlink{margin-top: 20px;}
}