body {
    background-color: lightgray;
}

#body_container {
font-family: 'Balsamiq Sans', cursive;
display:flex;
flex-direction:column;
align-items:center;
}

h1 {
background-color: blueviolet;
width:100%;
height:50px;
text-align: center;
justify-content: center;
display: flex;
flex-direction: column;
margin:0px;
color:#ffffff;}

/* dropdown area */

#dropdownContainer {
display:flex;
flex-direction: row;
}

.dropDowns {
margin:10px;
}

#lazy{
  background-color:yellow;
  border-radius: 100%; 
  width:50px;
  height:50px;
}

/* Box where cat face image lives */

#catBox {
margin-top: 100px;    
display:grid;
grid-template-columns: 165px 70px 165px;
grid-template-rows: 110px 80px 55px 125px;
grid-template-areas: 
  "EL space ER"
  "IL space2 IR"
  "space3 nose space4"
  "mouth mouth mouth";
}


/* Cat styles */

/* <---Background color---> */
.catBGColor{
background-color: orange;
border-radius: 40%; 
}

/* <---Ears ---> */

#earLeft {
    grid-area: EL;
    justify-self: left;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 110px 100px 0 0;
    border-color: #ff7700 transparent transparent transparent;
    transform: rotate(10deg);
   }

#earRight { 
    grid-area: ER;
    justify-self: right;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 110px 100px 0;
    border-color: transparent #ff7700 transparent transparent;
    transform: rotate(350deg);
    /* margin-right: 15px; */
   }

#leftEye{
  grid-area: IL;
  justify-self: center;
  margin-left:40px;
}

#rightEye{
   grid-area: IR;
   justify-self: center;
   margin-right:40px;
    }
    
#nose{
    grid-area: nose;
    justify-self: center;
}

#mouth{
   grid-area: mouth;
   justify-self: center;}


/* <-----------------Drop Down List stylings--------------------> */
/* BG Color Selection */

.orange{
  background-color: orange;
  border-radius: 40%;
 }

.black{
  background-color: #000000;
  border-radius: 40%; 
 }

 .purple{
  background-color: #C07CFC;
  border-radius: 40%; 
 }

 .green{
  background-color: #35F35E;
  border-radius: 40%; 
 }

 .gray{
  background-color: #878A8E;
  border-radius: 40%; 
 }
 .white{
  background-color: #ffffff;
  border-radius: 40%; 
 }
 .rainbow{
  background: rgb(255,38,0);
  background: radial-gradient(circle, rgba(255,38,0,1) 8%, rgba(247,168,47,1) 19%, rgba(245,246,70,1) 33%, rgba(108,255,0,1) 48%, rgba(0,151,255,1) 61%, rgba(178,47,247,1) 74%);
  border-radius: 40%; 
 }

/* Ear Color Selection */

.orangeEarLeft {
    margin-top: -110px;
    border-style: solid;
    border-width: 110px 100px 0 0;
    border-color: #ff7700  transparent transparent transparent;
   }

.orangeEarRight {
  border-style: solid;
  border-width: 0 110px 100px 0;
  border-color: transparent #ff7700  transparent transparent;
}
  
