body {

    background-color:#202124;
    font-family: 'Avenir LT Std', sans-serif;
    
  }


p
{
margin: 0 auto;
padding:5px;

}


#container{
	
	display:flex;
	flex-direction:column;
	
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	color:#DDE0E4;
	
}


.logocont
{

align-self:baseline;
position:relative;

}
.contenucol

{

display:flex;
flex-direction:column;
width:100%;
justify-content:center;
align-items:center;
}
.contenurow
{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}


#weathericon
{

}




@keyframes opacityzer 
{

from{
opacity:0%;

}
to{
opacity:100%;
}

}


.cat
{

    height: 200px;
    width: 400px;
  transform: translateX(-40%) scale(0.2);
    position: absolute;
    top: -9;
    
}

.walking
{
animation: catwalk 2s steps(12);
background: url("../img/cat_tiles.png") 0 0 no-repeat;
}
.walkingtoleft
{


}

@keyframes catwalk{
from{
background-position: 0 0 ;

transform: translateX(120%) scale(0.2);


}
to
{
background-position: 0 -2393px;
transform: translateX(-40%) scale(0.2);

}
}




#content
{
	
	
	
    font-size:25px;
	
}

#welcome
{
	
	background-color:#303134;
	
		border-radius: 25px;
	padding: 10px;
	
	display: flex;
  
    align-items:center;
  width:fit-content;
	
}

.small50
{

width:50px;

}
h1
{
color:	#DDE0E4;
	font-size:25px;
	font-weight:normal;
	margin:0px;
	text-align:center;
}
h2
{

color:BD5600;	
font-size:18px;
font-weight:normal;
margin:10px;
}
.th 

{
 font-size:20px;
 font-weight:bold;
display:flex;
	color:242424;
	padding:5px;
	align-items:baseline;
}
.nred
{
color:#E23951;
}
.nblue
{
color:#0074D9;
}
.nyellow
{
color:#FFDC64;
}
#weather
{
	display:flex;
	align-items:center;
	flex-direction:column;
	padding:5px;
	height:fit-content;
	
}
#tempextvalue 
{
	
	
}
#humivalue
{
	
}


#energie
{
	display:flex;
	
	
	border-radius: 25px;
	
	width:100%;
	justify-content:center;
	
}

.prix
{

font-weight:bold;
font-size:20px;
}

.elec
{
display:flex;
	flex-direction: column;
	justify-content:space-between;
	align-items:center;
	
	margin:15px;
	
	background-color:white;
	border-radius: 25px;
	
	text-align:center;
	background-color:#303134;
	width:90%;
	max-width:1000px;

}
#canvaselec
{

aspect-ratio:auto;
width:90%;
}

.canvasstyle
{
aspect-ratio:auto;


max-width:1500px;




}

.partname
{
font-size:24px;
	

}

#inactivity
{
display:none;
flex-direction: column;
    align-items: center;
    justify-content: center;
   
    background-color: #303134;
    border-radius:25px;
    width:35%;
    padding:5px;
    margin:15px;

	
}

#module
{
	width:100%;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	font-size:25px;
	color:#C45A01;
}
.inter
{
	display:flex;
	height:min-content;
	
	
	align-items:center;
	width:90%;
      max-width:1000px;
	background-color:white;
	border-radius: 25px;
	padding: 15px;
	margin:15px;
	text-align:center;
	background-color:#303134;
	
	
}
.python
{
	display:flex;
	
	
	align-items:center;
	width:auto;
	height:fit-content;
	background-color:white;
	border-radius: 25px;
	padding: 15px;
	margin:15px;
	text-align:center;
	background-color:#303134;
	
}
#pythonstate
{

}
.growtwo
{


}
.big
{

width:100%;
}


#infoplagechauffeeau
{

display:flex;
flex-direction:column;


}
.inputplage
{

width:65px;
background-color:#303134;
border:0;
color:white;
font-size:30px;

font-weight:bold;
}


#garageimg
{

}

#togglegaragebutton
{

}

.button
{
border-radius: 15px;
    background-color: #656D78;
    height: 40px;
    color: white;
    width:auto;
    font-size:20px;
    margin:10px;
}


.icon{

width:10px;
}

.iconmenu{
width:90px;
}
.iconmenu50{
width:50px;
}
.iconapp{
	width:50px;
	padding:10px;
	
	
}
.icon100
{

width:50px;

position:relative;

}
.icon60
{

width:60px;

}
.icon80
{

width:80px;
padding:20px;

}


.smallicon{
	width:20px;
	height:20px;
	
}
.switch {
  
  display: flex;
  margin:5px;
  justify-content:center;
  width:50%;

}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  display:flex;
  justify-content:center;
  background-color: transparent;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {


display:flex;

  content: "";
  height: 30px;
  width: 30px;

  background-color: red;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: transparent;
}

input:focus + .slider {
  box-shadow: 0 0 1px transparent;
}

input:checked + .slider:before {

    background-color: lightgreen;
    transform:scale(1.5);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


.charteco{

height:600px;
width:100%

}