* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    touch-action: none;
    font-family: 'Roboto', sans-serif;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.col {
    z-index: 100000;

}
.game_body {
  background-color: #f2f2f2;
  /* rgb(29, 42, 58); */
  height: 100dvh;
  width: 100dvw;
}

.tab_icon_holder {
  display: none;
}

.goal_text_holder {
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  flex-direction: column;
}
.no_landscape {
  background-color: rgb(29, 42, 58);
  display: none;
}

.match_hex {
  display: flex;
  justify-content: space-between;
  margin-right: 16px;
}

.landscape_top {
  color: white;
  font: normal normal normal 24px/18px Proxima Nova;
}

.landscape_bottom {
  color: white;
  font: normal normal bold 24px/18px Proxima Nova;
  margin-top: 16px;
}

.game_container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100%;
}

.merge_percent {
  margin: auto;
  font-size: xxx-large;
}

.mix_button_how_to {
  background-color: transparent;
  width: 47px;
  height: 36px;
  z-index: 900;
}

.mix_text_how_to {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  text-align: center;
  font: normal normal normal 19px/19px Roboto;
  border-radius: 10px;
  box-shadow: 0px 3px 6px #00000029;
  background-color: white;
}

.mix_button {
  position: absolute;
  background-color: transparent;
  top:-24px;
  left: -36px;
  width: 62px;
  height: 48px;
  z-index: 900;
  cursor: pointer; 
}

.mix_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  text-align: center;
  font: normal normal normal 25px/25px Roboto;
  border-radius: 10px;
  box-shadow: 0px 3px 6px #00000029;
  background-color: white;
  border-color: black;
  border-width: 2px;
  border-style: solid;
}

.mix_text:active {
  box-shadow: 0px 1px 2px #00000029;
  border-radius: 10px;
}

.current_color_holder {
  width: MIN(19%, 86px);
  height: 66%;
  background-color: #161F2B;
  border-top-left-radius: 50vh;
  border-bottom-left-radius: 50vh;
  display: flex;
  align-items: center;
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translate(0, -50%);
}

.color_display {
  aspect-ratio: 1;
  height: 80%;
  background-color: white;
  border-radius: 50vh;
  margin-left: 10%;
}
.arrow_left {
  width: 0; 
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;  
  border-right: 6px solid white; 
  margin-left: 8px;
}

