/* NAVBAR AND FOOTER STYLE IN MAIN CSS FILE IN ROOT FOLDER */


/*THIS IS TO KEEP THE LOGO PARTS GROUPED TOGETHER DESPITE WINDOW CHANGING RESOLUTIONS*/
/* section {
  margin: 0 auto;    /*this keeps the logo centered on the page
  min-width: 80vw; /* Minimum width of your wrapper element
  max-width: 800px;
  min-height: 800px;
  max-height: 800px;
} */

/* to remove all the added padding around the logo */
section .container-fluid {
  /* overflow: hidden; */
}


body {
  display: grid;
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 10vh 17vh 63vh 10vh;
  /* grid-template-areas:
  "topbar topbar topbar"
  "content1 content2 content3"
  "r2c1 logo r2c3"
  "r3c1 r3c2 r3c3"; */
}

.topbar {
  /* grid-area: topbar; */
  grid-area: 1 / 1 / 2 / 4;
}

/* .content1 {
  grid-area: 2 / 1 / 3 / 2;
}
.content2 {
  grid-area: 3 / 2 / 4 / 3;
}
.content3 {
  grid-area: 4 / 3 / 5 / 4;
} */


.animated-logo {
  grid-area: 3 / 2 / 4 / 3;
  position: relative;
}

#Head, #Jaw, #Body, #Arm, #Patty, #Name, .SmokeI {
  grid-area: 3 / 2 / 4 / 3;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* margin: auto; */
}
#Patty {
  /* position: absolute; */
  top: 7%;
  left: 52%;
  /* transform: translateY(10%); */
}
#Head, #Jaw, #Body, #Arm, #Patty, #Name {
  height: 50vw;
  max-height: 500px;
  margin: 0 auto;
}
.SmokeI {
  /* transform: translateX(-100%); */
  transform: ScaleX(-1) translate(50%, 20%);
  z-index: -1;
}


/*THESE ARE THE TRANSFORMATIONS ON hover THAT ARE FINALLY WORKING*/

#Smoke {
  opacity: 0;
  transform-origin: bottom left;
  /* transition-delay: 4s;  */
  transition: all 1.5s ease-in-out 0.5s;
  overflow-x: hidden;
}
section:hover #Smoke {
  opacity: 1;
  transform: scale(2.5);
}

#Head {
  /* transform-origin: 275px 100px; */
  /* transform-box: view-box; */
  transform-origin: 47% -28%;
  transition: transform 1s ease-in-out;
}
/* #Head::after {
  position: absolute;
  top: -28%;
  left: 47%;
  width: 5px;
  height: 5px;
  content: '.';
  background-color: #f0f;
  border: 5px solid red;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
} */
section:hover #Head {
  transform: rotate(45deg);
}
#Jaw {
  transform-origin: 47% -48%;
  transition: transform 1s ease-in-out;
}
section:hover #Jaw {
  transform: rotate(30deg);
}

#Arm {
  transform-origin: 60% -70%;
  transition:  1s ease-in-out;
}
section:hover #Arm {
    transform: rotate(20deg);
}
#Patty {
  transform-origin: 60% -70%;
  transition: transform 1s ease-in-out;
}
section:hover #Patty {
    transform: rotate(20deg);
}
#Name {
  transition: all 1s ease-in-out;
}
section:hover #Name {
   opacity: 0;
}

/*END OF TRANSFORMATIONS ON hover*/



/*LOGO STYLING*/

/* div.SmokeI {
  transform: translate(-265px, 400px) ScaleX(-1);
}
div.ArmI {
  transform:translate(175px, 50px);
}
div.PattyI {
  transform:translate(185px, -310px);
}
div.HeadI {
  transform:translate(175px, -750px);
}
div.JawI {
  transform:translate(175px, -1155px);
}
div.BodyI {
  transform:translate(180px, -1550px);
}
div.NameI {
  transform:translate(180px, -1950px);
  overflow-x: hidden;
} */

/*END LOGO STYLNG*/