*  { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body { 
  font-family: serif; 
  font-size: 14px; 
  line-height: 1;
  position: relative;
  color: #fff;
  height: 100%;
  text-align: center;
  background-color: #000;
  
}
header {
    padding: 1rem 0 0.5rem;
    padding: 0;
}
main {
    position: relative;
    /* background: linear-gradient(180deg, #000, #07180b) no-repeat scroll center; */
    border-bottom: 5px solid rgb(150, 150, 150);
    background: url('../images/closet/bg600.jpg') no-repeat scroll top / cover;
}
#hubert, #ferdinand {
    position: relative;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0.5rem;
    background: url('../images/closet/closetBg.PNG') no-repeat scroll top;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
h1 {
  font-size: 2em;
  font-size: 0.5rem;
  visibility: hidden;
  color: #fff;
  text-align: center;
  margin: 0;
  height: 0;
  padding: 0;
}
h2 {
    font-size: 1rem;
}
hr {
  margin: 1em auto 2em;
  width: 4em;
  border: 0;
  border-top: 2px solid #aaa;
}

/* Paragraph Styles */
p, li, button { 
    font-size: 1rem;
    line-height: 1.75;
    /* margin-bottom: 1em; */
    margin-top: 0;
}
a, button { 
    color: #d5ffe0; 
    font-weight: 700; 
    text-decoration: none; 
    transition: all 0.1s ease-in-out; 
}
a:hover, 
a:active, 
a:focus { 
    background-color: #ffe9cb; 
    color: #3c042f; 
}
a:focus { 
    text-decoration: underline; 
}


/* buttons */
button {
    appearance: none;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    font-family: inherit;
    padding: 0.25rem 0.5rem;
}
button:hover, 
button:active, 
button:focus { 
    color: #fff2d5;
}
#bottomBtns button { 
    display: inline-block;
    margin: 0.5rem auto;
    color: #20552c;
    border: 1px solid #20552c;
    border-radius: 5px;
}
#buttons_character:not(.hidden) {
    display: inline-block;
}
#bottomBtns button:hover, #bottomBtns button:active, #bottomBtns button:focus {
    border-color: #07180b;
    color: #07180b;
}
#bottomBtns #hideBtn.controlsHidden {
    background-color: #07180b;
    color: #fff;
}
#bottomBtns #hideBtn.controlsHidden:hover, #bottomBtns #hideBtn.controlsHidden:active, #bottomBtns #hideBtn.controlsHidden:focus {
    background-color: #20552c;
}
#buttons_character button[disabled] {
    display: none;
}

/* utility */
.hidden { display: none; }
.visible-xs { display: none; }
.symbol { font-family: math; font-variant-emoji: text; }
.symbol::after {
   display: inline;
   content: '\FE0E';
}

/* sr-only */
.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}


/* controls */
#controls {
    position: absolute;
    bottom: 3rem;
    right: 1rem;
    background-color: rgb(0 0 0 / 85%);
    border: 3px solid rgb(255, 255, 255, 75%);
    padding: 1rem;
    color: #fff;
    box-shadow: 0px 10px 15px 5px rgb(2 14 5 / 50%);
    z-index: 2;
    min-width: 8rem;
}
#controls div:first-child h2 {
    margin-top: 0;
}
#controls h2 {
    margin-bottom: 0;
}

/* stage */
#stage {
    width: 250px;
    height: 500px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}
#stage div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: no-repeat scroll center / contain;
}
#stage #cape_back {
    z-index: 1;
}
#stage #arm_right_base {
    background-image: url('../images/closet/arm_right_base.png');
    z-index: 2;
}
#stage #arm_right {
    z-index: 3;
}
#stage #body {
    background-image: url('../images/closet/base2.png');
    z-index: 4;
}    
#stage #legs {
    z-index: 5;
}
#stage #arm_left_base {
    background-image: url('../images/closet/arm_left_base.png');
    z-index: 6;
}
#stage #shirt {
    z-index: 7;
}
#stage #cape_med {
    z-index: 8;
}
#stage #head {
    background-image: url('../images/closet/head.png');
    z-index: 9;
}
#stage #cape_top {
    z-index: 10;
}
#stage #hat {
    z-index: 11;
}


/* clothes */
#stage #shirt.i1 {
    background-image: url('../images/closet/shirt1.png');
}
#stage #shirt.i2 {
    background-image: url('../images/closet/shirt2.png');
}
#stage #shirt.i3 {
    background-image: url('../images/closet/shirt3.png');
}
#stage #shirt.i4 {
    background-image: url('../images/closet/shirt4.png');
}
#stage #shirt.i5 {
    background-image: url('../images/closet/shirt5.png');
}
#stage #shirt.i6 {
    background-image: url('../images/closet/shirt6.png');
}
#stage #arm_right.i1 {
    background-image: url('../images/closet/arm_right1.png');
}
#stage #arm_right.i2 {
    background-image: url('../images/closet/arm_right2.png');
}
#stage #arm_right.i3 {
    background-image: url('../images/closet/arm_right3.png');
}
#stage #arm_right.i4 {
    background-image: url('../images/closet/arm_right4.png');
}
#stage #arm_right.i5 {
    background-image: url('../images/closet/arm_right5.png');
}
#stage #arm_right.i6 {
    background-image: url('../images/closet/arm_right6.png');
}
#stage #legs.i1 {
    background-image: url('../images/closet/pants1.png');
}
#stage #legs.i2 {
    background-image: url('../images/closet/pants2.png');
}
#stage #legs.i3 {
    background-image: url('../images/closet/pants3.png');
}
#stage #legs.i4 {
    background-image: url('../images/closet/pants4.png');
}
#stage #legs.i5 {
    background-image: url('../images/closet/pants5.png');
}
#stage #legs.i6 {
    background-image: url('../images/closet/pants6.png');
}
#stage #legs.i7 {
    background-image: url('../images/closet/pants7.png');
}
#stage #hat.i1 {
    background-image: url('../images/closet/hat1.png');
}
#stage #hat.i2 {
    background-image: url('../images/closet/hat2.png');
}
#stage #cape_top.i1 {
    background-image: url('../images/closet/cape_top1.png');
}
#stage #cape_med.i1 {
    background-image: url('../images/closet/cape_med1.png');
}
#stage #cape_back.i1 {
    background-image: url('../images/closet/cape_back1.png');
}
#stage #cape_top.i2 {
    background-image: url('../images/closet/cape_top2.png');
}
#stage #cape_med.i2 {
    background-image: url('../images/closet/cape_med2.png');
}
#stage #cape_back.i2 {
    background-image: url('../images/closet/cape_back2.png');
}


