body{font-family:open sans;cursor: url('textures/cursor.png') 2 5, auto;}
	* {cursor: url('textures/cursor.png') 2 5, auto;}


#randomizer{
	display:flex;
  flex-wrap: wrap;

}

.column {flex:1;position:relative; }

.column h2{text-align:center;text-transform:uppercase; font-weight:600;font-family:montserrat; font-size:1.5vw; cursor: url(textures/hand.png) 8 3, auto;}

#shot-type {

}

#genre {

}

#random-options { 

}

textarea {
display: block;
margin: 0 auto;
border: none;
width:30vw;
border-bottom:3px solid black;
background:#ffffff;
height: auto;
min-width:500px;
resize:none;
padding: 0.5vw;
font-size:20px;
  box-sizing: border-box;
  overflow: hidden;
  text-transform:uppercase;
cursor: url(textures/write.png) 13 14, auto;
}

input[type="text"] {cursor: url(textures/write.png) 13 14, auto;}

textarea:focus, textarea:hover {
  outline: none;
  border: none;
  border-bottom:3px solid black;
}

.buttons {
display: flex;
justify-content: center;
margin-top:25px;
width: 30vw;
    margin: 25px auto 0;
}

button {
width:47%;
font-weight:400;
font-size:24px;
padding:30px 10px;
border:3px solid black;
cursor: url(textures/hand.png) 8 3, auto;

}
#chaos-input, #ar-input, #seed-input{display:none;}
button:hover {background:#241ff3; color:white;}
button:first-child{margin-right:3%;}
button:last-child{margin-left:3%;}
#result {
min-width: 500px;
text-align: center;
margin-top: 10px;
background:#ffffff;
height: auto;
width:30vw;
resize:none;
padding: 0.5vw;
font-size:20px;
  box-sizing: border-box;
  overflow: hidden;
  text-transform:lowercase;
}
 
ul, li{list-style-type:none; padding-inline-start: 0px;}

ul li{font-size:1.3vw;}

input {
  width: 2vw;
  transform: scale(1.5);
}



body > div{ display: flex;
  flex-direction: column;
  height: 100vh;}
  
  main { flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;}
  
input[type="checkbox"] {
position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 6px;
    /* border: 1px solid black; */
    border-radius: 0;
    outline: none;
    cursor: pointer;
}

input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #fff;
  border: 1px solid black;
  border-radius: 0;
  transition: background-color 0.2s ease-in-out;
}

input[type="checkbox"]:checked::before {
  background-color: #241ff3;
}


input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  border: 1px solid #000000;
  outline: none;
  margin-right: 10px;
}

input[type=radio]:checked {
  border-color: #241ff3;
  background-color: #241ff3;
}
ul{position:absolute;height:0;overflow:hidden;  transition: height 0.12s linear; background:white;
}
ul.open{height:auto;z-index: 500;}
#loader{position:fixed; top:0;left:0; width:100%; height:100%;z-index:22;background:white;} 

#params{margin-left:50px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: montserrat;
    font-size: 1.5vw;}
	
	#params > div{margin:5px 0}
	#params select{min-width:3vw;height:2vw;font-size:1.5vw;text-align:center;border:2px solid black;border-radius:0;  box-sizing: border-box;vertical-align: middle;
	margin-left: 15px;  vertical-align: middle;  line-height: 2vw; 
  
  line-height: 1;
  appearance: none; 
  -moz-appearance: none;
  -webkit-appearance: none;


}
	.chaos, .quality, .ar, .stylize, .weird, .seed{ display: flex;  align-items: center;  flex-direction: row;
}
	
	.ar input, .stylize input, .weird input{    min-width: 8vw;
    height: 2vw;
    font-size: 1.5vw;
    text-align: center;
    border: 2px solid black;
    border-radius: 0;
    box-sizing: border-box;
    /* vertical-align: middle; */
    margin-left: 15px;
    /* vertical-align: middle; */
    line-height: 2vw;
    line-height: 1;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;transform:none;}
	
	#chaos-input{width:5vw;height:2vw;transform:none; font-size: 1.5vw;padding:0 10px;border-radius:0;margin-left:10px;border:2px solid black;padding: 0 10px;  box-sizing: border-box;vertical-align: middle; text-align:center;

}
	
	input:focus,select:focus {
  outline: none;
}

