/* Social Media Button styling in navBar */
.fa {
  padding: 15px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  border-radius:50%;
}

/* Hover Effect for Social Media Buttons */
.fa:hover {
  opacity: 0.7;
}

/* Social Media button colors */
.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-linkedin-in {
  background: #007bb5;
  color: white;
}

/* Body styling */
body {
    margin-bottom: 50px;
    background-color:#f6ecdc;
    font-family: 'Asap', sans-serif;
}

/*  Column Header stylings */
h2, h3 {
    text-align: center;
}

/* Styling for Password Generator box */
.interface {text-align:center;background:#cccccc;width:90%;height:auto;border:5px solid white;border-radius:25px;position:relative;margin:auto;margin-top:10px;}
/* Styling for the Message/Password Return box */
.interface input[type="text"]{color:black;width:80%;font-weight:bold;}
/* Copy Button */
.interface span{color:white;background-color:#993333;border:1px solid white;padding:2px;}
/* Styling for the  choice labels */
.interface label{position:relative;color:black;font-size:20px;display:block;text-align:left;padding-left:15px;user-select:none;}
/* Length selection box */
.interface label input[type="number"]{position:absolute;right:20px;color:black;width:50px;font-weight:bold;}
/* All the Checkboxes */
.interface input[type="checkbox"]{height:0;width:0;}
.interface label i{position:absolute;right:20px;height:30px;width:30px;background-color:white;}
.interface label i:hover{background-color:#EEE8AA;} 
.interface label i:after{content: "\2714";position: absolute;top:-2px;right:7px;display:none;color:white;}
.interface label input:checked ~ .mark:after{display:block;}
.interface label input:checked ~ .mark{background-color:#993333;}
.interface button{outline:none;position:relative;background-color:#993333;width:80%;color:white;border:none;border-radius:25px;font-size:20px;margin:auto;}
.interface button:hover{background-color:white;color:black;}



/* Footer */
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color:#343A40;
    color: white;
    text-align: center;
    z-index: 1;
}