/***********/
/* GENERAL */
/***********/
* {
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    scroll-behavior: smooth; /* Optional: Smooth scrolling */
}
  main {
    display: flex;
    min-height: 100vh;
  }
  
  h1 {
    font-family: 'Gorditas', cursive;
    letter-spacing: .1em;
    font-size: 45px;
    color: #fff;
    margin-left: 10px;
  }
  
  h2 {
    font-family: 'Bebas Neue', cursive;
    letter-spacing: .1em;
    color: #fff;
    transition: ease-in-out .25s;
    cursor: pointer;
    display: inline-block;
  }
  
  h2 ~ div {
      margin-top: 15px;
  }
  
  h2:hover {
    color: #cf4b8e;
    transform: translateX(-10px);
  }
  
  
  /**********************************/
  /*==== CATALOGUE - BLOCK LEFT ====*/
  /**********************************/
  #catalogue {
      width: 50%;
      background: linear-gradient(180deg, rgba(238,153,191,1) 90%, rgba(210,89,149,1) 98%);
    position: relative;
  }
  
  #hair_style, #uw_style, #top_style, #bottom_style, #socks_style, #shoes_style, #costumes_style, .btn_reset {
    margin: 20px 20px;
  }
  
  .btn_style {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 15px;
    background-color: white;
  }
  
  button.btn_style {
    border-radius: 4px;
    border-width: 2px;
    border-style: none;
    transition: ease-in-out .25s;
    box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.19);
  }
  
  button.btn_style:hover {
    border-width: 4px;
    border-style: solid;
    border-color: #cf4b8e;
    transform: scale(1.4);
  }
  
  .options {
    display: flex;
  }
  
  .btn_hair_1 {
    background-image: url('assets/imgs/hair-thumb-1.png')  /*(https://queendezign.com/temp/hair-thumb-1.png);*/
  }
  .btn_hair_2 {
    background-image: url(assets/imgs/hair-thumb-2.png);
  }
  .btn_hair_3 {
    background-image: url(assets/imgs/hair-thumb-3.png);
  }
  
  .btn_uw_1 {
    background-image: url(assets/imgs/uw-thumb-1.png);
  }
  .btn_uw_2 {
    background-image: url(assets/imgs/uw-thumb-2.png);
  }
  .btn_uw_3 {
    background-image: url(assets/imgs/uw-thumb-3.png);
  }
  
  .btn_top_1 {
    background-image: url(https://queendezign.com/temp/top-thumb-1.png);
  }
  .btn_top_2 {
    background-image: url(https://queendezign.com/temp/top-thumb-2.png);
  }
  .btn_top_3 {
    background-image: url(https://queendezign.com/temp/top-thumb-3.png);
  }
  
  .btn_bottom_1 {
    background-image: url(assets/imgs/bottom-thumb-1.png);
  }
  .btn_bottom_2 {
    background-image: url(assets/imgs/bottom-thumb-2.png);
  }
  .btn_bottom_3 {
    background-image: url(assets/imgs/bottom-thumb-3.png);
  }
  
  .btn_socks_1 {
    background-image: url(assets/imgs/socks-thumb-1.png);
  }
  .btn_socks_2 {
    background-image: url(assets/imgs/socks-thumb-2.png);
  }
  .btn_socks_3 {
    background-image: url(assets/imgs/socks-thumb-3.png);
  }
  .btn_socks_4 {
    background-image: url(assets/imgs/socks-thumb-4.png);
  }
  
  .btn_shoes_1 {
    background-image: url(assets/imgs/shoes-thumb-1.png);
  }
  .btn_shoes_2 {
    background-image: url(assets/imgs/shoes-thumb-2.png);
  }
  .btn_shoes_3 {
    background-image: url(assets/imgs/shoes-thumb-3.png);
  }
  
  .btn_costumes_1 {
    background-image: url(assets/imgs/costume-catwoman-thumb.png);
  }
  
  .btn_reset {
    background-color: #FED;
    font-size: 18px;
    color: #000;
    padding: 10px 10px;
    text-align: center;
  }
  
  #randomizer {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 15px;
    margin-right: 15px;
  }
  
  #randomizer button.btn_randomizer {
    background-image: url('https://queendezign.com/temp/random_button.png');
    background-color: transparent;
    background-repeat: no-repeat;
    width: 112px;
    height: 154px;
    border: 0;
  
    cursor: pointer;
    transition: ease-in-out .25s;
  }
  
  #randomizer button.btn_randomizer:hover {
    transform: scale(1.05);
  }
  
  #randomizer span {
    display: block;
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: .1em;
    font-weight: 600;
    font-size: 1em;
  }
  
  /***************************************/
  /***************************************/
  /*==== DRESSING-ROOM - BLOCK RIGHT ====*/
  /***************************************/
  /***************************************/
  #dressing-box {
      width: 50%;
      height: 850px;
      background: #fff;
  }
  
  #galbox {
    display: flex;
    justify-content: center;
    padding-top: 5vh;
  }
  
  /* DIV des cheveux */
  #hair_selection {
    background-image: url(https://queendezign.com/temp/hair-1.png);
    background-position: center top;
    background-repeat: no-repeat;
    width: 395px;
    height: 788px;
    position: absolute;
  /*   margin: 20px 31px; */
    z-index: 4;
  }
  
  /* DIV des sous-vetements */
  #underwear_selection {
    background-image: none;
    background-position: center top;
    background-repeat: no-repeat;
    width: 395px;
    height: 788px;
    position: absolute;
  /*   margin: 20px 31px; */
    z-index: 5;
  }
  
  /* DIV des tops */
  #top_selection {
      background-image: none;
      background-position: center top;
      background-repeat: no-repeat;
      width: 395px;
      height: 788px;
      position: absolute;
  /*     margin: 19px 29px; */
      z-index: 6;
  }
  
  /* DIV des pantalons/jupes */
  #bottom_selection {
    background-image: none;
    background-position: center top;
    background-repeat: no-repeat;
    width: 395px;
    height: 788px;
    position: absolute;
  /*   margin: 20px 30px; */
    z-index: 9;
  }
  
  /* DIV des chaussettes/bas */
  #socks_selection {
    background-image: none;
    background-position: center top;
    background-repeat: no-repeat;
    width: 395px;
    height: 788px;
    position: absolute;
  /*   margin: 20px 30px; */
    z-index: 7;
  }
  
  /* DIV des chaussures */
  #shoes_selection {
    background-image: none;
    background-position: center top;
    background-repeat: no-repeat;
    width: 395px;
    height: 788px;
    position: absolute;
  /*   margin: 20px 30px; */
    z-index: 8;
  }
  
  #costumes_selection {
    background-image: none;
    background-position: center top;
    background-repeat: no-repeat;
    width: 395px;
    height: 788px;
    position: absolute;
  /*   margin: 20px 30px; */
    z-index: 10;
  }
  
  #girl {
    background: url("assets/imgs/model-base.jpg") top left transparent no-repeat;
    background-position: center top;
    background-repeat: no-repeat;
    width: 395px;
    height: 788px;
    position: absolute;
  /*   margin: 20px 30px; */
    z-index: 1;
  }
  
  
  
  
  
  