:root{
  --skin:#000000;
  --shadow:#CF4243;
  --plank:#CF654B;
  --bg:#D3D3D3;
  --book-base-1:#284141;
  --book-decoration-1:#287986;
  --book-base-2:#286149;
  --book-decoration-2:#28AA86;
  --pupil:#40DF7D;
  --eye:#fff;
}

html,body{
  margin:0;
  padding:0;
  height:100vh;
}

body{
  display:grid;
  place-items:center;
  background:var(--bg);
}

.cat-container{
  display:grid;
  height:346px;
  width:780px;
  background:var(--bg);
}

.book-container{
  display:grid;
  height:176px;
  width:216px;
  transform:translate(52px,29px);
}

.book-1{
  display:grid;
  z-index:2;
  height:176px;
  width:46px;
  background:linear-gradient(var(--book-base-1) 20%,var(--book-decoration-1) 20% 30%,var(--book-base-1) 30% 40%,var(--book-decoration-1) 40% 50%,var(--book-base-1) 50% 100%);
}

.book-2{
  display:grid;
  place-items:center;
  z-index:2;
  height:176px;
  width:46px;
  background:var(--book-base-2);
  transform:translate(52px,-176px);
}

.book-2::before{
  content:"";
  display:block;
  height:56px;
  width:36px;
  background:var(--book-decoration-2);
  border-radius:50%;
  transform:translate(-0.5px);
}

.shadow{
  display:block;
  height:176px;
  width:216px;
  background:var(--shadow);
  transform:translateY(-352px);
  clip-path:polygon(0 0, 45.5% 0, 100% 100%, 0% 100%);
}

.cat{
  display:grid;
  z-index:2;
  height:346px;
  width:182px;
  transform:translate(345px,-176px);
}

.ear-container{
  display:flex;
  justify-content:space-between;
  height:58px;
  width:93px;
}

.left-ear{
  display:block;
  height:58px;
  width:30px;
  background:var(--skin);
  clip-path: polygon(0 0, 0 0, 100% 32%, 100% 100%, 0 100%);
}

.right-ear{
  display:block;
  height:58px;
  width:30px;
  background:var(--skin);
  clip-path: polygon(0 32%, 100% 0, 100% 0, 100% 100%, 0 100%);
}

.head-neck{
  display:grid;
  justify-content:center;
  height:192px;
  width:93px;
  background:var(--skin);
  transform:translateY(-45px);
  border-radius: 50px 50px 0 0;
}

.eye-container{
  display:flex;
  justify-content:space-between;
  height:22px;
  width:67px;
  transform:translateY(28px);
}

.eye{
  display:block;
  height:22px;
  width:22px;
  border-radius:50%;
  background:radial-gradient(var(--pupil) 4px ,var(--eye) 4.5px 100px);
}

.body{
  display:block;
  height:114px;
  width:94px;
  background:var(--skin);
  transform:translate(90px,-159px);
  border-radius:0 85px 0 0;
}

.tail{
  display:block;
  justify-self:end;
  height:141px;
  width:23px;
  background:var(--skin);
  transform:translate(1.8px,-160px);
  border-radius:0 0 12px 12px;
}

.plank-container{
  display:block;
  height:54px;
  width:780px;
  transform:translateY(-317px);
}

.plank{
  display:grid;
  height:30px;
  width:780px;
  background:var(--plank);
}

.plank:nth-child(2){
  background:var(--shadow);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% -14%);
}