.blackEarLeft{
   margin-top: -110px;
    border-style: solid;
    border-width: 110px 100px 0 0;
    border-color: #000000 transparent transparent transparent;
  }

 .blackEarRight{ 
  border-style: solid;
  border-width: 0 110px 100px 0;
  border-color: transparent #000000 transparent transparent;}

 .purpleEarLeft{
  margin-top: -110px;
  border-style: solid;
  border-width: 110px 100px 0 0;
  border-color: #9762c6 transparent transparent transparent;
   }
.purpleEarRight{
  border-style: solid;
  border-width: 0 110px 100px 0;
  border-color: transparent #9762c6 transparent transparent;
}

 .greenEarLeft{
  margin-top: -110px;
  border-style: solid;
  border-width: 110px 100px 0 0;
  border-color: #29bd49 transparent transparent transparent;
   }
  .greenEarRight{
    border-style: solid;
    border-width: 0 110px 100px 0;
    border-color: transparent #29bd49 transparent transparent;
  }

 .grayEarLeft{
  margin-top: -110px;
  border-style: solid;
  border-width: 110px 100px 0 0;
  border-color: #696b6e transparent transparent transparent;
  }
  .grayEarRight{
    border-style: solid;
    border-width: 0 110px 100px 0;
    border-color: transparent #696b6e transparent transparent;
  }
 
  .whiteEarLeft{
    margin-top: -110px;
    border-style: solid;
    border-width: 110px 100px 0 0;
    border-color: #ffffff transparent transparent transparent;
  }
  .whiteEarRight{
    border-style: solid;
    border-width: 0 110px 100px 0;
    border-color: transparent #ffffff transparent transparent;
  }

/* Eye Selection */

/* <---Eye1 round ---> */
.circle {
    display: grid;
    height: 55px;
    width: 55px;
    background-color: #E3EDEF;
    border-radius: 50%; 
 }


 .pupil { 
   background: #000;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   margin:5px;
   grid-area: IL;
   justify-self: center;
}


/* <---Eye2 heart --->*/
.heart {
    position: relative;
    width: 100px;
    height: 90px;
  }
  .heart:before,
  .heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }
  .heart:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }



/* <---Eye3 sunglasses --->*/
  .eyes3 { width: 68px;
  height: 70px;
  background:transparent;
  background: linear-gradient(80deg,white 10%, rgba(9,9,121,1) 39%, rgba(0,212,255,1) 100% );
  position: relative; 
}
.eyes3:before {
  content: "";
  width: 63px;
  height: 0;
  position: absolute;
  top: 0;
  left: -11px;
  border-bottom: 10px solid blue;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
}
.eyes3:after {
  content: "";
  width: 63px;
  height: 0;
  position: absolute;
  bottom: 0;
  left: -11px;
  border-top: 10px solid blue;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
}


/* <---Eye4 cat eye  --->*/
.eyes4 {
    height: 50px;
    width: 100px;
    background-color: rgb(57, 196, 103);
    border-radius: 50%;
    display: grid;
}
   
.circle2 {
    display: grid;
    height: 45px;
    width: 45px;
    background-color: #000;
    border-radius: 50%; 
    margin:-45px 30px;
 }
  
  .pupil2 { 
    background: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin:15px 40px;
    grid-area: IL;
    
 }
/* star eyes */
.star {
  color: #4b47c9;
  width: 0px;
  height: 0px;
  border-right: 65px solid transparent;
  border-bottom: 45px solid #4b47c9;
  border-left: 61px solid transparent;
  transform: rotate(36deg) scale(.75);
}

.star:before {
    border-bottom: 80px solid #4b47c9;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -40px;
    left: -55px;
    display: block;
    content: '';
    transform: rotate(-35deg) scale(.75);
}


.star:after {
  position: absolute;
  display: block;
  color: #4b47c9;
  bottom: -63px;
  left: -90px;
  width: 0px;
  height: 0px;
  border-right: 80px solid transparent;
  border-bottom: 65px solid #4b47c9;
  border-left: 80px solid transparent;
  transform: rotate(-76deg) scale(.75);
  content: '';
}


  /* <----------> */

/* Eye adjustments */
  .moveleft {
    margin-right:45px;
}

.moveleft2 {
    margin-left:28px;
    margin-top:20px;
}

.moveright{
    margin-left:45px;
}

.moveright2{
    margin-right:24px;
    margin-bottom:18px;
    
}

  /* <--------------------------------> */



 /* Nose Selection */

/* <---Nose1 triangle ---> */
.nose {
width: 0;
height: 0;
border-style: solid;
border-width: 0 25px 50px 25px;
border-color: transparent transparent #e62294 transparent;
}

/* <---Nose2 rounded ---> */
.nose2 {
    position: relative;
    width: 100px;
    height: 20px;
  }
  .nose2:before,
  .nose2:after {
    position: absolute;
    content: "";
    left: 75px;
    top: 0;
    width: 20px;
    height: 25px;
    border: 3px solid #68505b;
    background-color: #68505b;
    border-radius: 50px 50px 0 0;
    transform: rotate(180deg);
    transform-origin: 0 100%;
  }
  .nose2:after {
    left: 0;
    transform: rotate(-180deg);
    transform-origin: 100% 100%;
  }

  /* <---Nose3 diamond ---> */

  .nose3 {
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-bottom: 10px solid rgb(236, 68, 222);
    position: relative;
    top: -40px;
  }

  .nose3:after {
    content: '';
    position: absolute;
    left: -40px;
    top: 10px;
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-top: 60px solid rgb(236, 68, 222);
  }

  /* <---Nose4 cone ---> */

  .nose4 {
    width: 0;
    height: 0;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-top: 60px solid gray;
    border-radius: 50%;
  }
  /* <--------------------------------> */


