body{
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000000;
    font-family: sans-serif;
    perspective: 1000px;
}
/* HEADER */
header{
    top: 20px;
    position: absolute;
    font-family: 'Arial Black', Gadget, sans-serif;
    color: #863165; 
    text-transform: uppercase; 
    text-shadow: 3px 3px 0px white, 5px 5px 0px rgba(0,0,0,0.1);
    z-index: 100;

}
/* MAIN SECTION */
#hut{
    background-color: rgb(1, 239, 223);
    width: 80vw;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
}
/* Cat Room */
#room{
   
    background-color:rgb(0, 54, 189);
    width: 40vw;
    height: 70vh;
    position:absolute;
    border: 5px solid #cfcfcf;
    overflow: visible;
}
/* Cat Posters on wall */
#poster{
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    margin-left: 25px;
}
/* white Door */
#door{
    top: 0;
    left:0;
    background-color: #a9a8a8;
    width: 100%;
    height: 100%;
    position:absolute;
    z-index: 10;
    cursor: pointer;
    transition: transform 0.8s ease-in-out;
    transform-origin: left;

}
/*WHEN DOOR IS OPEN IT SWINGS OPEN*/
#door.open{
    transform: rotateY(-110deg);
}
/*KEYFRAMES*/
@keyframes doorOpen{
    0%{
        transform: rotateY(0deg);
    }
    25%{
        transform: rotateY(-2deg);
    }
    50%{
        transform: rotateY(2deg);
    }
    100%{
        transform: rotateY(0deg);
    }
}
/* Cat features */
#cat{
    position: absolute;
    left: 35%;
    bottom: 50px;
    z-index: 5;/*it keeps cat behind the door */
    transition: opacity 0.5s ease-in-out, transform 1.2s ease-in-out;
    pointer-events: none;
    opacity: 0;
}
#head {
  width:150px;
  height: 150px;
  border-radius:50%;
  background-color:#f1d897;
  position:relative;
 
}
#features {
  display:flex;
  flex-direction:column;
  align-items:center;
  row-gap:20px;
  position:absolute;
  top:50px;
  width:100%;
}
#eyes {
  display:flex;
  justify-content:center; /* center eyes in head */
  column-gap:30px; /* space between eyes */
  position:relative;
  z-index:20; /* make sure eyes in front */
}
.eye {
  width:40px;
  height:40px;
  border-radius:50%;
  background-color:#6e3c3c;
  position:relative;
} 
/*EYE PUPILS */
.eye::after {
  content:"";
  display:block;
  width:20px;
  height:20px;
  border-radius:50%;
  background-color:#0b0b0b;
  position:absolute;
  bottom:5px; 
  left:calc(50% - 10px); /* center pupil horizontally */
}
/* CAT EARS */
#head::before,
#head::after {
  content: "";
  position: absolute;
  top: -40px;
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 60px solid #b9a678;
}
#head::before {
  left: 10px;
}
#head::after {
  right: 10px;
}
/* CAT MOUTH */
#mouth{
  position: relative;
  width: 20px;
  height: 4px;
  background-color: rgb(210, 53, 79);
  border-radius: 5px;
  transition: all 0.3s ease;
}
#cat.out #mouth{
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background-color: #2d211d;
    border:2px solid rgb(209, 55, 81);
}
#mouth::before,
#mouth::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 2px;
  background: black;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
#mouth::before {
  left: -65px;
  box-shadow: 0 -10px  black, 0 10px  black;
}
#mouth::after {
  right: -65px;
  box-shadow: 0 -10px  black, 0 10px  black;
}
#cat.visible{
    opacity: 1;
}
/*Move the cat forward when this class is added*/
#cat.out{
    transform: translateY(130px) translate(20px) scale(1.5);
    opacity: 1;
    z-index: 11;
}
#cat.walking{
    animation: catWalk 0.6s infinite;
}
/* Apple */
#apple{
    position:absolute;
    bottom: -40px;
    left: 50%;
    width: 40px;
    height: 35px;
    background-color: #ab1b16;
    border-radius: 50% 50% 40% 40%;
    border: 3px solid #b8860b;
    box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
    animation: appleFood 1.5s infinite;
    transition: opacity 0.3s ease;
    transform: translateX(-50%);
    z-index: 15;
}
#apple::before{
    content: "";
    position: absolute;
    top: -10px;
    left:50%;
    width:4px;
    height:12px;
    background-color: #4a2c2a;
    transform: translateX(-50%);
    border-radius: 2px;
}
#apple::after{
    content: "";
    position: absolute;
    top: -12px;
    left:55%;
    width:12px;
    height:8px;
    background-color: green;
    border-radius: 10px 0 10px 0;
}

@keyframes appleFood{
    0%{
        transform: translateX(-50%) rotate(0deg);
    }
    50%{
        transform: translateX(-50%) rotate(5deg) scale(1.05);
    }
    100%{
         transform: translateX(-50%) rotate(0deg);
    }
}