/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;

}



article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.text {
  font-family: "Times New Roman", Times, serif;
  bottom: 8px;
  right: 16px;
}

#container{
    position: absolute;
    margin: auto;
    top: 100px;
    background-color: aqua;
}

#background{
    position: relative; 
    width: 944px;
    height: 656px;
    top: 0px;
    background-image: url("../img/Background.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

#foreground{
  position: absolute;
  width: 944px;
  height: 656px;
  top: 0px;
  z-index: 4;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../img/Foreground.png");
}

.framed-element {
    border-width: 30px;
    border-style: solid;
    border-color: transparent;
    width:1843.5;
    height:1233;
    border-image-source: url("../img/frame.png");
    border-image-slice:30;
    border-image-repeat: round;
}

#man {
    position: relative;
    z-index: 3;
    width: 944px;
    height: 656px;
    background-image: url("../img/anik_body.png");
    background-size: contain;
    background-repeat: no-repeat;
    animation: idle-hover 3s ease-in-out infinite;
}

#pants {
    position: relative;
    width: 944px;
    height: 656px;
    animation: idle-hover 3s ease-in-out infinite ;
}

#pants.pants1 { background-image: url("../img/pants1.png"); }
#pants.pants2 { background-image: url("../img/pants2.png"); }
#pants.pants3 { background-image: url("../img/pants3.png"); }
#pants.pants4 { background-image: url("../img/pants4.png"); }
#pants.pants5 { background-image: url("../img/pants5.png"); }
#pants.pants6 { background-image: url("../img/pants6.png"); }
#pants.pants7 { background-image: url("../img/pants7.png"); }

#pants.pants1, #pants.pants2, #pants.pants3, #pants.pants4, 
#pants.pants5, #pants.pants6, #pants.pants7 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 5;
}

#shirts {
    position: relative;
    width: 944px;
    height: 656px;
    animation: idle-hover 3s ease-in-out infinite;
}

#shirts.shirt1 { background-image: url("../img/shirt1.png"); }
#shirts.shirt2 { background-image: url("../img/shirt2.png"); }
#shirts.shirt3 { background-image: url("../img/shirt3.png"); }
#shirts.shirt4 { background-image: url("../img/shirt4.png"); }
#shirts.shirt5 { background-image: url("../img/shirt5.png"); }
#shirts.shirt6 { background-image: url("../img/shirt6.png"); }
#shirts.shirt7 { background-image: url("../img/shirt7.png"); }

#shirts.shirt1, #shirts.shirt2, #shirts.shirt3, #shirts.shirt4, 
#shirts.shirt5, #shirts.shirt6, #shirts.shirt7 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 6;
}

#hairfront {
    position: relative;
    width: 944px;
    height: 656px;
    animation: idle-hover 3s ease-in-out infinite;
}

#hairfront.hairfront1 { background-image: url(../img/fronthair1.png); }
#hairfront.hairfront2 { background-image: url(../img/fronthair2.png); }
#hairfront.hairfront3 { background-image: url(../img/fronthair3.png); }
#hairfront.hairfront4 { background-image: url(../img/fronthair4.png); }
#hairfront.hairfront5 { background-image: url(../img/fronthair5.png); }
#hairfront.hairfront6 { background-image: url(../img/fronthair6.png); }

#hairfront.hairfront1, #hairfront.hairfront2, #hairfront.hairfront3, 
#hairfront.hairfront4, #hairfront.hairfront5, #hairfront.hairfront6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 7;
}

#hairback {
    position: relative;
    width: 944px;
    height: 656px;
    animation: idle-hover 3s ease-in-out infinite ;
}

#hairback.hairback1 { background-image: url(../img/backhair1.png); }
#hairback.hairback2 { background-image: url(../img/backhair2.png); }
#hairback.hairback3 { background-image: url(../img/backhair3.png); }
#hairback.hairback4 { background-image: url(../img/backhair4.png); }
#hairback.hairback5 { background-image: url(../img/backhair5.png); }
#hairback.hairback6 { background-image: url(../img/backhair6.png); }

#hairback.hairback1, #hairback.hairback2, #hairback.hairback3, 
#hairback.hairback4, #hairback.hairback5, #hairback.hairback6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

.hairback {
    z-index: 2;
    position: absolute;
    width: 944px;
    height: 656px;
    background-image: url("../img/hairback.png");
}

button {
    padding: 0;
    border: none;
    background: none;     
    display: inline-block;
    position: absolute;
    z-index: 1000;
    cursor: pointer;
}

button img {
    display: block;        
    width: 75px;           
    height: 75px;
}

button:hover {
    transform: scale(1.1);        
    filter: brightness(1.2); 
    filter: drop-shadow(4px 4px 6px white) ;
  
    transition: transform 0.5s, filter 0.3s; 
    cursor: pointer;
}
button:active{
    filter: invert(75%);
      animation: shake 0.5s;
}

@keyframes shake { 
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes idle-hover {
  0% {
    transform: translateY(0); /* Start position */
  }
  50% {
    transform: translateY(-5px); /* Move slightly up */
  }
  100% {
    transform: translateY(0); /* Return to start */
  }
}

#nexthair {
    position: absolute;
    background-color: transparent;
    border-color: transparent;
    background-repeat: no-repeat;
    z-index: 9;
    right: 300px;         
    top: 125px;          
}

#nextshirt {
    position: absolute;
    background-color: transparent;
    border-color: transparent;
    background-repeat: no-repeat;
    right: 300px;
    top: 225px;             
    z-index: 9;
}

#nextpants {
    position: absolute;
    background-color: transparent;
    border-color: transparent;
    background-repeat: no-repeat;
    right: 300px;
    top: 325px;  
    z-index: 9;
}

#prevhair {
    position: absolute;
    background-color: transparent;
    border-color: transparent;
    background-repeat: no-repeat;
    left: 105px;
    top: 125px;
    z-index: 9;
}

#prevshirt {
    position: absolute;
    background-color: transparent;
    border-color: transparent;
    background-repeat: no-repeat;
    left: 105px;
    top: 225px;
    z-index: 9;
}

#prevpants {
    position: absolute;
    background-color: transparent;
    border-color: transparent;
    background-repeat: no-repeat;
    left: 100px;
    top: 325px;
    z-index: 9;
}


#descriptionText{
    position: absolute;
    right: 10px;
    top: 120px;
    width: 250px;
   font-family: 'Source Code Pro', monospace;
  font-weight: 400;
  font-style: normal;
    font-size: 28px;
    line-height: 1;

    color: white;
    text-shadow: 2px 2px 6px black;

    z-index: 20;
}

@font-face {
  font-family: 'Source Code Pro';
  src: url('SourceCodePro-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}