/* General Styles for all : */

/* Style for Text: */
html{color: var(--blue);font-family: 'Roboto Mono';}
li{font-size: 14px;}
h1{font-size: 30px; font-weight: bold;padding-bottom: 40px;}
h2{font-size: 24px;padding-bottom: 20px;line-height:180%;}
p{font-size: 20px;padding-bottom: 20px;line-height:180%;}
.small_txt{font-size:14px;}
a{ color: var(--orange);text-decoration: none;}
a:hover{color: var(--blue);cursor: pointer;font-style:italic;}
.highlight{
  font-weight: bold;
  font-size:24px;
  font-style:italic;
}
.italic{font-style:italic;}
.bold{font-weight: bold;}

/* Style for Buttons: */
.button{
  background-color: var(--blue);
  border: none;
  border-radius: 10px;
  color: white;
  text-align:center;
  font-size: 20px;
  font-family: Roboto Mono;
  padding:5px;
  cursor: pointer;
  width: 240px;
  padding: 12px;
  border: 2px solid var(--blue);
}
.button:hover{
  background-color: white;
  color: var(--blue);
}
.buttons{
  position: relative;
  left:50%;
  width:100%;
  transform:translate(-50%,0%);
  display:flex;
  flex-flow:row;
  justify-content: space-around;
  padding-top:18px;
  padding-bottom: 18px;
}

/* Style for the Reset Buttons: */
.reset_b{
  width: 7vw;
  padding: 5px;
  font-size: 16px;
  margin-top: 10px;
  margin-left: -10px;
}
.sliders_block{
  width: 100%;
}

/* arrow images as buttons: */
.btn{
  height:50px;
  width:50px;
  position: fixed;
  z-index:9999;
  top:calc(50% - 25px);
  transform: translate(0,-50%);
  cursor:pointer;
  transition: 500ms ease-in-out;
}
.btn:hover{
  content: url('img/pfeil_O.png');
}

/* General Style for a flex container in middle of screen: */
.box_con{
  display:none;
  flex-flow:column nowrap;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width:80%;
  border: 2px solid var(--blue);
  border-radius: 20px;
  background-color: white;
  color: var(--blue);
  padding: 20px;
  text-align: center;
  align-items: center;
  justify-content: space-evenly;
}

/* Exit X Style: */
.exit{
  position: absolute;
  top:-50px;
  right:0px;
  background-color: white;
  border: 3px solid var(--blue);
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
.x{
  font-weight: bold;
  color:var(--blue);
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.exit:hover{border-color:var(--orange);}
.exit:hover .x{color:var(--orange);}

/* Navbar all*/
.nav{
  font-family: 'Roboto Mono';
  position: fixed;
  top: 0;
  left: 0;
  height: 30px;
  width: 100%;
  padding: 10px;
  z-index:4;
  text-align:left;
  border-bottom:3px solid var(--blue);
  background-color: white;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding-bottom: 10px;
  padding-top: 20px;
}
.nav-home{
  font-size:30px;
  font-weight:bold;
  color: var(--blue);
}
.nav-info{
  text-align:right;
  font-weight:normal;
  font-size:18px;
  position: relative;
  padding:0;
  padding-right:40px;
}
#home:hover{color:var(--orange);}

/* Navbar Startpage: */
#gen_txt{display:none;}
.nav_alpha{
  text-align:center;
  background-color:transparent;
  border:none;
  display:inline;
}

/* Style FAQ page: */
.faq_page_con{
  position: absolute;
  top: 60px;
  display: flex;
  overflow: hidden;
  width: 100%;
}
.faq_con{
  font-family: 'Roboto Mono';
  width: calc(55% - 40px);
  margin: 20px;
}
.video_con{
  position: fixed;
  overflow: hidden;
  height: calc(100% - 60px);
  right: 0;
  width: 45%;
  z-index: 2;
  top: 60px;
}
.video{
  position: absolute;
  right: 50%;
  top: 0;
  height: 100%;
  transform: scale(3);
}
#ask-me{
  position:fixed;
  bottom:20px;
  left:20px;
  width:310px;
  z-index:999;
}

.faq{
  border-bottom: 2px solid var(--blue);
  cursor: pointer;
  padding-bottom:20px;
  margin-bottom:20px;
}
#last_faq{
  border:none;
  margin-bottom:140px;
}
.faq:hover{border-color:var(--orange);}
.faq:hover .question{
  color:var(--orange);
  font-style:italic;
}
.faq:hover .arrow{stroke:var(--orange);}
svg{transition: 500ms ease-in-out;}

