css classes for easier everyday styles

alp.css

.shadow {
  box-shadow: 0px 0px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.shadow-md {
  box-shadow: 0px 0px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.shadow-lg {
  box-shadow: 0px 0px 16px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.shadow-xl {
  box-shadow: 0px 0px 32px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.rounded {
  border-radius: 15px;
}

.rounded-md {
  border-radius: 25px;
}

.rounded-l {
  border-radius: 35px;
}

.rounded-xl {
  border-radius: 45px;
}

.black {
  background-color: black;
}

.white {
  background-color: white;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.light-green {
  background-color: greenyellow;
}

.yellow {
  background-color: yellow;
}

.border {
  border-style: ridge;
}

.m {
  margin: 1rem;
}

.m-md {
  margin: 2rem;
}

.m-l {
  margin: 3rem;
}

.m-xl {
  margin: 4rem;
}

.m-top {
  margin-top: 1rem;
}

.m-md-top {
  margin-top: 2rem;
}

.m-lg-top {
  margin-top: 3rem;
}

.m-lx-top {
  margin-top: 4rem;
}

.m-bottom {
  margin-bottom: 1rem;
}

.m-md-bottom {
  margin-bottom: 2rem;
}

.m-lg-bottom {
  margin-bottom: 3rem;
}

.m-lx-bottom {
  margin-bottom: 4rem;
}

.m-left {
  margin-left: 1rem;
}

.m-md-left {
  margin-left: 2rem;
}

.m-lg-left {
  margin-left: 3rem;
}

.m-lx-left {
  margin-left: 4rem;
}

.m-right {
  margin-right: 1rem;
}

.m-md-right {
  margin-right: 2rem;
}

.m-lg-right {
  margin-right: 3rem;
}

.m-lx-right {
  margin-right: 4rem;
}

.p {
  padding: 1rem;
}

.p-md {
  padding: 2rem;
}

.p-l {
  padding: 3rem;
}

.p-xl {
  padding: 4rem;
}

.p-top {
  padding-top: 1rem;
}

.p-md-top {
  padding-top: 2rem;
}

.p-lg-top {
  padding-top: 3rem;
}

.p-lx-top {
  padding-top: 4rem;
}

.p-bottom {
  padding-bottom: 1rem;
}

.p-md-bottom {
  padding-bottom: 2rem;
}

.p-lg-bottom {
  padding-bottom: 3rem;
}

.p-lx-bottom {
  padding-bottom: 4rem;
}

.p-left {
  padding-left: 1rem;
}

.p-md-left {
  padding-left: 2rem;
}

.p-lg-left {
  padding-left: 3rem;
}

.p-lx-left {
  padding-left: 4rem;
}

.p-right {
  padding-right: 1rem;
}

.p-md-right {
  padding-right: 2rem;
}

.p-lg-right {
  padding-right: 3rem;
}

.p-lx-right {
  padding-right: 4rem;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.justify {
  text-align: justify;
}