/* <--mouth selections--> */

/* <---Mouth1 smile ---> */
.mouth {
    border-bottom: 3px solid #757575;
    border-radius: 20px 20px 70px 70px;
    width: 200px;
    height: 50px;
    margin-top: 15px;
 }

 
/* <---Mouth2 toungue ---> */

 .mouth2 {
    border: 2px solid rgb(223, 98, 75);
    background-color: salmon;
    border-radius: 20px 20px 50px 50px;
    width: 170px;
    height: 20px;
    margin-top: 25px;
    z-index:20;
 }

 .mouth2a {
    position: relative;
    width: 100px;
    height: 10px;
  }
 .mouth2a:before,
  .mouth2a:after {
    position:absolute;
    content: "";
    left: 90px;
    top: 0;
    width: 40px;
    height: 50px;
    border: 2px solid rgb(223, 98, 75);
    background: salmon;
    border-radius: 50px 50px 0 0;
    transform: rotate(180deg);
    transform-origin: 10%;
  }


/* <---Mouth3 surprise ---> */

.mouth3{
    height:45px;
    width:100px;
    border-radius: 0 0 90px 90px;
    background:#c73611;
    margin-top: 25px;
}


/* <---Mouth4 wide grin ---> */

.mouth4 {
    border-bottom:5px solid #757575;
    border-radius: 50%;
    width: 300px;
    height: 80px;
 }

  /* <--------------------------------> */

  /* <--Accessories selections--> */

#accessBoxL, #accessBoxR{
  width:auto;
  height:auto;
}

.accessoryBox1{
  display:flex;
  width:auto;
  height:auto;
   }  
   
/* <--bowtie--> */


.bowtieleft{
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 90px;
border-color: transparent transparent transparent #000000;
padding-left:5px;

}

.bowtieright{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 90px 25px 0;
  border-color: transparent #000000 transparent transparent;

}
  /* <--------------------------------> */


 /* <--collar--> */

 .collar {
  position: relative;
  text-align: center;
  height: 40px;
  width: 300px;
  margin-top:10px;
}

.collar:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: red;
  transform: skew(0deg, 6deg);
}
.collar:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: red;
  transform: skew(0deg, -6deg);
}


.diamondCollar {
  width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: #c90e0e;
    position: relative;
    top: -45px;
    margin-left: 34%;
}

.diamondCollar:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color:#c90e0e;
}


 /* <--spiked collar--> */

 .spikeCollar {
  position: relative;
  text-align: center;
  height: 45px;
  width: 300px;
  margin-top:10px;
}

.spikeCollar:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: #000000;
  transform: skew(0deg, 8deg);
}
.spikeCollar:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: #000000;
  transform: skew(0deg, -8deg);
}

.spike1{
width: 0;
height: 0;
border-style: solid;
border-width: 65px 32.5px 0 32.5px;
border-color: #f5f5f5 transparent transparent transparent;
transform:rotate(6deg) scale(.5);
margin-top: -57px;
}

.spike2 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 65px 32.5px 0 32.5px;
  border-color: #f5f5f5 transparent transparent transparent;
  margin-left:6px;
  transform:rotate(5deg)scale(.5);
  margin-top: -50px;
  }

  .spike3 {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 65px 32.5px 0 32.5px;
    border-color: #f5f5f5 transparent transparent transparent;
    transform:rotate(-5deg)scale(.5);
    margin-left:30px;
    margin-top: -50px;
    }

    
  .spike4 {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 65px 32.5px 0 32.5px;
    border-color: #f5f5f5 transparent transparent transparent;
    transform:rotate(-6deg)scale(.5);
    margin-left:6px;
    margin-top: -57px;
    }
    
/* < ---- end spike collar -----> */