.q_con{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.question{
  padding-bottom:0px;
  width:calc(100% - 40px);
}

.answer{
  padding:0;
  font-size:18px;
  max-height: 0;
  overflow: hidden;
  transition: 1s ease-in-out;
}
.faq.active svg{transform: rotate(180deg);}
.faq.active .answer{max-height: 1200px;}
.faq.active .question{font-style:italic; font-weight:bold;}



/* Style for collection page: */
.collection_con{
  position:absolute;
  top:70px;
  width: 80%;
  left:70px;
}
.prev{
  left:20px;
  transform: rotate(90deg);
}
.next{
   left:calc(100% - 70px);
   transform: rotate(-90deg);
 }
.collection_slide{
  display:none;
}
.pattern{
  position:fixed;
  width: 50%;
}
.p_foto{
  top: 0px;
  left: 50%;
  height: 100%;
  object-fit: cover;
}
.p_scan{
  top:70px;
  left:50%;
  height:calc(100% - 90px);
  object-fit: contain;
}
.story{
  font-family: 'Roboto Mono';
  width:49%;
  margin-left:20px;
  min-height: calc(100vh - 90px);
  align-content: center;
  padding-bottom:50px;
}
.story_title{
  font-size: 20px;
  font-weight: bold;
  font-style: italic;
}
.story_txt{
  font-size: 16px;
  line-height:120%;
}

/* Style for landing Page: */
#background{
  background-image:url("img/Cover.jpg");
  width:100%;
  height:100%;
  background-size: cover;
  background-repeat:no-repeat;
  background-position:center;
  overflow:hidden;
  position: absolute;
}
#start_h{
  position: fixed;
  top:70px;
  left:50%;
  transform: translate(-50%,0%);
  color:white;
  width:calc(100% - 40px);
  text-align:center;
  /* display: inline-block; */
}
#start_buttons{
  position: absolute;
  top:calc(100% - 100px);
}

/* Style for the Start Here container */
#generate{
  margin-bottom:20px;
  margin-top:30px;
  width:253px;
  background-color:var(--orange);
  color:white;
  border:2px solid var(--orange);
}
#generate:hover{
  color:var(--orange);
  background-color:white;
}
.FileInput{margin-top:20px;}
#input_b{
  background-color:white;
  color:var(--blue);
  border:2px solid var(--blue);
}
#input_b:hover{
  background-color:white;
  color:var(--orange);
  border:2px solid var(--orange);
}
#dataInput {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
#dataInput:focus + label {
	outline: thin double #32a1ce;
	outline: -webkit-focus-ring-color auto 5px;
}
#noFileMessage{
  padding:0;
  margin-top:30px;
  margin-bottom:-10px;
}

/* Style for the Pattern Generator: */
.generator_con{
  /* margin:30px; */
  top:60px;
  position: absolute;
  width: 100%;
  height: calc(100% - 60px);
  display: none;
  flex-direction: row;
  justify-content: space-between;
}

/* Style for the Settings: */
#settings{
  width: 36%;
  padding: 20px;
  display:flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  transition: top 1s ease-in-out;
}
.categorie{
  margin-bottom:10px;
  width:100%;
  display:flex;
  justify-content: space-between;
}
.column{
  display:flex;
  justify-content: space-between;
  flex-flow:column;
}
.row{
  display:flex;
  justify-content: space-between;
  flex-flow:row;
}
.left_pane{width: 24%;}
.right_pane{width:75%;}

