:root{
    --color1:#01fffd;
	--color2:#0089fd;
    --color3:#0137fb;
}

.color1{ color: var(--color1);}
.color2{ color: var(--color2);}
.color3{ color: var(--color3);}

.bgColor1{  background-color: var(--color1);}
.bgColor2{ background-color: var(--color2);}
.bgColor3{ background-color: var(--color3);}

.inputSite{
    width: 95%;
    height:40px;
    padding-left:5px;
    padding-right:5px;
    margin: 5px;
    border:1px solid var(--kdBlack);
    border-radius: 5px;
}

.areaSite{
    width: 95%;
    height:150px;
    padding:5px;
    margin: 5px;
    border:1px solid var(--kdBlack);
    border-radius: 5px;
}


*{
    margin: 0;
    padding: 0;
	font-size:14px;
	box-sizing: border-box;
	/* font-family: 'Kanit', sans-serif; */
    font-family: 'Poppins', sans-serif
}


a{
	text-decoration: none;
	color:#000;
}

body
{background-color:white}

.main
{
	display:flex;
	width:100vw;
	height:90vh;
	margin-top:10vh;
	/* background-color:green; */
	justify-content:center;
	align-items:flex-start;
	
}

.KD
{
	font-size:4vw;
}
.layer1
{
	display:flex;
	background-color:white;
	justify-content:center;
	align-items:center;
	width:50vw;
	height:40vh;
	border-radius:1vw;
	border:1px solid #FDB320;
	box-shadow: 0px 0px 24px 9px #FDB320;
	

	
	/* height:90vh; */
}

@media screen and (min-width: 600px) {
	body {
	  width: 600px;
	  margin: 0 auto; /* Optionnel : Centrer le contenu sur l'écran */
	}
  }