/* ferdinand-specific styles */
#ferdinand #stage #arm_right_base {
    background-image: url('../images/closet/ferdinand/arm_right_base.png');
    z-index: 2;
}
#ferdinand #stage #arm_right {
    z-index: 3;
}
#ferdinand #stage #body {
    background-image: url('../images/closet/ferdinand/base2.png');
    z-index: 4;
}    
#ferdinand #stage #legs {
    z-index: 5;
}
#ferdinand #stage #arm_left_base {
    background-image: url('../images/closet/ferdinand/arm_left_base.png');
    z-index: 6;
}
#ferdinand #stage #shirt {
    z-index: 7;
}
#ferdinand #stage #cape_med {
    z-index: 8;
}
#ferdinand #stage #head {
    background-image: url('../images/closet/ferdinand/head.png');
    z-index: 9;
}
#ferdinand #stage #cape_top {
    z-index: 10;
}
#ferdinand #stage #hat {
    z-index: 11;
}


/* clothes */
#ferdinand #stage #shirt.i1 {
    background-image: url('../images/closet/ferdinand/shirt1.png');
}
#ferdinand #stage #shirt.i2 {
    background-image: url('../images/closet/ferdinand/shirt2.png');
}
#ferdinand #stage #shirt.i3 {
    background-image: url('../images/closet/ferdinand/shirt3.png');
}
#ferdinand #stage #shirt.i4 {
    background-image: url('../images/closet/ferdinand/shirt4.png');
}
#ferdinand #stage #shirt.i5 {
    background-image: url('../images/closet/ferdinand/shirt5.png');
}
#ferdinand #stage #shirt.i6 {
    background-image: url('../images/closet/ferdinand/shirt6.png');
}
#ferdinand #stage #arm_right.i1 {
    background-image: url('../images/closet/ferdinand/arm_right1.png');
}
#ferdinand #stage #arm_right.i2 {
    background-image: url('../images/closet/ferdinand/arm_right2.png');
}
#ferdinand #stage #arm_right.i3 {
    background-image: url('../images/closet/ferdinand/arm_right3.png');
}
#ferdinand #stage #arm_right.i4 {
    background-image: url('../images/closet/ferdinand/arm_right4.png');
}
#ferdinand #stage #arm_right.i5 {
    background-image: url('../images/closet/ferdinand/arm_right5.png');
}
#ferdinand #stage #arm_right.i6 {
    background-image: url('../images/closet/ferdinand/arm_right6.png');
}
#ferdinand #stage #legs.i1 {
    background-image: url('../images/closet/ferdinand/pants1.png');
}
#ferdinand #stage #legs.i2 {
    background-image: url('../images/closet/ferdinand/pants2.png');
}
#ferdinand #stage #legs.i3 {
    background-image: url('../images/closet/ferdinand/pants3.png');
}
#ferdinand #stage #legs.i4 {
    background-image: url('../images/closet/ferdinand/pants4.png');
}
#ferdinand #stage #legs.i5 {
    background-image: url('../images/closet/ferdinand/pants5.png');
}
#ferdinand #stage #legs.i6 {
    background-image: url('../images/closet/ferdinand/pants6.png');
}
#ferdinand #stage #legs.i7 {
    background-image: url('../images/closet/ferdinand/pants7.png');
}
#ferdinand #stage #hat.i1 {
    background-image: url('../images/closet/ferdinand/hat1.png');
}
#ferdinand #stage #hat.i2 {
    background-image: url('../images/closet/ferdinand/hat2.png');
}
#ferdinand #stage #cape_top.i1 {
    background-image: url('../images/closet/ferdinand/cape_top1.png');
}
#ferdinand #stage #cape_med.i1 {
    background-image: url('../images/closet/ferdinand/cape_med1.png');
}
#ferdinand #stage #cape_back.i1 {
    background-image: url('../images/closet/ferdinand/cape_back1.png');
}
#ferdinand #stage #cape_top.i2 {
    background-image: url('../images/closet/ferdinand/cape_top2.png');
}
#ferdinand #stage #cape_med.i2 {
    background-image: url('../images/closet/ferdinand/cape_med2.png');
}
#ferdinand #stage #cape_back.i2 {
    background-image: url('../images/closet/ferdinand/cape_back2.png');
}


/* media queries */
@media (max-width: 767px) {
  footer h2 { display: block; border-right: 0; padding: 0; margin-top: 0.5rem; margin-bottom: 0.25rem; }
  footer p:first-child { padding-left: 0; }
  .visible-xs { display: block; }
}