/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {box-sizing: border-box;}

/* Add a rule for the HTML element */
html {
    min-height: 100%;
}

body {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        margin: 0px;
        background-size: cover;
        background-repeat: no-repeat; 
        scroll-behavior: smooth;
        background-attachment: fixed;
        font-family: google,sans-serif;
        background: linear-gradient(#FFFFFF,#FFFFFF);
		font-size: 1.1em;
		background-color: #FFFFFF ;
		/* This is the key change */
    	position: relative; /* Make the body the positioning context */
    	min-height: 100%; /* Ensure body is at least 100% of the HTML's height */
        
      }

label{
  position: relative;
  width: 70px;
  height: 40px;
  display: block;
  background: #d9d9d9;
  border-radius: 100px;
  cursor: pointer;
  margin: 6px;
  box-shadow: inset 0px 5px 15px rgba(0,0,0,0.3), inset 0px -5px 15px rgba(255,255,255,0.3);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
label:hover{
	animation: animated-border-glow 8s infinite linear;
    transition: 0.2s all;
	transform: scale(1.1); 	
}
label:after{
  content: '';
  position: absolute;
  height: 20px;
  width: 25px;
  background: #f2f2f2;
  border-radius: 100px;
  top: 10px;
  left: 10px;
  transition: 0.1s;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
input:checked ~ label:after{
  left: 57px;
  transform: translateX(-100%);
  background: linear-gradient(180deg,#777,#3a3a3a);
}
input:checked ~ label{
  background: #242424;
}
.background{
  position: fixed; /* Fixes the element to the viewport */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: 100%;
  background: #fff;
  z-index: -1;
  transition: 0.5s;
}
input:checked + label + .background{
  background: #242424;
}
input{
  display: none;
}