@import url('https://fonts.googleapis.com/css?family=Roboto');
:root{
    --floor-color:#cbdde7;
    --border-color:#111;
    --skin-color:#f6c09b;
    --border-var:1px solid #111;    
    --cap-bright-color:#ed4742;
    --cap-dark-color:#cf3d37;
    --purple-ribbon:#92418e;
    --cap-dark-yellow: #f6a63b;
    --cap-bright-yellow:#fbc93c;
    --cap-hair-color:#05243a;
    --skin-dark-color:#ed927d;
    --skin-bright-color:#f7bf9a;
    --eye-color:#052438;
    --eye-patch-color:#ed686a;
    --hair-color:#05243a;
    --shirt-bright-color:#3a6cb5;
    --shirt-dark-color:#293a95;
    --coat-dark-color:#672c65;
    --coat-bright-color:#92418e;
    --shoe-color:#05243a;
    --button-color:#fff;
}
*
{
    /* border:var(--border-var); */
}
body
{
    background:#f0f0f0;
    font-family: 'Roboto',sans-serif;    
}
.credits
{
position: absolute;
left:60%;
top:80%;
padding-top:20px;
color:#333;
text-align:center;
}
#heading
{
    text-align: center;
    font-size: 1.5em;
    font-weight: 100;
    color:#333;
    padding: 10px;
}
.color-container
{
   position:absolute;
   left:5%;
   top:0%;
   height:100%;
   width:500px;
   overflow: auto;
   box-shadow:0px 2px 30px rgba(0,0,0,0.2);
  z-index:100;
}
.colors
{
    display: table;
    height:100px;
}
.color{
   
    display: table-row;
    height:50px;
}
.color__name,.color__code,.color__palette
{
    display: table-cell;
    padding:10px;
    vertical-align: middle;
}
.color__palette input[type=color]
{
    outline: none;
    width:25px;
    height:25px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
#color__code{
    padding: 20px;
    border:none;
    background: #f0f0f0;
}
.centered
{
    position:absolute;
    left:70%;
    top:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
}
.centered-horizontal
{
    position: absolute;
    left:50%;
    transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    -o-transform: translate(-50%,0%);
}
.container
{
    position:absolute;
    width:500px;
    height:300px;
    /* border:var(--border-var); */
}
.floor
{
    top:84%;
    width:200px;
    height:5px;
    /* border:var(--border-var); */
    background: var(--floor-color,#cbdde7);
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}
.character
{
    top:10%;
    width:150px;
    height:65%;
    /* border:var(--border-var); */
    /* background: var(--secondary-color); */
}
.character__head
{
    top:0%;
    width:100%;
    height:60%;
    z-index:5;
    /* border:var(--border-var); */
    /* background:var(--skin-color,#f6c09b); */
}
.character__body
{
    position: absolute;
    top:60%;
    width:70%;
    height:50%;
    /* border:var(--border-var); */
    left:60%;
    /* background:var(--body-color,#60295d); */
    z-index:1;
}
.cap
{
    position:absolute;
    top:0%;
    left:50%;
    width:100%;
    height: 60%;
    /* background:var(--cap-color,#d03e38); */
    /* border: var(--border-var); */
    transform:translate(-50%,0%);
    -webkit-transform:translate(-50%,0%);
    -moz-transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
    -o-transform:translate(-50%,0%);
    z-index: 10;
}
.cap__top
{
    position: absolute;
    top:0%;
    left:0%;
    height:80%;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
.top--dark
{
    width:100%;
    background: var(--cap-dark-color,#cf3d37);

}
.top--bright
{
    width:60%;
    background: var(--cap-bright-color,#ed4742);
}
.blueRibbon
{
    position:absolute;
    left:70%;
    top:70%;
    width:30px;
    height:10px;
    background:var(--purple-ribbon,#92418e);
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}
.cap__hair
{
    position:absolute;
    left:50%;
    top:60%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    width:40px;
    height:25px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background:var(--cap-hair-color);
}
.cap__yellow
{
    position:absolute;
    left:50%;
    top:80%;
    height:10%;
    border-radius:2px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
}
.yellow--dark
{
    background: var(--cap-dark-yellow);
    width:110%;
    transform:translate(-50%,0%);
    -webkit-transform:translate(-50%,0%);
    -moz-transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
    -o-transform:translate(-50%,0%);
}
.yellow--bright
{
    left:-5%;
    background: var(--cap-bright-yellow);
    width:65%;
}
.cap__bottom
{
    position: absolute;
    top:90%;
    height:20%;
}
.bottom--bright{
    left:-10%;
    width:80%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    background: var(--cap-bright-color,#ed4742);
}
.bottom--dark
{
    left:-5%;
    width:150%;
    background: var(--cap-dark-color,#cf3d37); 
}
.character__face
{
    position: absolute;
    top:60%;
    left:5%;
    height:50%;
    background: var(--skin-dark-color);
    width:90%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: 5;
}
.character__face--light
{
    position:absolute;
    left:0%;
    top:20%;
    height:50%;
    width:75%;
    background:var(--skin-bright-color);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: 5;
}

.eye--left
{
    position:absolute;
    left:15%;
    top:50%;
    width:10px;
    height:10px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    background: var(--eye-color);
    transform: translate(0%,-50%);
    -webkit-transform: translate(0%,-50%);
    -moz-transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
    -o-transform: translate(0%,-50%);
}
.eye--right{
    position: absolute;
    left:60%;
    top:50%;
    width:10px;
    height:10px;
    
}
.eye--right::before{
    position:absolute;
    content:'';
    width:10px;
    height:30px;
    background:var(--eye-patch-color);
    transform: translate(0%,-50%) rotate(45deg);
    -webkit-transform: translate(0%,-50%) rotate(45deg);
    -moz-transform: translate(0%,-50%) rotate(45deg);
    -ms-transform: translate(0%,-50%) rotate(45deg);
    -o-transform: translate(0%,-50%) rotate(45deg);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.eye--right::after{
    position:absolute;
    content:'';
    width:10px;
    height:30px;
    background:var(--eye-patch-color);
    transform: translate(0%,-50%) rotate(-45deg);
    -webkit-transform: translate(0%,-50%) rotate(-45deg);
    -moz-transform: translate(0%,-50%) rotate(-45deg);
    -ms-transform: translate(0%,-50%) rotate(-45deg);
    -o-transform: translate(0%,-50%) rotate(-45deg);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.character__ear
{
    position: absolute;
    width:20px;
    height:20px;
    top:75%;
    background: var(--skin-bright-color);
    z-index:10;
}
.ear--left{
    left:-11%;
    width:13px;/*Had to do for the layering problem*/
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background: var(--skin-dark-color);
}
.ear--right
{
    left:90%;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.character__hair
{
    position: absolute;
    top:60%;
    width:50px;
    height:45%;
    background: var(--hair-color);
    z-index:3;
}
.hair--right
{
    left:75%;
    z-index:6;
}
.hair--left
{
    left:-3%;
}
.character__shirt
{
    width:90%;
    height:70%;
    background: var(--shirt-dark-color);
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
}
.character__shirt--bright
{
    position: absolute;
    top:30%;
    left:0%;
    width:70%;
    height:20px;
    background: var(--shirt-bright-color);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.character__coat
{
    top:45%;
    width:100%;
    height:30%;
    background:var(--coat-bright-color);
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
}
.character__coat--belt
{
    top:-10%;
    height:10px;
    width:105%;
    background: var(--coat-bright-color);
    border-radius:2px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    box-shadow: 0px 5px 0px var(--coat-dark-color);
}
.belt__button
{
    width: 8px;
    height: 8px;
    border-radius:100%;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    -ms-border-radius:100%;
    -o-border-radius:100%;
    background:var(--button-color,#fff);
    
}
.button--right
{
    left:55%;
}
.button--left
{
    left:25%;
}
.belt__button::before{
    position: absolute;
    content:'';
    height:400%;
    top:0%;
    width:10px;
    transform: translate(0%,-100%);
    -webkit-transform: translate(0%,-100%);
    -moz-transform: translate(0%,-100%);
    -ms-transform: translate(0%,-100%);
    -o-transform: translate(0%,-100%);
    background: var(--coat-bright-color);
}
.character__hand
{
    position:absolute;
    top:15%;
    height:80%;
    width:50px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    
}
.character__hand::after{
    position: absolute;
    content:'';
    top:70%;
    left:-10%;
    width:90%;
    height:10px;
    background:inherit;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.hand--right
{
    left:73%;
    z-index: 20;
    background: var(--skin-bright-color);
}
.hand--left
{
    left:-13%;
    background: var(--skin-dark-color);
}
.hand--right::before{
    position:absolute;
    content: '';
    left:20%;
    top:40%;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    width:60%;
    height:10px;
    background: var(--skin-dark-color);
}
.character__leg
{
    position:absolute;
    top:65%;
    height:45%;
    width:30px;
    background: var(--coat-bright-color);
    transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    -o-transform: translate(-50%,0%);
}
.leg--left
{
    left:30%;
}
.leg--right
{
    left:70%;
}
.character__leg::before{
    position: absolute;
    content: '';
    left:-10%;
    top:65%;
    width:100%;
    height:15px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    background: var(--shoe-color);
}
.leg--left::after{
    position: absolute;
    content:'';
    left:0%;
    top:20%;
    height: 20%;
    width:100%;
    background: var(--coat-dark-color);
}