utils.css

:root{
  --brdr-clr: #EEEEEE;
  --brdr-wdth: 1px;
  --bg-clr: #656BF7;
  --hv-clr: #8287f9;
  --gray-clr: #4D647F;
}

.mt{
  margin-top: 5px;
}
.mt-10{
  margin-top: 10px;
}
.mt-15{
  margin-top: 15px;
}
.mt-20{
  margin-top: 20px;
}
.mt-25{
  margin-top: 25px;
}
.mt-50{
  margin-top: 50px;
}

.mb{
  margin-bottom: 5px;
}
.mb-10{
  margin-bottom: 10px;
}
.mb-15{
  margin-bottom: 15px;
}
.mb-20{
  margin-bottom: 20px;
}
.mb-25{
  margin-bottom: 25px;
}
.mb-50{
  margin-bottom: 50px;
}

.mr{
  margin-right: 5px;
}
.mr-10{
  margin-right: 10px;
}
.mr-15{
  margin-right: 15px;
}
.mr-20{
  margin-right: 20px;
}
.mr-25{
  margin-right: 25px;
}
.mr-50{
  margin-right: 50px;
}

.ml{
  margin-left: 5px;
}
.ml-10{
  margin-left: 10px;
}
.ml-15{
  margin-left: 15px;
}
.ml-20{
  margin-left: 20px;
}
.ml-25{
  margin-left: 25px;
}
.ml-50{
  margin-left: 50px;
}

.p{
  padding: 5px;
}
.p-10{
  padding: 10px;
}
.p-15{
  padding: 15px;
}
.p-20{
  padding: 20px;
}
.p-25{
  padding: 25px;
}
.p-50{
  padding: 50px;
}

.brdr{
  border: var(--brdr-wdth) solid var(--brdr-clr);
}

.brdr-t{
  border-top: 1px solid var(--brdr-clr);
}

.brdr-b{
  border-bottom: 1px solid var(--brdr-clr);
}

.text-center{
  text-align: center;
}

.w-25{
  width: 25%;
}
.w-30{
  width: 30%;
}
.w-35{
  width: 35%;
}
.w-40{
  width: 40%;
}
.w-45{
  width: 45%;
}
.w-50{
  width: 50%;
}
.w-75{
  width: 75%;
}

.is-link{
  background-color: var(--bg-clr) !important;
}

.button{
  border: 2px solid var(--bg-clr);
  color: var(--bg-clr);
  border-radius: 8px;
  padding-left: 30px;
  padding-right: 30px;
  transition: 0.3s;
}

.button:hover{
  border: 2px solid var(--hv-clr);
  background-color: var(--hv-clr);
  color: white;
}

.is-link:hover{
  border: 2px solid var(--hv-clr) !important;
  background-color: var(--hv-clr) !important;
  color: white;
}

.tagline{
  font-size: 24px;
  line-height: 150%;
  color: var(--gray-clr);
}

.gray{
  color: var(--gray-clr);
}