/* Style for the Material Inputs: */
.material_input{
  width:150px;
  margin-bottom: 15px;
  margin-top: 2px;
  display: grid;
  grid-template-columns: 20px auto;
  gap: 7px;
  font-size:14px;
}
.material_input label{
  top:5px;
  position:relative;
}
.radio {
  -webkit-appearance: none;
  appearance: none;
  background-color: white;
  margin: 0;
  font: inherit;
  color: var(--blue);
  width: 20px;
  height: 20px;
  border: 3.5px solid var(--blue);
  border-radius: 50%;
  transform: translateY(-2px);
  display: grid;
  place-content: center;
}
.radio::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 30px 30px var(--blue);
}
.radio:checked::before {
  transform: scale(1);
}
.radio:hover{
  border-color:var(--orange);
}

/* Style Color Picker: */
.col_txt{
  padding: 0;
}
.full{
  display: flex;
  width: 150px;
  height: 20px;
  justify-content: space-between;
}
.full .clr-field input{
  width: 100px;
  border: none;
  height: 25px;
}
.full .clr-field input:focus{
  outline: none;
  box-shadow: none;
}
.clr-field{
  height:25px;
}
.full .clr-field button {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.clr-field button::after{
  box-shadow: none;
  border: 3px solid var(--blue);
}

.clr-field:hover button::after{
  border: 3px solid var(--orange);
}

/* Style for stitches&rows input: */
/* Hide spinners for your specific number inputs */
input.grid-input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Extra protection for WebKit browsers */
input.grid-input[type="number"]::-webkit-outer-spin-button,
input.grid-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.grid-input:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--orange);
}

.number-control {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  border: 3px solid var(--blue);
  border-radius: 4px;
  width:100px;
  margin-right:50px;
}
.number-control:hover{
  border-color:var(--orange);
}
/* Style the custom buttons */
.number-btn {
  padding: 0 5px;
}
/* Hover effect for buttons */
.number-btn:hover {
  color: var(--orange);
}
.grid_txt{
  width: 100px;
  text-align: center;
  padding:0;
}

/* Input styling (unchanged) */
.grid-input {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  font: inherit;
  color: var(--blue);
  width: 50px;
  border: none;
  text-align: center;
  font-size: 18px;
}

/* Style Sliders: */
#sliders{
  height:150px;
  width: 75%;
  display:flex;
  flex-flow:column;
  justify-content: space-between;
}
.slider{
  -webkit-appearance :none;
  -moz-appearance :none;
  border:none;
  appearance :none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  height:20px;
  --c: var(--blue);
}
.slider:hover{--c: var(--orange);}
/* chromium */
.slider::-webkit-slider-thumb{
  height: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 3px inset var(--c);
  border-image: linear-gradient(90deg,var(--c) 50%,var(--c) 0) 0 1/calc(50% - 2px) 100vw /0 calc(100vw + 4px);
  -webkit-appearance: none;
  appearance: none;
}
/* Firefox */
.slider::-moz-range-thumb {
  height: 20px;
  width: 20px;
  background: none;
  border-radius: 50%;
  box-shadow: 0 0 0 3px inset var(--c);
  border-image: linear-gradient(90deg,var(--c) 50%,var(--c) 0) 0 1/calc(50% - 2px) 100vw /0 calc(100vw + 4px);
  -moz-appearance: none;
  appearance: none;
}

/* Style Checks: */
#checks{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  height: 150px;
}
.mirror_img{
  height: 40px;
  margin-right: 8px;
  margin-top:4px;
}
.checkGroup{
  flex:45%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
.checkboxGroup{
  display: flex;
  flex-flow: row wrap;
}
.check_item{
  flex: 30%;
  font-size:14px;
  padding:0;
  text-align:center;
}
.checkbox input {
  -webkit-appearance: none;
  appearance: none;
  background-color: white;
  font: inherit;
  color: var(--blue);
  width: 20px;
  height: 20px;
  border: 3px solid var(--blue);
  border-radius: 4px;
  transform: translateY(-2px);
  transform: translateX(4px);
  display: grid;
  place-content: center;
}

.checkbox:hover input{
  border-color: var(--orange);
}

.checkbox input::before {
  content: "";
  width: 9px;
  height: 9px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 20px 20px var(--blue);
}

.checkbox input:checked::before {
  transform: scale(1);
}

/* Style for the thanks-container: */
#thanks{
  z-index:999;
  position: fixed;
  color:white;
  border-color: white;
  background-color:var(--blue);
}
#thanks .x{color:white;}
#thanks .exit{background-color: var(--blue); border-color:white;}
#thanks .exit:hover{background-color:white;border-color:var(--blue)}
#thanks .exit:hover .x{color:var(--blue);}
.link_white:hover{color:white;}

