@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,500;1,200&display=swap');
* {
	box-sizing: border-box;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 10vh;
	margin-left: 40%;
	margin-top: 3%;
	background-color: rgb(245, 240, 240);
	transition: background 0.2s linear;
}

body.dark {
	background: #292C35;
	color: #fff;
}

.checkbox {
	opacity: 0;
	position: absolute;
}

.label {
	background-color: #111;
	border-radius: 50px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	height: 13px;
	width: 25px;
	transform: scale(1.5);
}

.label .ball {
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 1px;
	left: 0px;
	height: 11px;
	width: 11px;
	transform: translateX(0px);
	transition: transform 0.3s linear;
}

.checkbox:checked + .label .ball {
	transform: translateX(15px);
}


.fa-moon {
	color: rgb(97, 97, 182);
	font-size: 0.5rem;
		margin-bottom: 5%;

}

.fa-sun {
	color: #f39c12;
	font-size: 0.5rem;
		margin-bottom: 5%;


}


.container{
	position: fixed;
	left: 15%;
	top: 20%;
	text-align: center;
}


 .img img{
  width: 20%;
  height: 20%;
  border-radius: 50%;
  max-width: 100%;
  max-height: 100%;

}  
 .heading{
  	text-align: center;
}
h1{
	font-size: 3rem;
	font-family: "Barlow", sans-serif;
	font-weight: 500;
}
p{
	font-size: 1.2rem;
	margin-top: 1%;
	font-family: "Barlow", sans-serif;
	font-weight: 200;
}

i{
  margin-top: 4%;
  color: black;
  padding: 2%;
  font-size: 1.5rem;
}

@media screen and (max-width: 800px){
	body{
		margin-left: 65%;
	}
	.container{
margin-right: 10%;
	}
.img img{
	width: 50%;
	height: 50%;
}
h1{
	font-size: 2.5rem;
	margin-top: 20%;
}
p{
	font-size: 1rem;;
}
}