<h1>BB-8 Toggle</h1>
    <!--checkbox -->
<input type="checkbox" id="bb8-checkbox">
  <!--label connected to checkbox --> 
<label for="bb8-checkbox" class="switch">
    <div class="bb8">
      <div class="bb8-head">
      </div>
      <div class="bottom-head"></div>
      <!--end of head -->
      <div class="bb8-body">
        <div class="circle1">
          <div class="s1"></div>
          <div class="s2"></div>
        </div>
        <!--end circle1 -->
        <div class="circle2">
          <div class="s1"></div>
          <div class="s2"></div>
        </div>
        <!--end circle2-->
        <div class="circle3">
          <div class="s1"></div>
          <div class="s2"></div>
        </div>
        <!--end circle3 -->
      </div>
      <!--end bb8 body -->
    </div>
  <!--end bb8 wrapper -->
  </label>
  <section></section>
<p>Toggle2:</p>

//font import
@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');
//font name
$font-name:Shadows into light;
//switch ht & width
$switch-width: 270px;
$switch-height: 120px;
$switchToggle-width: $switch-height;
//colors used
$sky-night: #023660;
$bg:#16A085;
$bg-blue:#3384a8;
$grey:#e0e0e0;
$orange:#fac562;
$white:#f0f0f0;
//styling for the page

section{
  position: absolute;
  top:0;
  left:0;
  height: 100%;
  width:100%;
  background: $bg;
  z-index: -10;
}
body{
  margin:0;
  padding: 20px;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  text-align: center;
  color: $white;
  //background-color: $bg;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
p{
  position:absolute;
  bottom:87%;
  margin:0;
  padding:0;
  font-size: 3.5em;
  font-family:$font-name;
}
h1{
  margin:30px;
  padding:20px;
  font-family:$font-name;
  font-size: 2.5em;
  font-weight:Bold;
  color:$orange;
  letter-spacing:0.2rem;
}
* {
    transition: 1s all;
}
//wrapper for the switch
// .switch-wrapper{
//   margin: 30px 0;
//   font-size: 0;
//   //border:2px solid black;
// }
//hides the checkbox
 input {
  display:none;
}
//switch styling
.switch{
  position:relative;
  padding:20px;
  margin:10px;
  display:inline-block;
  width:$switch-width;
  height:$switch-height;
  border-radius:$switch-width/2;
  background-color:#70C6EC;
  box-sizing:border-box;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
  cursor: pointer;
}
.bb8-body{
  position:absolute;
  display:block;
 height:100px;
  width:100px;
  bottom:10px;
  border-radius:100%;
  background: rgba(240, 240, 240, 1);
  background:radial-gradient(ellipse at center, rgba(240, 240, 240, 1) 0%, rgba(235, 235, 235, 1) 72%, rgba(191, 191, 191, 1) 100%); 
  &:after{
    content:'';
    position:absolute;
    height:3.5px;
    width:100px;
  background:$grey;
    top:46px;
    left:0px;
  }
}
//circular design on body
.circle1,.circle2,.circle3{
  width: 18px;
    height: 18px;
    border-radius: 100%;
    border: 7px solid #fac562;
    position: relative;
  //box-sizing:border-box;
}
/********positioning of the circles*******/
.circle1{
  left:35px;
  top:10px;
}
.circle2{
  left:10px;
  top:20px;
}
.circle3{
  left: 58px;
  top: -11px;
}
//s1 makes a semicircle type cut
.s1{
  background:#fac562;
  width:4px;
  height:20px;
  position:relative;
  left: 6.2px;
   /*overrides the background and places a gradient bg fromt top to bottom*/
  background: linear-gradient(to bottom, $orange 0%, $orange 22%, $white 25%, $white 70%, $orange 75%, $orange 100%);
}
.s2{
  background:#fac562;
  width:20px;
  height:3px;
  position:relative;
  top: -12px;
  /*overrides the background and places a gradient bg fromt left to right*/
  background:linear-gradient(to right, $orange 0%, $orange 22%, $white 25%, $white 70%, $orange 75%, $orange 100%);
}
/*bb8 head*/
.bb8-head{
  position:absolute;
  height:40px;
  width:70px;
  background:rgba(240, 240, 240, 1);
  top: -38px;
  left: 34px;
  z-index:3;
  border-top-left-radius:50px;
  border-top-right-radius:50px;
  background:linear-gradient(to bottom, $white 0%, $white 10%, $orange 10%, $orange 15%, $white 16%,$white 70%,$orange 70%,$orange 80%,#666666 85%, #666666 100%);
  //before
  &:before{
    position:absolute;
    content:'';
    background:black;
    height:18px;
    width:18px;
    border-radius:50%;
    top:7px;
    left:29px;
  }
  //after
  &:after{
    position:absolute;
    content:'';
    background:black;
    height:10px;
    width:10px;
    border-radius:50%;
    top:15px;
    left:50px;
  }
}
// //bottom head
.bottom-head{
  position:absolute;
  border-top: 7px solid #9f9f9f;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  height: 0;
  width: 60px;
  top: 1px;
  left: 34px;
}
//rotating and transforming bb8 body on checked
input[type=checkbox]:checked + label .bb8-body{
  margin-left:calc(100% - 150px);
  //left:150px;
  transform:rotate(360deg);
}
//transforming bb8 head
input[type=checkbox]:checked + label .bb8-head{
 margin-left:calc(100% - 150px); 
}
input[type=checkbox]:checked + label .bottom-head{
 margin-left:calc(100% - 150px); 
}
input[type=checkbox]:checked + label ~ section {
    background-color: $bg-blue;
}