*{
    margin:0 auto;
}

body{
    height: 90vh;
    background: rgb(170,170,170);
background: linear-gradient(230deg, rgba(170,170,170,1) 36%, rgba(245,245,245,1) 85%);
    
}
output{
    
    padding:5px;
    margin-bottom:5px;
   
}
.container{
    margin:0 auto;
    margin-top:10vh;
    min-width: fit-content;
    text-align: center;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    padding: 20px;
    max-width: 400px;
    box-shadow: 0px 5px 35px  ;
    height: 300px;
    
}
#checkbox{
    margin-bottom:20px;
}
h3{
    font-family:Arial, Helvetica, sans-serif;
    margin-top:0;
    margin-bottom: 50px;
}
.slider{
    
    position:relative;
    justify-content:center;
}
#generateButton{
    background-color: rgb(2, 88, 146);
    
    border-radius:10px;
    padding:12px 60px;
    border:1px dotted rgb(0, 0, 0);
    
    margin:35px 10px;
    color:rgb(255, 255, 255);
}

#generateButton:hover{
    background-color:  rgb(29, 124, 187);
    color:black;
    box-shadow: 1px 1px 4px black;
    color:aliceblue
}

#generatedPassword{
    display: inline-block;
    background-color: rgb(231, 231, 231);
    border-radius: 15px;
     min-width: 200px;
     /* min-height: 30px;  */
     position: relative;
    
    min-height: 20px;
    padding:10px 15px;
    color:rgb(0, 0, 0);
}
#clipboardButton{
    position: relative;
    float:right;
    margin-right: 30px;
    padding:12px;
    border:none;
    border-radius:10px;
    color:rgb(255, 255, 255);
    background-color: rgb(43, 101, 226);
}

.hiddenMessage{
    
    position:absolute;
    top: -45px;
	right: -10px;
    background-color: rgb(102, 144, 233);
    padding: 8px 10px;
	border-radius: 20px;
	font-size: 15px;
    display:none;
}

.hiddenMessage:after {
	content: "";
	position: absolute;
	top: 25px;
	right: 25px;
	width: 10px;
	height: 10px;
	background: rgb(102, 144, 233);
	transform: rotate(45deg);
	
}



input[type="range"] {

    margin-right:20px;
   }

 
   input[type="range"]::-moz-range-track {
    background: rgb(21, 90, 146);
    height: 5px;
   }

  
   
   input[type="range"]::-moz-range-thumb {
    height: 15px;
    width: 15px;
    background: rgb(255, 255, 255);
    margin-top: -5px;
    border-radius: 380%;
    border:solid rgb(71, 166, 180);
   }