/* Style for the preview: */
.prev_con{
  width:60%;
  display: flex;
  flex-flow: column;
  transition: height 1s ease-in-out;
}
#preview{
  width: 100%;
  height: 100%;
}

/* Style for responsiveness: */
.white_bar{
  width: 100%;
  height: 50px;
  position: fixed;
  top: 50px;
  z-index:1;
  background-color: white;
  display:none;
}
.mobile_nav_txt{
  left: calc(100% - 90px);
  width: 80px;
  text-align: right;
  position: fixed;
  line-height: 16px;
  font-size:14px;
}
#scroll{display:none;}
.prev_con.prev_mobile{height: 40%;}
@media only screen
  and (max-width: 1200px) {
    .video{transform: scale(5);}
}
@media only screen
  and (max-width: 900px) {
    .generator_con{
      flex-direction: column-reverse;
    }
    .prev_con{
      position: fixed;
      top: 50px;
      width: calc(100% + 30px);
      height: 100%;
      border: 1px green solid;
      left: -30px;
      border-bottom: 3px solid var(--blue);
      z-index:3;
    }
    #settings{
      position: absolute;
      z-index: 2;
      width: calc(100% - 60px);
      background-color: white;
      padding: 30px;
      padding-bottom:150px;
      height:auto;
    }
    #settings.visible{
      top: calc(40vh - 20px);
    }
    #scroll{
      display:block;
      position: fixed;
      top: calc(100% - 70px);
      left: 50%;
      transform: translate(-50%,0%) rotate(0deg);
    }
    .categorie{margin-bottom:60px;}
    .sliders_block .categorie{margin-bottom:0;}
    .sliders_block{margin-bottom: 60px;}
    .reset_b{width:20vw;}
}

@media only screen
  and (max-width: 820px) {
    #start_buttons{
      flex-flow:column-reverse;
      height: 230px;
      top: calc(100% - 270px);
      align-items:center;
    }
    #start_b{order:1;}
}
@media only screen
  and (max-width: 600px) {
    .video{transform: scale(7);}
}
@media only screen
  and (max-width: 500px) {
    #checks{
      width: calc(100% - 30px);
      min-width: 300px;
      margin-top: 30px;
      position: absolute;
      left: 50%;
      transform: translate(-50%,0);
    }
    #b_reset_mirror{
      position: relative;
      top: 150px;
    }
    #b_save{margin-top:220px;}

    p{font-size:16px;}
    .button{font-size:16px;}
    #input_b{display:inline-block;width:70%;}
    #generate{width:70%;}
    #ask-me{width: calc(100% - 60px);}

    .nav-info{
      width: 100px;
      font-size: 16px;
    }
    #gen_txt{line-height: 100%;}

}

/* portrait: */
@media only screen
  and (orientation: portrait) {
    .faq_page_con{flex-flow:column nowrap;}
    .white_bar{display:block;}
    .faq_con{width: calc(100% - 40px); top:33vh;position: relative;}
    .video_con{
      width: 100%;
      height: 33%;
      border-bottom: 3px solid var(--blue);
      background-color:white;
    }
    .video{transform: scale(3);right:60%;}
    .collection_con{
      left:0;
      width: 100%;
    }
    .p_foto{
      position: absolute;
      top: -40px;
      width: 100%;
      height: 80vh;
      left: 0;
    }
    .p_scan{
      position:absolute;
      top: 0;
      width: 80%;
      height: 80vh;
      left: 50%;
      transform: translate(-50%,0);
    }
    .story{
      width:80%;
      left:10%;
      align-content:normal;
      top:80vh;
      position: relative;
      margin-left:0;
      min-height: auto;
    }
    .btn{top:80%;}
    #last_faq{margin-bottom:350px;}
}