user.css

body {
  font-family: 'Lato', sans-serif;
  color: gray;
  
}
.navbarcustom {
  background-color: #4B87FF;
}



/* Landing page */


.backgroundImg {
  background:linear-gradient(145deg, #4B87FF,#4B87FF 60%, white 60%, white);
}
.main-content {
  padding-top: 150px ;
  padding-left: 120px;
  position: relative;
  left: 2px;
  width: 55%;
}
.head-1{ color: white;
width:75%;
text-decoration: underline;
text-align: left;}
.subhead-1{ color: white;
width:80%;
text-align: left;
  margin-top: 35px}
.list2 {text-align: left;
  margin-top: 25px;
width: 70%;}
.head-2 {color: #7A7A7A;
  text-decoration: underline;
  text-align: left;
}
.main-content2{
  padding-top: 50px ;
  padding-right: 30px;
  color: #7A7A7A;
  text-align: left;
  position: relative;
  left: 900px;
  width: 35%;
}



.btn-createnow {
  border-radius: 400px;
  width: 170px;
  text-align: center;
  position: relative;
  bottom: 260px;
left: 120px;
height: 40px;
text-decoration-color: none;
text-shadow: none;
text-decoration: none;
border-width: 2px;
font-size: 20px;
font-family: lato;
border-style: solid;
border-color: white;
  background: #4B87FF;
  color: white;
}

.btn-createnow:hover {background-color: white;
  border:none;
  color: #4B87FF;
  transition-duration: 0.4s;}


.btn-verifynow { border-color: white;
  background: #4B87FF;
  color: white;
  font-size: 20px;
  font-family: lato;

  border-width: 2px;
  border-style: solid;
  border-radius: 40px;
  width: 170px;
  text-decoration: none;
  text-shadow:0;
  text-align: center;
  position: relative;
  bottom: 210px;
 right: 53px;
 height: 40px;

}

.btn-verifynow:hover {background-color: white;
  border:none;
  color: #4B87FF;
  transition-duration: 0.4s;
}

/* Verify page style */

#btn-blue-invert {
  color: #4B87FF;
  border: 2px solid #4B87FF;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  padding: 4px 15px;
  margin: 4px 4px;
  cursor: pointer;
}

#btn-blue-invert:hover {
  background-color: #4B87FF;
  color: white;
  text-decoration: none;
  transition-duration: 0.4s;
}

.verify-form-input {
  width: 300px;
  height: 50px;
  margin-bottom: 25px;
  margin-top: 60px;
  transition: width .2s ease-in-out;

}
.verify-form-input:focus{
  max-width: 450px;
  width: 450px;
  outline-width: 0;
}


.verifycontainer {
  margin-top: 50px;
}

.verifyheading {
  text-decoration: underline;
}

.text-data {
  margin: 25px 0px;
}


/* Verified certificate page style */

.verified_certificate {
  max-width: 700px;
  margin: 50px 10px;
}

.verified_icon {
  font-size: 38px;
  margin-left: 5px;
  color: #53b51f;
}

.verified-text-data {
  margin: 15px 0px;
}

.verifiedUserData {
  margin-top: 50px;

  text-align: left;
  float: left;
}
/* Not verified certificate page */

.not_verified_icon {
  font-size: 38px;
  margin-left: 5px;
  color: red;
}

.notfound {
  max-width: 200px;
  margin: 20px 0px;
}

  
/*
EDIT certificate page style
Split the screen in half */
.split {
  height: 100%;
  position: fixed;
  z-index: 1;
  overflow-x: hidden;
  padding: 30px 0px;
}

.create_edit_loading {
  background-color: rgba(0,0,0,0.7);
  height: 100%;
  display: none;
  left: 0px;
  margin: 0px;
  padding: 0px;
  position: fixed;
  text-align: center;
  top: 0px;
  width: 100%;
  z-index: 1000;

}
.create_edit_loading i {
  border-color: gray;
  border-top-color: white;
  font-size: 100px;
  margin-top: 200px;
}
.create_edit_loading p {
  color: white;
  margin-top: 20px;
}

/* Control the left side */
.left {
  left: 0;
  width: 65%;
  
  overflow: auto;
}

/* Control the right side */
.right {
  right: 0;
  width: 35%;
  padding-bottom: 100px;
  overflow: auto;
}

.edit_certificate_div{
  margin: 0px 50px;
}

.value_add_icon {
  vertical-align: middle;
  font-size: 18x;
  margin-left: 4px;
  color: #4B87FF;
}

.value_check_icon {
  vertical-align: middle;
  font-size: 18x;
  margin-left: 4px;
  color: #53b51f;
}

.btn-add-value {
  border: 1px solid gray;
  margin: 10px 5px;
}

.values_container {
  margin: 10px 0px;
}

.font_container {
  margin: 30px 0px;
}

.edit-font-name-input {
  max-width: 300px;
  display: inline-block;
}

.edit-font-size-input {
  max-width: 100px;
  display: inline-block;
}


.btn:focus {
  outline: none;
}

#fontColor {
  max-width: 100px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
}

#certifyVerification {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: #eee;
  vertical-align: middle;
  margin: 0px 20px;
  
}

/* Footer */

#foot{
  color: white;
  background: linear-gradient(to left, #232020 6%, #5f6769 84%);


}

#Feedback{

  margin-left: 30%;
  font-size: x-large;



}


#Heading{

  text-align: center;
  margin-bottom: 3%;
  



}

#GSI{

   margin-left: 10%;

}

#rephead{
  font-size: x-large;

  margin-left: 40%;
}

#repstat{

  margin-left: 10%;

}

/* Buttons */


#SUF{

  left: 50%;

margin-top: 10%;
margin-left: 20%;
margin-right: 20%;

}


#REPO{
  left: 50%;

  margin: 10% 20%;



}


.myButton {
background-color:transparent;
border-radius:30px;
border:2px solid #f5f5f5;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:15px 23px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:transparent;
}
.myButton:active {
position:relative;
top:1px;
}