#old{position:fixed;height:50px; display:flex; bottom:3vh;width:100%;justify-content: center;
  align-items: center;  flex-direction: row;
}
  
  #old a{color:#000000;text-transform:uppercase; font-weight:600;cursor: url(textures/hand.png) 8 3, auto;margin-right:25px;}
  #howto a{cursor: url(textures/hand.png) 8 3, auto;}
  
  @media only screen and (max-width:555px){
	  
	  body{overflow:hidden;}
	  button.last-button{width:100%;height:100%;position:fixed;top:0;left:0;z-index:2000;background:#241ff3; color:white;margin:0!important;}
	  button.last-button:hover{background:white; color:#241ff3;}
  }
  
  
  
  .mobilebody #randomizer{  flex-direction: column; margin-top:20px}
  
  .mobilebody .column h2{font-size:8vw;margin: 13px;}
  .mobilebody ul{position:relative;display:block;margin:0;padding: 0px 0 20px;}
  .mobilebody ul li{font-size:8vw;text-align:center}
  
  
     .mobilebody input[type=radio]{

    width: 2vw;
    height: 2vw;

    outline: none;
    margin-right: 10px;
    top: -1.3vw;
	 position: relative;}
	 
	 .mobilebody input[type="checkbox"] {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: 3vw;
    height: 3vw;
    /* border: 1px solid black; */
    border-radius: 0;
    outline: none;
    cursor: pointer;
	top: -0.5vw;
}

 .mobilebody main{flex-direction: column;margin-top:45px;}
 
 .mobilebody textarea{width: 80vw;font-size:7vw;}
 
 .mobilebody .buttons{width:80vw;}
  .mobilebody button{font-size:6.4vw;color:black;background:white;}
  .mobilebody #result{width:80vw;font-size:6vw;margin-top: 55px;}
  .mobilebody #params{margin: 60px 0 30px!important;    font-size: 5.7vw;    text-align: center;}
  
  .mobilebody #params input[type="checkbox"]{top:0;}
  
   .mobilebody #params .ar input, .mobilebody #params .stylize input, .mobilebody #params .weird input{height:9vw;font-size:5vw; min-width: 16vw;}
   .mobilebody #params select {height:9vw;font-size:5vw; min-width: 16vw;color:black;}
   .mobilebody #params  #chaos-input{height:9vw;font-size:5vw; min-width: 16vw;}
   
   .mobilebody  #old{position:relative; display:flex; bottom:0vh;width:100%;justify-content: center;
  align-items: center;  flex-direction: column; height:auto;padding:6vw 0 12vw;
}

 body.mobilebody > div{height:auto;font-size:5vw;padding-top:30px}
 
.mobilebody .chaos,.mobilebody .quality,.mobilebody .ar, .mobilebody .stylize, .mobilebody .weird{  justify-content: center;}
.mobilebody #params > div {
    margin: 22px 0;
}

.mobilebody #old a{font-size:5.5vw;margin:6px 0}

.mobilebody button:last-child{color:gray;border-color:gray;}

#reset {position:fixed;width:100vw;height:100vh;top:0;left:0;background:white;display:none;}
#reset-flex{width:100%;height:100%;display:flex; justify-content: center;  align-items: center;
}

#reset span{font-size:3vw;margin:0 1vw;}

#reset span:last-child,#reset span:first-child	{cursor: url(textures/hand.png) 8 3, auto;}
#reset span:last-child:hover,#reset span:first-child:hover {color:#241ff3}

#howto h1{text-align:center;}

#howto main {flex-direction:column;    align-items: unset;}

#howto{width:50%;justify-content:center; margin: 0 auto;flex-direction: unset;min-height:100vh;height:auto;min-width:600px; padding-bottom:10%;}

#howto p{text-align:left;}

.mobilebody #howto {flex-direction: column;}

#seed-input {
    width: 18vw;
    height: 2vw;
    transform: none;
    font-size: 1.5vw;
    padding: 0 10px;
    border-radius: 0;
    margin-left: 10px;
    border: 2px solid black;
    padding: 0 10px;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
}

#links a {   
    position: relative;
    cursor: url(textures/hand.png) 8 3, auto;
    padding: 20px 25px;
    font-size: 20px;
    border: 2px solid white;
    border-radius: 8vw;
    transition: all 0.5s;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center;
    background: rgba(255,255,255,0.06);
	}
	
	main#links{flex:none;}
	
	#links-body{
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;}

#links a:hover{box-shadow:-3px 3px 5px rgba(0,0,0,0.2)}


@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#links-body #old a{color:white;}

#links-body #howto{    min-height: 95vh;
  
    padding-bottom: 0%;} 
	
	.mobilebody#links-body #old {
    position: relative;
    display: flex;
    bottom: 0vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: auto;
    padding: 6vw 0 2vw;
}

#links-body.mobilebody #old a {
    font-size: 4.5vw!important; 
    margin: 12px 0;
}

#links-body.mobilebody #links a{font-size:5vw;}