body::-webkit-scrollbar {
  width: 5px;               /* ширина scrollbar */
}
body::-webkit-scrollbar-track {
  background: linear-gradient(#eecc99,#eecc99) top left/100% 100% no-repeat;       /* цвет дорожки */
}
body::-webkit-scrollbar-thumb {
  background-color: #434343;    /* цвет плашки */
  border-radius: 5px;       /* закругления плашки */
  border: 1px solid #434343;  /* padding вокруг плашки */
}

 @font-face {
    font-family: font;
src:url(font/font_text2.ttf),url(font/font_text2.ttf);
   }
   
   @font-face {
    font-family: font_del;
src:url(font/font_del.ttf),url(font/font_del.ttf);
   }
    @font-face {
    font-family: font1;
src:url(font/font_text2.ttf),url(font/font_text2.ttf);
   }
     @font-face {
    font-family: font_adm;
    src: url(font/lcdtygra.ttf);
   }
   @font-face {
    font-family: font3;
    src: url(font/font8.ttf);
   }
  body { font-family:font;
}
 .F6 { font-family:font1;
 left: 35%;
}
	section  { font-family:font1;
}

.ic{
font-family: font3;

}


 
			.rightpic {
  float: right;
  white-space: nowrap;
  margin: 0 0 1em 1em;
  }
  
	.centrpic {
    float: center; 
    top: 7,5;
   
	}
	.ddd{
	white-space: pre-wrap;
	}


		
.kat{
	border: 5px  ridge #434343;
	display: inline-block;
	padding: 10px;
	
}		
			.notice-success {
background: radial-gradient(#FFFFFF,#FFFFFF);
}
   			.notice-success1 {
background: linear-gradient(#eecc99aa,#eecc99aa) top left/100% 100% no-repeat,
  url("img/fon.jpg") bottom left/100% 100% no-repeat;

background-attachment: fixed;
} 
  
 .left {
    float: left; 
	white-space: pre-wrap;
    margin: 5 1em 1em 0; 
   }  
.right{
    float: right;
	white-space: pre-wrap;
    margin: 0 0 1em 1em; 
   }
.frog{
	display: block;
}
.frog + p{
	width: 200px;
	text-align: center;
} 
.frog{
	display: block;
	white-space: pre-wrap;
}
.frog + p{
	width: 200px;
	text-align: center;
}  


@keyframes ani {
  0% {top: 0;}
  100% {opacity: 1;}
}

@keyframes  ani1{
  0% {left: -250px; }
  100% {left: 0px;}
  }
.h1{
  

  animation-duration: 3s;
  position: fixed;
  border-radius: 5px;
  left: 0;
  top: 0;
  
display: grid;
justify-content: left;
  align-items: left;
  background: linear-gradient(#eecc9900,#eecc9900) top center/100% 100% no-repeat;
   z-index: 3;
   font-family:font1;
font-weight: 100;
	padding: 30px;
    margin-left: auto;
    margin-right: auto;

	color: #434343;

}
.h1::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
 } 
.h2{
  opacity: 0;
  animation: ani 3s forwards;
  z-index: 1;
  position: absolute;
  top: 1%;
  bottom: 250px;
  left: 100px;
  right: 5%;
  font-weight: 100;
   z-index: 1;
   font-family:font;
   font-size: 20px;
   color: #434343; 
   

}
.h3{
  z-index: 1;
  width: 375px;
  height: 462px;
  font-weight: 100;
   z-index: 1;
   font-family:font;
   font-size: 30px;
   overflow: auto;

}

.h3::-webkit-scrollbar {
  width: 15px;               /* ширина scrollbar */
}
.h3::-webkit-scrollbar-track {
  background: linear-gradient(#eecc9900,#eecc9900) top left/100% 100% no-repeat;
}
.h3::-webkit-scrollbar-thumb {
  background-color: #434343;    /* цвет плашки */
  border-radius: 5px;       /* закругления плашки */
  border: 1px solid #434343;  /* padding вокруг плашки */
}
     .nicecolor1 {
	 
white-space: nowrap;

   display:inline-block;
     }
.nicecolor {
background: #eecc9955; 
border-radius: 3px;
  font-size: 20px;
  
 border: 3px #434343 solid;
padding: 5;
    margin-left: 5px;
    margin-right: auto;
	margin-top: 1;
	color: #434343;
	     display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 15px;
    
    
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden; 

}
    .nicecolor:hover {
width: 250px;
 box-shadow:3px 3px 5px #222;

     }






  

  .nicecolor i {
	
    font-size: 28px;
    flex-shrink: 0;
  }

  .nicecolor span {
    margin-left: 10px;
    white-space: nowrap;
    opacity: 0;
	position: absolute;
    
	
  }

  .nicecolor:hover span {
    opacity: 1;

	position: static;
  }
@keyframes fadeIn {from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}

.sign {
    float: right; /* Выравнивание по правому краю */
    border: 5px  ridge #434343; /* Параметры рамки */
    padding: 0 0 7px 0; /* Поля внутри блока */
    margin: 10px 0 5px 5px; /* Отступы вокруг */
    background: #0000; /* Цвет фона */ 
	width: 30%;
	z-index: 4;
	
   }
   .sign figcaption {
    margin: 0 auto 5px; /* Отступы вокруг абзаца */
	color: #434343;
	
	    font-weight: 100;

   }

.sign1 {
    float: left; /* Выравнивание по правому краю */
    border: 5px  ridge #434343; /* Параметры рамки */
    padding: 0 0 7px 0; /* Поля внутри блока */
    margin: 10px 0 5px 5px; /* Отступы вокруг */
    background: #0000; /* Цвет фона */ 
width: 30%;
	
   }
   .sign1 figcaption {
    margin: 0 auto 5px; /* Отступы вокруг абзаца */
	color: #434343;
	
	    font-weight: 100;
	}	
	
body.compensate-for-scrollbar {
    overflow: visible;
}



.Window {
opacity: 0;
  animation: ani 2.5s forwards;
  top: 2%;
  bottom:  2%;
  left: 16%;
  right: 2%;
 width: 83%;
  height: 96%;
position: fixed;
background: linear-gradient(#eecc99ee,#eecc99ee) top left/100% 100% no-repeat;
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;

}
.Window:target {
display: block;
pointer-events: auto;

}
.Window > div {

 bottom: 20%;
position: relative;

padding: 2%;
	top: 2%;
  bottom:  2%;
border-radius: 5px;


}

.h4{
  z-index: 1;

  height: 93%;
   overflow: auto;

}



.img{

	width: 83%;
	float: center;
}
.close {
left: 93%;
border: none;
	position: fixed;
	  text-decoration: none;
color: #434343;
font-family:font2;
}


.h4::-webkit-scrollbar {
  width: 15px;               /* ширина scrollbar */
}
.h4::-webkit-scrollbar-track {
  background: linear-gradient(#eecc9900,#eecc9900) top left/100% 100% no-repeat;
}
.h4::-webkit-scrollbar-thumb {
  background-color: #434343;    /* цвет плашки */
  border-radius: 5px;       /* закругления плашки */
  border: 1px solid #434343;  /* padding вокруг плашки */
}


table {
   border: 0px solid #434343;
   color: #434343;
   font-weight: 100;
   border-collapse: collapse;
}
caption {
   border: 3px solid #434343;
   color: #434343;
   font-weight: 100;
}
/* границы ячеек первого ряда таблицы */
th {
   border: 3px solid #434343;
   color: #434343;
   font-weight: 100;
}
/* границы ячеек тела таблицы */
td {
   border: 3px solid #434343;
   color: #434343;
   font-weight: 100;
   
}

.a{
color: #434343;
text-decoration: none;
}




.button1 {
  background-color: #eecc99;
border-radius: 3px;
  font-size: 20px;
  width: 200px;
 border: 3px #434343 solid;
padding: 5;
    
	margin-top: 1;
	color: #434343;
	 display: block;
  
}

.button1:hover {
  filter: brightness(0.9);
}

.button1:active {
  transform: translateY(2px);
}



.button {
  background-color: #eecc99;
   border: 3px #434343 solid;
   color:  #434343;
  padding: 0.625em;
  border-radius: 0.5em;
  cursor: pointer;
  height: 77;
}

.button:hover {
  filter: brightness(0.9);
}

.button:active {
  transform: translateY(2px);
}

.person-selector {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin: 3em auto 1em;
  max-width: 40em;
}

.person-selector-button {
  width: 100%;
  background-color: #15202b;
  color: #fff;
  font-size: 1.1em;
}

.active-person {
  background: #08529d;
  box-shadow: 0 0 0.5em 0.1em #c3c3c333;
}


.zag{
	
	color: 800000;
}



.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(#eecc99aa,#eecc99aa) top left/100% 100% no-repeat;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#myImg{
	position: absolute;
	transform: scale();
}

/* Стили для списка чатов */
.chat-list {
    list-style: none;
    padding: 0;
}

.chat-list li {
    background-color: #eecc99;
   border: 3px #434343 solid;
   
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
	
}

.chat-list li a {
    color:  #434343;
    text-decoration: none;
	
}


/* Стиль для чата */
.chat-container {
    margin-top: 30px;
		
}
	

.messages::-webkit-scrollbar {
  width: 5px;               /* ширина scrollbar */
}

.messages {
    margin-bottom: 20px;
	height: 70%;
	overflow: auto;
	
}	


.message {
	color:  #434343;
	font-size: 0.7em;
  margin-bottom: 0.31em;
  word-wrap: break-word;
    padding: 10px;
    margin-bottom: 10px;
	border-radius: 5px;
	 
   
}

.user {
	color:  #434343;

    background-color: #eecc99;
   border: 3px #434343 solid;
}

.Anime {
	color:  #007700;
	font-family: font_adm;
	font-weight: 600;
	
    background: linear-gradient(#eecc9996,#eecc9996) top left/100% 100% no-repeat,
  url("img/fon_soc1.png") bottom left/100% 100% no-repeat;
   border: 3px #434343 solid;

}
.Anime .a{
color:  #007700;
}

.NATO {
	color:  #434343;
    background: linear-gradient(#eecc9996,#eecc9996) top left/100% 100% no-repeat,
  url("img/fon_soc3.gif") bottom left/100% 100% no-repeat;
   border: 3px #434343 solid;
}

.karto {
	color:  #434343;
    background: linear-gradient(#eecc9996,#eecc9996) top left/100% 100% no-repeat,
  url("img/fon_soc2.jpg") bottom left/100% 100% no-repeat;
   border: 3px #434343 solid;
}
.dogolar {
	color:  #434343;
    background: linear-gradient(#eecc9996,#eecc9996) top left/100% 100% no-repeat,
  url("img/fon_soc.png") bottom left/100% 100% no-repeat;
   border: 3px #434343 solid;
}
.dok {
	color:  #434343;
    background: linear-gradient(#eecc9996,#eecc9996) top left/100% 100% no-repeat,
  url("img/fon_soc3.jpg") bottom left/100% 100% no-repeat;
   border: 3px #434343 solid;
}

.message span {
	
      font-weight: bold;
  margin-bottom: 0.31em;

}

.message-del{
	font-family: font_del;
	font-size: 0.7em;
	font-style: italic;
	font-style: oblique;
	color: 800000;
	
}



.message-del .a{

	color: 800000;
	
}

.message-time {
     font-size: 0.75em;
  text-align: right;
  
  
}

form {
	
    display: flex;
    flex-direction: column;
    
    margin-top: 20px;
}

form input, form textarea {
    font-size: 70px;
    padding: 10px;
    margin: 5px 0;
    color:  #434343;
    background-color: #eecc99;
   border: 3px #434343 solid;
    border-radius: 5px;
    font-size: 14px;
}

form button {
    padding: 10px 20px;
 color:  #434343;
    background-color: #eecc99;
   border: 3px #434343 solid;
    border-radius: 5px;
    cursor: pointer;
}



.container {
    width: 80%;
    margin: 0 auto;
    background-color: #eecc99aa;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}



.posts .post {
    border-bottom: 3px solid #434343;
    padding: 15px;
    margin-bottom: 15px;
	
}

.messages .post {
    border-bottom: 3px solid #434343;
    padding: 15px;
    margin-bottom: 15px;
	
}

.post{
	border-radius: 5px;
	margin-left: 110px;
}

.post img {
    max-width: 70%;
    height: auto;
   object-fit: cover;
  object-position: center; 
    margin: 10px 0;
	border-radius: 5px;
	 
  display:block;
  transition:transform .6s cubic-bezier(.2,.9,.3,1);
}
.post img:hover, .post img:focus-within{
  transform: scale(1.034) rotate(0.3deg);
}
.new-post form {
    margin-top: 30px;
}



.avatar{
	border-radius: 90%;
	object-fit: cover;
	width: 75px;
	height:  75px;
	
}





.koment-url {
	
	 padding: 10px;
    margin: 5px 0;
    color:  #434343;
    background-color: #eecc9996;
   border: 3px #434343 solid;
    border-radius: 5px;
    font-size: 14px;
}


@media (min-width: 481px) and (max-width: 768px) {
  .h2 {
   font-size: 4vw;
  }
}

@media  (max-width: 480px) {
  .h2{
   font-size: 5vw;
  }
}