style.css

/*************************************************************************** 

BDHO Converter
Number system converter
design by Amit barman on 14/06/2022

follow me on github - https://github.com/AmitBarman99/

/*************************************************************************** */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
*, *:after, *:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: "DM Sans", sans-serif;
  line-height: 1.5;
  background-color: #f1f3fb;
  background-color: #999999;
  padding: 0 2rem;
}


input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
}

.card {
  margin: 2rem auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  max-width: 425px;
  background-color: #FFF;
  border-radius: 10px;
  -webkit-box-shadow: 0 10px 20px 0 rgba(153, 153, 153, 0.25);
          box-shadow: 0 10px 20px 0 rgba(153, 153, 153, 0.25);
  padding: .75rem;
}

.card-image {
  border-radius: 8px;
  overflow: hidden;
  padding-bottom: 65%;
  background-image: url("https://digitalsynopsis.com/wp-content/uploads/2017/07/beautiful-color-ui-gradients-backgrounds-purple-white.png");
  background-repeat: no-repeat;
  background-size: 150%;
  background-position: 0 5%;
  position: relative;
}

.gif{
  width: 46%;
  margin: auto;
  margin-right: -40px;
}
.gif img {
  max-width: 100%;
  display: block;
}


.card-heading {
  position: absolute;
  left: 10%;
  top: 6%;
  right: 10%;
  font-size: 1.75rem;
  font-weight: 700;
  color: #735400;
  line-height: 1.222;
}

.card-heading small {
  display: block;
  font-size: .75em;
  font-weight: 400;
  margin-top: .25em;
}

.card-form {
  padding: 2rem 1rem 0;
}

.iType,.oType{
    background-color:rgb(92 133 56);
    width: 100%;
    font-size: 20px;
    text-align: center;
    border: none;
    border-radius: 6px;
    padding: 10px 1px;

}
.card-form select,.card-form input{
    outline: none;
}
.iType:hover,.oType:hover{
    background-color: rgb(233, 122, 215);
}

.iNum,.oNum{
    margin-top: 22px;
    width: 100%;
    border-radius: 4px;
    padding: 7px;
}

.action {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.action-button {
  font: inherit;
  font-size: 1.25rem;
  padding: 0.6em;
  width: 100%;
  font-weight: 500;
  background-color: #6658d3;
  border-radius: 6px;
  color: #FFF;
  border: 0;
  cursor: pointer;
}

.action-button:focus {
  outline: 0;
}

.card-info {
  padding: 1rem 1rem 0rem 1rem;
  text-align: center;
  font-size: .875rem;
  color: #8597a3;
}

.card-info a {
  display: block;
  color: #6658d3;
  text-decoration: none;
}