/* Firefox only */

* {

  box-sizing: border-box;

  

  scrollbar-width: thin;

  scrollbar-color: #fcd34d  #fef3c7;

        }

	a:link {
	  text-decoration: none;
	}
@keyframes Link {

		  0% {

			opacity: 0.3;

				}

		  50% {

			opacity: 0.6;

				}

		  100% {

			opacity: 0.9;

					}

			}		
	a.dico:hover {
		/*font-size: 1.1em;	*/

		color: #d0b61b;

		animation: Link 1.6s infinite;
					}

	.text-shadow_mob {

		text-shadow: 9px 9px 4px rgb(148, 148, 148);

						}

	.text-shadow_sm {

    text-shadow: 9px 9px 4px rgb(148, 148, 148);

					}

	.text-shadow_wide {

    text-shadow: 14px 14px 6px rgb(148, 148, 148);

					}

	.bg-image_mob {

		background-image: url('fond_caracteres_320-640.png');

		background-size: cover;

								 }

						/* Add any other background properties you want */

	.bg-image_sm {

        background-image: url('fond_caracteres_640-1024.png');

        background-size: cover;

                 }

		/* Add any other background properties you want */

    .bg-image {

        background-image: url('fond_caracteres_1440-900.png');

		background-size: cover;

               }

		 

.text-center {

  text-align: center;

}

.text-7xl {

  font-size: 4.5rem;

  line-height: 1;

}

.mt-8 {

  margin-top: 2rem;

}

.mb-8 {

  margin-bottom: 2rem;

}



@font-face {

    font-family: "MaShanZheng-Regular";

    src: url("fonts/MaShanZheng-Regular.eot");

    src: local("☺"), url("fonts/MaShanZheng-Regular.woff2") format("woff2"),

      url("fonts/MaShanZheng-Regular.woff") format("woff"),

      url("fonts/MaShanZheng-Regular.ttf") format("truetype"),

      url("fonts/MaShanZheng-Regular.otf") format("otf"),

      url("fonts/MaShanZheng-Regular.svg") format("svg");

    size-adjust: 140%;

    font-display: swap;

    font-weight: normal;

    font-style: normal;

}

.font-mashan {

    font-family: "MaShanZheng-Regular";

}

@font-face {

  font-family: "pinyinok";

  src: url("fonts/pinyinok.eot");

  src: local("☺"), url("fonts/pinyinok.woff2") format("woff2"),

    url("fonts/pinyinok.eot.woff") format("woff"),

    url("fonts/pinyinok.eot.ttf") format("truetype"),

    url("fonts/pinyinok.eot.otf") format("otf"),

    url("fonts/pinyinok.eot.svg") format("svg");

  font-display: swap;

  font-weight: normal;

  font-style: normal;

}

.font-pinyin {

  font-family: "pinyinok";

}

@font-face {

  font-family: "Helvetica";

  src: url("Helvetica.eot");

  src: local("☺"), url("fonts/Helvetica.woff2") format("woff2"),

    url("fonts/Helvetica.woff") format("woff"),

    url("fonts/Helvetica.ttf") format("truetype"),

    url("fonts/Helvetica.otf") format("otf"),

    url("fonts/Helvetica.svg") format("svg");

  font-display: swap;

  font-weight: normal;

  font-style: normal;

}

.font-Helvetica {

  font-family: "Helvetica";

}

@font-face {

  font-family: "Arial-Unicode-MS";

  src: url("Arial-Unicode-MS.eot");

  src: local("☺"), url("fonts/Arial-Unicode-MS.woff2") format("woff2"),

    url("fonts/Arial-Unicode-MS.woff") format("woff"),

    url("fonts/Arial-Unicode-MS.ttf") format("truetype"),

    url("fonts/Arial-Unicode-MS.otf") format("otf"),

    url("fonts/Arial-Unicode-MS.svg") format("svg");

  font-display: swap;

  font-weight: normal;

  font-style: normal;

}