.goal_color_items {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.mix_image {
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 10px;
  touch-action: none;
}

.mix_image:active {
  box-shadow: 0px 1px 2px #00000029;
  border-radius: 10px;
}

.colors_selected {
  width: 600px;
}

.color_bar {
  position: relative;
  height: MIN(100px, calc((100dvh - 90px )/ 8));
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.header_container {
  position: relative;
  height: 90px;
  margin: auto;
  width: MIN(100%, 460px);
}

.header_options {
  display: flex;
}

.header_container_stats_mobile {
  display: none;
}

.header_selectable_item_mobile {
  margin: auto;
  padding: 8px;
  border-radius: 4px;
}

.header_selectable_item_mobile:active {
  background-color: #606975;
}

.modal_display {
  margin: auto;
  min-width: MIN(380px,90dvw);
  border-radius: 20px;
  border-color: white;
}


.copy_modal_display {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  border-radius: 8px;
  border:1px solid black;
  color: black;
  background-color: white;
  font: normal normal normal 15px/25px Roboto;
  width: max-content;
  padding: 8px;
  display: none;
  z-index: 100000;
}

.close_button {
  display: flex;
  justify-content: end;
}

.close_image {
  cursor: pointer;
}
.close_image:active {
  filter: brightness(0.5);
}

.modal_content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal_container {
  padding: 25px;
}

.share_content {
  margin: auto;
  display: flex;
  align-items: center;
}

.win_image {

}

.modal_title {
  font: normal normal bold 24px/18px Proxima Nova;
  letter-spacing: 0px;
  color: #1F2A38;
  padding-top: 25px;
  padding-bottom: 8px;
}

.modal_body {
  font: normal normal normal 18px/20px Roboto;
  letter-spacing: 0px;
  color: #1F2A38;
}

.modal_body_bottom {
  padding-bottom: 20px;
}

.stats_button {
  background: #F9A51A 0% 0% no-repeat padding-box;
  border-radius: 10px;
  padding-top: 18px;
  padding-bottom: 18px;
  width: 100%;
  text-align: center;
  font: normal normal bold 18px/18px Proxima Nova;
  letter-spacing: 0px;
  color: #1F2A38;
  cursor: pointer;
}

.stats_button:active {
  background: #C78414 0% 0% no-repeat padding-box;
}

.keep_playing_button {
  background: #478BFA 0% 0% no-repeat padding-box;
  border-radius: 10px;
  padding-top: 18px;
  padding-bottom: 18px;
  width: 100%;
  text-align: center;
  font: normal normal bold 18px/18px Proxima Nova;
  letter-spacing: 0px;
  color: white;
  margin-top: 8px;
  cursor: pointer;
}

.keep_playing_button:active {
  background: #386FC8 0% 0% no-repeat padding-box;
}
.download_button {
  background: #A51AF9 0% 0% no-repeat padding-box;
  border-radius: 10px;
  padding-top: 18px;
  padding-bottom: 18px;
  width: 100%;
  text-align: center;
  font: normal normal bold 18px/18px Proxima Nova;
  letter-spacing: 0px;
  color: white;
  margin-top: 8px;
  cursor: pointer;
}

.download_button:active {
  background: #8414C7 0% 0% no-repeat padding-box;
}

.download_text {
  padding-bottom: 4px;
}

.share_button {
  display: flex;
  align-items: center;
  margin-top: 8px;
  border-radius: 10px;
  padding-top: 18px;
  padding-bottom: 18px;
  width: 100%;
  font: normal normal bold 18px/18px Proxima Nova;
  cursor: pointer;
}
.share_button:active {
  background: #E9F4FB 0% 0% no-repeat padding-box;
}

.share_modal_image {
  padding-right: 6px;
}

.share_text {

}

.stats_modal_display {
  margin: auto;
  min-width: MIN(500px,90dvw);
  border-radius: 20px;
  border-color: black;
  background-color: white;
}

.header {
  display: flex;
  margin-bottom: 16px;
}

.modal_header_text {
  font: normal normal normal 25px/35px Roboto;
  letter-spacing: 0px;
  margin-right: auto;
  color: black;
}

.top_larger_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}

.large_box {
  background-color: #e5e5e5;
  border-radius: 10px;
  width: 48%;
  padding: 15px;
}

.large_shadow_text {
  font-size: 16px;
  color: #657180;
  padding-bottom: 8px;
}

.large_block_text {
  font-size: 54px;
  color: black;
  font-weight: bold;
}

.small_shelf {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.small_box {
  background-color: #e5e5e5;
  border-radius: 10px;
  width: 22.5%;
  padding: 15px;
}

.small_block_text {
  font-size: 24px;
  color: black;
  font-weight: bold;
  margin-bottom: 8px;
}

.small_shadow_text {
  font-size: 14px;
  color: #657180;
}

.bar_chart {
  width: 100%;
}

.bar_chart_title {
  margin-top: 16px;
  margin-bottom: 16px;
  font: normal normal normal 20px/30px Roboto;
  letter-spacing: 0px;
  color: #FFFFFF;
  text-align: center;
}

.bar_container {
  margin-bottom: 16px;
  height: 50px;
  background-color: #e5e5e5;
  border-radius: 10px;
}

.bar_result {
  display: flex;
  height: 100%;
  width: fit-content;
  border-radius: 10px;
  background-color: #F9A51A;
  align-items: center;
}

.bar_guess_number {
  font-size: 18px;
  font-weight: bold;
  color: white;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 13px;
  padding-right: 13px;
  border-radius: 50%;
  background-color: #D68500;
  margin-left: 10px;
}

.bar_guess_times {
  font-size: 20px;
  font-weight: bold;
  color: white;
  padding-left: 8px;
  margin-right: 16px;
  
}

.how_to_play_modal_display {
  margin: auto;
  width: MIN(500px,90dvw);
  border-radius: 20px;
  border-color: white;
}

.how_to_play_title {
  text-align: center;
  font: normal normal bold 28px/30px Proxima Nova;
  letter-spacing: 0px;
  color: #1F2A38;
}

.how_to_play_subtitle {
  text-align: center;
  font: normal normal normal 22px/25px Roboto;
  letter-spacing: 0px;
  color: #1F2A38;
  margin-bottom: 35px;
}

.how_to_instruction {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 30px;
}

.merge_button_how_to {
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 10px;
}

.how_to_image {
  width: 47px;
}

.how_to_instruction_test {
  text-align: left;
  font: normal normal normal 16px/20px Proxima Nova;
  letter-spacing: 0px;
  color: #5D5D5D;
  margin-left: 25px;
}

.header_container_stats {
  padding-top: 20px;
  position: relative;
  margin: auto;
  width: MIN(100%, 560px);
  display: flex;
  flex-direction: row;
}


.header_selectable_item {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  margin-right: 25px;
  padding: 5px;
  border-radius: 5px;
}

.header_selectable_item:active {
  background-color: #606975;
}

.tutorial_button {
  background: #F9A51A 0% 0% no-repeat padding-box;
  border-radius: 10px;
  padding-top: 18px;
  padding-bottom: 18px;
  width: 100%;
  text-align: center;
  font: normal normal bold 18px/18px Proxima Nova;
  letter-spacing: 0px;
  color: #1F2A38;
  cursor: pointer;
}


.tutorial_button:active {
  background: #C78414 0% 0% no-repeat padding-box;
}

.not_in_tutorial {
  display: none;
}

.pointer_image {
  position: absolute;
  z-index: 100100;
}

.pointer_background {
  position: absolute;
  background-color: black;
  opacity: .4;
  z-index: 100001;
  width: 100%;
  height: 100%;
}

.pointer_text {
  position: absolute;
  font: normal normal normal 22px/25px Roboto;
  color: black;
  z-index: 100101;
  background-color: white;
  border-radius: 4px;
  padding: 2px;
  text-align: center;
  max-width: 25dvw;
}

.color_bar_container {
  position: relative;
  height: MIN(90px, calc((100dvh - 90px )/ 8 - 10px));
  margin: auto;
  width: MIN(100%, 460px);
  border-radius: 10px;
  background-color: #e5e5e5;
  /* border: 2px solid #e5e5e5; */
}

.color_background {
  position: absolute;
  background-color: red;
  height: 0px;
  width: 100%;
}

.goal_color_bar {
  z-index: 500;
  position: relative;
}

.color_disabled {
  display: none;
}

.text_holder {
  display: flex;
  justify-content: center;
  height: 100%;
}

.shrunken_text_holder {
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.color_title {
  font: normal normal normal 28px/28px Roboto;
  letter-spacing: 0px;
  color: #1F2A38;
  margin: auto;
}

.goal_color_title {
  font: normal normal normal 28px/28px Roboto;
  letter-spacing: 0px;
  color: #1F2A38;
  margin: auto;
}

.goal_match_percent {
  font: normal normal normal 15px/25px Roboto;
  letter-spacing: 0px;
  color: #1F2A38;
  margin: auto;
}

.match_percent {
  font: normal normal normal 15px/25px Roboto;
  letter-spacing: 0px;
  color: #1F2A38;
}

.color_header {
  height: 90px;
}

.color_logo_image {
  padding-top: 20px;
  cursor: pointer;
}

.color_header_image {
  padding-left: 5px;
  margin: auto;
}

.header_text {
  text-align: center;
  font: normal normal normal 15px/25px Roboto;
  letter-spacing: 0px;
  margin: auto;
  color: black;
  padding-left: 10px;
  padding-right: 5px;
}


.goal_color {
    background-color: rgb(39, 137, 119);
    height: 12.5dvh;
    width: 100vw;
    display: flex;
}



.color-picker-container {
    display: inline-block;
    position: relative;
    z-index: 800;
    margin: auto;
  }
  
  .color-picker-container .picker-container {
    display: flex;
    flex-direction: column;
  }


  .color-picker-container .picker-container .canvas-container {
    margin: 20px;
    position: relative;
    float: left;
    width: 200px; 
    display: inline-block;
    background: transparent;
  }
  .color-picker-container .picker-container .canvas-container.active {
    display: block;
  }
  .color-picker-container .picker-container .canvas-container canvas {
    cursor: crosshair;
    /* border-radius: 50%; */
    background: transparent;
  }
  .color-picker-container .picker-container .canvas-container .pointer {
    width: 15px;
    height: 15px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.1);
    display: block;
    touch-action: none;
  }
  .color-picker-container .picker-container .slider-container {
    float: right;
    position: relative;
    padding: 15px;
  }
  .color-picker-container .picker-container .slider-container .slider {
    width: 249px;
    height: 15px;
    background: #000;
  }
  .color-picker-container .picker-container .slider-container .pointer {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background-color: white;
    position: absolute;
    pointer-events: none;
    border-style: solid;
    border-color: black;
    border-width: 2px;
    top: 4px;
  }
  .color-picker-container .palletes-container {
    float: right;
    width: 275px;
  }
  .color-picker-container .palletes-container .palette {
    width: 35px;
    height: 35px;
    float: right;
    border-radius: 4px;
    margin: 5px;
    box-shadow: inset 0px 2px 1px rgba(0, 0, 0, 0.28);
    cursor: pointer;
  }
  .color-picker-container .palletes-container .palette.active {
    box-shadow: 0 0 0 3px #3F3F40;
  }
  .color-picker-container .palletes-container .palette.add {
    border: 2px dashed #bababa;
    box-shadow: inherit;
    position: relative;
  }
  .color-picker-container .palletes-container .palette.add:after {
    content: "+";
    font-size: 24px;
    color: #bababa;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
    line-height: 30px;
  }
  @media (pointer:none), (pointer:coarse), (max-width: 800px) {
    #color_picker_element {
      display: none;
    }
    #picker {
      display: none;
    }
    #col-mobile {
      height: 0;
      position: relative;
      margin-left: auto;
      margin-right: auto;
      top: calc(100dvh - MIN(100dvw / 3, 200px) - 50px);
    }
