#home {
  border: solid black 1px;
  padding: 5px;
  background: darkslategray;
  color: white;
  text-decoration: none;
  box-shadow: black 3px 2px 5px;
  border-radius: 10%;
  position: absolute;
  bottom: -40%;
}
body {
  background: navy;
}
.box {
  position: relative;
  display: block;
  width: 600px;
  height: 400px;
  margin: auto;
  margin-top: 8%;
}
.head {
  position: absolute;
  background: black;
  top: 12.5%;
  left: 25%;
  width: 50%;
  height: 75%;
  border-radius: 50%;  
}
.head-copy {
  position: absolute;
  background: black;
  top: 12.5%;
  left: 25%;
  width: 50%;
  height: 75%;
  border-radius: 50%; 
  z-index: 2;
}
.ear-left {
  position: absolute;
  background: black;
  top: -20%;
  left: -30%;
  width: 50%;
  height: 50%;
  border-radius: 50%; 
}
.ear-right {
  position: absolute;
  background: black;
  top: -20%;
  right: -30%;
  width: 50%;
  height: 50%;
  border-radius: 50%;  
}
.head-left {
  position: absolute;
  background: #DEB887;
  top: -7%;
  left: -25%;
  width: 90%;
  height: 95%;
  border-radius: 50%;
 }
.head-right {
  position: absolute;
  background: #DEB887;
  top: -7%;
  right: -25%;
  width: 90%;
  height: 95%;
  border-radius: 50%;
}
.nose {
  position: absolute;
  background: #000;
  top: 50%;
  left: 35%;
  width: 30%;
  height: 15%;
  border-radius: 50%;
  z-index: 3;
}
.eye-left {
  position: absolute;
  background: #FFF;
  top: 25%;
  left: 45%;
  width: 30%;
  height: 40%;
  border-radius: 50%;
  z-index: 2;
  border: 1px black solid;
}
.eye-right {
  position: absolute;
  background: #FFF;
  top: 25%;
  right: 45%;
  width: 30%;
  height: 40%;
  border-radius: 50%;
  z-index: 1;
  border: 1px black solid;
}
.pupil {
  background: #000;
  position: absolute;
  width: 40%;
  height: 40%;
  top: 60%;
  left: 20%;
  border-radius: 50%;
  z-index: 2;
}
.cheeks-left {
  position: absolute;
  background: #DEB887;
  bottom: -12.5%;
  left: -50%;
  width: 110%;
  height: 60%;
  border-radius: 50%;
 }
.cheeks-right {
  position: absolute;
  background: #DEB887;
  bottom: -12.5%;
  right: -50%;
  width: 110%;
  height: 60%;
  border-radius: 50%;
 }
.chin {
  position: absolute;
  background: #DEB887;
  bottom: -28%;
  left: 10%;
  width: 80%;
  height: 60%;
  border-radius: 50%;
 }
.mouth {
  background: #800000;
  position: absolute;
  bottom: -20%;
  left: 20%;
  width: 60%;
  height: 30%;
  -webkit-clip-path: polygon(46% 31%, 75% 20%, 100% 8%, 94% 71%, 78% 89%, 50% 100%, 22% 90%, 5% 70%, 0 6%, 17% 22%);
clip-path: polygon(46% 31%, 75% 20%, 100% 8%, 94% 71%, 78% 89%, 50% 100%, 22% 90%, 5% 70%, 0 6%, 17% 22%);
  border: 4px solid black;
  z-index: 3;
}
.tongue {
  background: #F0F;
  position: absolute;
  bottom: 5%;
  left: 10%;
  width: 80%;
  height: 55%;
  border-radius: 50%;
}
.tongue-line {
  /*background: #000;*/
  position: absolute;
  width: 55%;
  height: 20%;
  left: 25%;
  top: 40%;
  border-top:solid 2px #000;
  /*border-top-right-radius: 80%;
  border-bottom-left-radius: 90%;*/
  border-radius: 50%;
  transform: rotate(-80deg);
  -webkit-transform: rotate(-80deg);
}
.smile-left {
  background: #000;
  position: absolute;
  width: 30%;
  height: 1%;
  left: 41%;
  top: 55%;
  border-top:solid 1px #000;
  border-radius: 50%;
  transform: rotate(29deg);
  -webkit-transform: rotate(29deg);
  z-index: 1;
}
.smile-right {
  background: #000;
  position: absolute;
  width: 40%;
  height: 1%;
  right: 25%;
  top: 53%;
  border-top:solid 1px #000;
  border-radius: 50%;
  transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  z-index: 3;
}
.smile-top-left {
  border-top: 5px solid #000;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  position: absolute;
  top: 42%;
  left: 40%;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.smile-top-right {
  border-top: 6px solid #000;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  position: absolute;
  top: 39%;
  right: 25%;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
h1 {
  color: white;
  margin-left: 30%;
  font-weight: 200;
}
p {
  color: white;
  margin-left: 35%;
}
/*.bow,*/ #Bow {
  width: 300px;
  height: 100px;
  /*background: white;*/
  position: absolute;
  top: -20%;
  visibility: hidden;
}
.bow-mid {
  width: 30%;
  height: 100%;
  background: #DC143C;
  position: absolute;
  left: 35%;
  top: 0%;
  border-radius: 30%;
  border: 2px #2F4F4F ridge;
  z-index: 3;
}
.bow-left-top {
  width: 50%;
  height: 70%;
  background: #DC143C;
  border-radius: 40%;
  transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  position: absolute;
  left: -10%;
  top: -10%;
  border: 2px #2F4F4F ridge;
  z-index: 2;
}
.bow-left-bottom {
  width: 50%;
  height: 70%;
  background: #DC143C;
  border-radius: 40%;
  transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  position: absolute;
  left: -10%;
  top: 40%;
  border: 2px #2F4F4F ridge;
}
.bow-right-top {
  width: 50%;
  height: 70%;
  background: #DC143C;
  border-radius: 40%;
  transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  position: absolute;
  right: -10%;
  top: -10%;
  border: 2px #2F4F4F ridge;
  z-index: 2;
}
.bow-right-bottom {
  width: 50%;
  height: 70%;
  background: #DC143C;
  border-radius: 40%;
  transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  position: absolute;
  right: -10%;
  top: 40%;
  border: 2px #2F4F4F ridge;
}
.pupil2 {
  background: #000;
  position: absolute;
  width: 40%;
  height: 40%;
  top: 50%;
  left: 40%;
  border-radius: 50%;
  z-index: 2;
}
.dots {
  background: white;
  width: 35%;
  height: 35%;
  border-radius: 50%;
}
.dot {
  background: white;
  width: 20%;
  height: 45%;
  border-radius: 50%;
}
.dots1 {
  position: absolute;
  top: 20%;
  left: 5%;
}
.dots2 {
  position: absolute;
  top: 55%;
  left: 40%;
}
.dots3 {
  position: absolute;
  top: 5%;
  left: 55%;
}
/*Styling for mobile screens*/
@media only screen and (max-width: 480px) {
    .box {
        position: relative;
        display: block;
        width: 300px;
        height: 200px;
        margin: auto;
        margin-top: 28%;
    }
    #Bow {
  width: 150px;
  height: 50px;
  /*background: white;*/
  position: absolute;
  top: -20%;
  visibility: hidden;
}
}