@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Condensed|Encode+Sans+Semi+Expanded|Ubuntu&display=swap');

*{margin:0;padding: 0}
body{background: #272822;font-family: 'Encode Sans Semi Expanded', sans-serif;color: white;overflow-x: hidden}
header{height: 10vh}
section{width: 100vw}
article{width: calc(50vw - 1px)}
.html{float: left;border-right: 1px black solid}
.css{float: right;border-left: 1px black solid}

h1{text-align: center;color: red;font-family: 'Ubuntu', cursive}
h2{text-align: center;color: white;font-size: 25px}
h3{color: gray;margin: 1px;margin-left: 5px;}
ul{margin-left: 10px;list-style: none}

.balise{color: #e4266f;font-family: consolas}
.balise::before{content: '<';color: white}
.balise::after{content: '>';color: white}
.infos{color: white;font-family: 'Encode Sans Semi Condensed', sans-serif}

.attribut-bfr{color: #8cd502}
.attribut{color: yellow}
.attribut::before{content: '="';color: yellow}
.attribut::after{content: '"';color: yellow}

.propriété, .value{color: #67d8f0}
.propriété::before{content: '{';color: white}
.propriété::after{content: ':';color: white}
.value::after{content: ';}';color: white}

.slash::after{content: '/';color: white}
.guillemets{color: yellow}
.guillemets::before{content: "'";color: yellow}
.guillemets::after{content: "'";color: yellow}
.parenthese::before{content: '(';color: white}
.parenthese::after{content: ')';color: white}
.chiffre-px::before{content: attr(data-num);color: #af7eda}
.chiffre-pc::before{content: attr(data-num);color: #af7eda}
.chiffre-em::before{content: attr(data-num);color: #af7eda}
.chiffre-vw::before{content: attr(data-num);color: #af7eda}
.chiffre-vh::before{content: attr(data-num);color: #af7eda}
.chiffre-px::after{content: 'px';color: #e4266f}
.chiffre-pc::after{content: '%';color: #e4266f}
.chiffre-em::after{content: 'em';color: #e4266f}
.chiffre-vw::after{content: 'vw';color: #e4266f}
.chiffre-vh::after{content: 'vh';color: #e4266f}

footer{width: 100vw;height: 50vw}

.checkbox-dark
{
	position: absolute;
	width: 120px;height: 40px;
	-webkit-appearance:none;
	background: linear-gradient(0deg,#333,#000);
	border-radius: 20px;
	box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e,inset 0 0 10px rgba(0,0,0,1),0 5px 20px rgba(0,0,0,0.5),inset 0 0 15px rgba(0,0,0,0.2)
}

.checkbox-dark::before
{
	content: attr(data-word-check);
	position: absolute;
	left: 0;
	width: 80px;height:40px;
	background: linear-gradient(0deg,#000,#6b6b6b);
	border-radius: 20px;
	box-shadow: 0 0 0 1px #232323;
	transform: scale(0.98,0.96);
	transition: 0.5s;
	font-size: 1em;
	color: white;
	text-align: center
}
.checkbox-dark::after
{
	content: '';
	position: absolute;
	top: calc(50% - 2px);
	left: 65px;
	width: 4px;height:4px;
	background: linear-gradient(0deg,#6b6b6b,#000);
	border-radius: 50%;
	transition: 0.5s
}
.checkbox-dark:checked{background: linear-gradient(0deg, #6dd1ff, #20b7ff)}
.checkbox-dark:checked::before{left: 40px;content: attr(data-word-uncheck)}
.checkbox-dark:checked::after{left: 105px;background: #63cdff;box-shadow: 0 0 5px #13b3ff,0 0 15px #13b3ff}
.checkbox-dark:focus{outline: none}

.mycheck{width: 120px;height: 40px;margin-left: 20px;margin-top: 20px;float: left}

.htmlorcss{position: absolute;margin-left: 160px;margin-top: 20px}
.htmlorcss{width: 100px;height: 25px;}
.choice{-webkit-appearance:none;outline:none;background: #9b00e0;height: 25px;width: 25px;border-radius: 50%;transition: 1s}
.choice:checked{background: radial-gradient(#7000e0,#9b00e0);height: 27px}
.choice:checked::before{content: '✓';color: white;font-size: 23px;}
.label-choice{color: white;text-transform: uppercase;font-size: 14px}

.label-choice:hover{background: -webkit-linear-gradient(0deg,#7000e0, #c200e0);-webkit-background-clip: text;color: transparent}
@media (max-device-width: 1024px) {
	header{height: 10vh}
	section{width: 100vw}
	article{width: 100vw}
	.html{float:none;border-right: none}
	.css{float:none;border-left: none}
	h2{font-size:25px;margin-left: 15px;margin-bottom: 5px;text-align: left}
}