.font-Arial {

  font-family: "Arial-Unicode-MS";

}


@font-face {

  font-family: "Lobster";

  src: url("fonts/Lobster.eot");

  src: local("☺"), url("fonts/Lobster.woff2") format("woff2"),

    url("fonts/Lobster.woff") format("woff"),

    url("fonts/Lobster.ttf") format("truetype"),

    url("fonts/Lobster.otf") format("otf"),

    url("fonts/Lobster.svg") format("svg");

  font-display: swap;

  font-weight: normal;

  font-style: normal;

}

.font-Lobster {

  font-family: "Lobster";

}



	.pinyin1 {

		  font-family: "pinyinok", sans-serif;

		  font-style: unset;

		  font-size: 1.2em;

		  color: #d01b53;

		  opacity: 0.6;

		}

		.pinyin2 {

		  font-family: "pinyinok",  sans-serif;

		  font-style: unset;

		  font-size: 1.2em;

		  color: #266f06;

		  opacity: 0.6;

		}

		.pinyin3 {

		  font-family: "pinyinok", sans-serif;

		  font-style: unset;

		  font-size: 1.2em;

		  color: #1f4cba;

		  opacity: 0.6;

		}

		.pinyin4 {

		  font-family: "pinyinok", sans-serif;

		  font-style: unset;

		  font-size: 1.2em;

		  color: #5d5a5a;

		  opacity: 0.6;

		}

		.pinyin5 {

		  font-family: "pinyinok", sans-serif;

		  font-style: unset;

		  font-size: 1.2em;

		  color: #ded6d6;

		  opacity: 0.6;

		}

		.chinese {

			font-family: "MaShanZheng-Regular";

			font-size: 1.1em;

			color: #484848;

			opacity: 0.8;

		}

				

	.flex {

  display: flex;

		}

	.flex-col {

  flex-direction: column;

			}

	.items-center {

  align-items: center;

				}

	.font-semibold {

  font-weight: 600;

				}

	.overflow-y-auto {

  overflow-y: auto;

					}

	.overflow-x-hidden {

  overflow-x: hidden;

					}
	
	.p-2 {

  padding: 0.5rem;

		}

	.p-5 {

	padding: 1.25rem;

		}

	.bg-blue {

  --tw-bg-opacity: 1;

  background-color: rgb(85 137 224 / var(--tw-bg-opacity));

			}

	.bg-green {

  --tw-bg-opacity: 1;

  background-color: rgb(77 179 11 / var(--tw-bg-opacity));

			}

	.bg-red {

  --tw-bg-opacity: 1;

  background-color: rgb(245 107 150 / var(--tw-bg-opacity));

			}
			
	.pink {
  font-family: "Courier new", monospace;
  font-style: unset;
  opacity: 0;
			}
	.green {
  font-family: "Courier new", monospace;
  font-style: unset;
  opacity: 0;
			}
	.blue {
  font-family: "Courier new", monospace;
  font-style: unset;
  opacity: 0;
			}

	.ml-1 {

  margin-left: 0.25rem;

		}			

	.ml-2 {

  margin-left: 0.4rem;

		}

	.ml-3 {

  margin-left: 0.5rem;

		}

	.mr-1 {

  margin-right: 0.25rem;

		}

	.mr-2 {

  margin-right: 0.4rem;

		}

	.mr-3 {

  margin-right: 0.5rem;

		}

	.rounded-md {

  border-radius: 0.4rem;

				}

	.rounded-lg {

  border-radius: 0.5rem;

				}

	.mt-2 {

  margin-top: 0.5rem;

		}

	.text-left {

  text-align: left;

			}

	.mt-8 {

  margin-top: 2rem;

		}

	.mb-8 {

  margin-bottom: 2rem;

		}

	.text-0-5xl_mob {

  font-size: 0.9rem;

  line-height: 1.05;

			}
	.text-0-5xl_sm {

  font-size: 0.97rem;

  line-height: 1.05;

			}
			
	.text-0-5xl_wide {

  font-size: 1.2rem;

  line-height: 1.05;

			}
	
	.text-0-5xl {

  font-size: 1.05rem;

  line-height: 1.05;

			}

	.text-1-5xl {

  font-size: 1.2rem;

  line-height: 1.1;

			}

	.text-2xl {

  font-size: 1.45rem;

  line-height: 1.32;

			}

	.text-2-5xl {

  font-size: 1.65rem;

  line-height: 1.22;

			}

	.text-3xl {

  font-size: 1.8rem;

  line-height: 1.1;

			}

	.text-3-5xl {

  font-size: 2rem;

  line-height: 1.1;

			}

	.text-4xl {

  font-size: 2.0rem;

  line-height: 1.1;

			}

	.text-4-5xl {

  font-size: 2.8rem;

  line-height: 1.1;

			}

	.text-5xl {

  font-size: 3rem;

  line-height: 1.1;

			}

	.text-6xl {

  font-size: 3.5rem;

  line-height: 1;

			}

	.text-7xl {

  font-size: 4.5rem;

  line-height: 1;

			}

	.mt-6 {

  margin-top: 1.5rem;

		}

	.mb-6 {

  margin-bottom: 1.5rem;

		}

	

	.bg-repeat {

		background-repeat: repeat;

			}

	.bg-no-repeat {	

		background-repeat: no-repeat;

				}

	.h-screen {

		  height: 100vh;

				}

	.conteneur_mob {

	  width: 100%;

	  min-height: 100vh;

	  overflow: hidden;

					}

	.conteneur_sm {

	  width: 100%;

	  min-height: 100vh;

	  overflow: hidden;

					}

	.conteneur {

	  width: 100%;

	  min-height: 100vh;

	  overflow: hidden;

				}

	  /* tells the browser how the bar will look in conteneur_mob*/

	.colone_mob::-webkit-scrollbar {

			  width: 2px;

			  /*border: 2px solid blue;*/

								}

	/*tells the browser how the arrows will appear */

		.colone_mob::-webkit-scrollbar-button:single-button {

			  background-color: #fcd34d;

			  border-radius: 4px;

			  height: 8px;

			  width: 2px;

															 }

	  /* tells the browser how the scrollable 

		handle would look like */

		.colone_mob::-webkit-scrollbar-thumb {

			  border-radius: 8px;

			  background: #d1d5db;

											}

		/* tells the browser how will the 

	   path of the handle will look like */

		.colone_mob::-webkit-scrollbar-track {

			  background: #949494;

											}

	/* tells the browser how the bar will look in conteneur_sm*/

	.colone_sm::-webkit-scrollbar {

			  width: 2px;

			  /*border: 2px solid blue;*/

								}										

	  /*tells the browser how the arrows will appear */

		.colone_sm::-webkit-scrollbar-button:single-button {

			  background-color: #fcd34d;

			  border-radius: 4px;

			  height: 8px;

			  width: 2px;

															 }

	  /* tells the browser how the scrollable 

		handle would look like */

		.colone_sm::-webkit-scrollbar-thumb {

			  border-radius: 8px;

			  background: #d1d5db;

											}

		/* tells the browser how will the 

	   path of the handle will look like */

		.colone_sm::-webkit-scrollbar-track {

			  background: #949494;

											}

														  

	  /* in conteneur */

			/* tells the browser how the bar will look */

	.colone::-webkit-scrollbar {

			  width: 4px;

			  /*border: 2px solid blue;*/

										}

	  /*tells the browser how the arrows will appear*/

			.colone::-webkit-scrollbar-button:single-button {

			  background-color: #fcd34d;

			  border-radius: 8px;

			  height: 8px;

			  width: 4px;

														}

	  /* tells the browser how the scrollable 

		handle would look like */

			.colone::-webkit-scrollbar-thumb {

			  border-radius: 4px;

			  background: #d1d5db;

											 }

	  /* tells the browser how will the 

	   path of the handle will look like */

			.colone::-webkit-scrollbar-track {

			  background: #949494;

											}

											

	 .custom-height-up {

			  height: 82vh ;       }

			.custom-height-middle {

			  height: 82vh ;       }

			.custom-height-down {

			  height: 76vh ;       }

	 .width_mob {

		 width: 94%;

	 }

	 .width_sm {

		 width: 96%;

	 }

	 .width_wide {

		 width: 97%;

	 }

	 

	.divshadowred_mob {

          box-shadow: 9px 9px 4px rgb(168, 89, 89);     }

        .divshadowgreen_mob {

          box-shadow: 9px 9px 4px rgb(91, 143, 89);      }

        .divshadowblue_mob {

          box-shadow: 9px 9px 4px rgb(103, 99, 145);

							}			  

			  

	.divshadowred_sm {

          box-shadow: 9px 9px 4px rgb(168, 89, 89);     }

        .divshadowgreen_sm {

          box-shadow: 9px 9px 4px rgb(91, 143, 89);      }

        .divshadowblue_sm {

          box-shadow: 9px 9px 4px rgb(103, 99, 145);

							}	

	.divshadowred {

				  box-shadow: 12px 12px 6px rgb(168, 89, 89);     }

		.divshadowgreen {

				  box-shadow: 12px 12px 6px rgb(91, 143, 89);      }

		.divshadowblue {

				  box-shadow: 12px 12px 6px rgb(103, 99, 145);

						}

						

	  .leftside_mob,

      .middle_mob,

      .rightside_mob {

      flex-grow: 3;

      flex-shrink: 5;

      width: 28%;

      transition: width 4s;

                 }
				 
	.leftside_mob:hover,

      .middle_mob:hover,

      .rightside_mob:hover {

			width: 88%;
			
                       }

				 

      .leftside,

      .middle,

      .rightside {

      flex-grow: 3;

      flex-shrink: 5;

      width: 32%;

      transition: width 4s;

                 }
	
	.leftside:hover,

      .middle:hover,

      .rightside:hover {

			width: 94%;
			
                       }

	.pink,

	.green,

	.blue  {

	  font-family: "Courier new", monospace;

	  font-style: unset;

	  opacity: 0;

	          }

	.button_to_welcome_mob,

		.button_vers_bienvenue_mob {

			font-family: "Courier new", monospace;

			background-color: rgb(230, 240, 93);

			display: block;

			width: 70%;

			margin-left: auto;

			margin-right: 2px; 

				}

		.button_đến_hoan_nghênh_mob{

			font-family: "Courier new", monospace;

			background-color: rgb(230, 240, 93);

			display: block;

			width: 76%;

			margin-left: auto;

			margin-right: 2px; 

				}

	.button_to_welcome_sm,

		.button_vers_bienvenue_sm {

			font-family: "Courier new", monospace;

			background-color: rgb(230, 240, 93);

			display: block;

			width: 70%;

			margin-left: auto;

			margin-right: 2px; 

				}

		.button_đến_hoan_nghênh_sm{

			font-family: "Courier new", monospace;

			background-color: rgb(230, 240, 93);

			display: block;

			width: 76%;

			margin-left: auto;

			margin-right: 2px; 

				}

	.button_to_welcome,

		.button_vers_bienvenue,

		.button_đến_hoan_nghênh{

			font-family: "Courier new", monospace;

			background-color: rgb(230, 240, 93);

			display: block;

			width:44%;

			margin-left: auto;

			margin-right: 2px; 

				}

		.bt1, 

		.bt2,

		.bt3{

		  font-weight: bolder;

		  animation: Test 1s infinite;

			}

		@keyframes Test {

		  0% {

			opacity: 1;

				}

		  50% {

			opacity: 0;

				}

		  100% {

			opacity: 1;

					}

			}