/* 
    .text_holder {
      margin-top: 4px;
      margin-left: 16px;
    } */

    .color-picker-container .picker-container .canvas-container {
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      float: left;
      display: block;
      width: inherit;
      touch-action: none;
      background: transparent;
    }

    .color_header {
      height: 90px;
    }


    .header_container_stats {
      display: none;
    }

    .header_container_stats_mobile {
      position: relative;
      margin: auto;
      width: MIN(100%, 460px);
      display: flex;
      flex-direction: row;
    }
    .bar_container {
      margin-bottom: 16px;
      height: 20px;
      background-color: #e5e5e5;
      border-radius: 10px;
    }

    .bar_guess_number {
      font-size: 12px;
      font-weight: bold;
      color: white;
      padding-top: 2px;
      padding-bottom: 2px;
      padding-left: 6px;
      padding-right: 6px;
      border-radius: 50%;
      background-color: #D68500;
      margin-left: 10px;
    }

    .large_shadow_text {
      font-size: 12px;
      color: #657180;
      padding-bottom: 8px;
    }
    
    .large_block_text {
      font-size: 24px;
      color: black;
      font-weight: bold;
    }

    .small_shadow_text {
      font-size: 12px;
      color: #657180;
    }

    .small_block_text {
      font-size: 16px;
      color: black;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .pointer_text {
      position: absolute;
      font: normal normal normal 16px/20px Roboto;
      color: black;
      z-index: 100101;
      background-color: white;
      border-radius: 4px;
      padding: 2px;
      text-align: center;
      max-width: 50dvw;
    }


    .color_title {
      font: normal normal normal MIN(22px, calc(((100dvh - 90px )/ 8 - 10px - 12px ) / 2)) Roboto;
    }

    .match_percent {
      font: normal normal normal MIN(15px, calc(((100dvh - 90px )/ 8 - 10px - 12px ) / 2)) Roboto;
    }

    .picker-mobile {
      display: flex;
    }

    .header {
      margin-bottom: 4px;
    }

    .bar_chart_title {
      margin-top: 8px;
      margin-bottom: 4x;
    }

    @media (orientation: landscape) {
      .game_body {
        display: none;
      }
      .no_landscape {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100dvh;
        justify-content: center;
      }
    }
  }