/* Default styles */
h1 {
  font-size: 36px;
}

p {
  margin-top: 12px;
  font-size: 14px;
}

button {
  cursor: pointer;
}

/* Backgrounds */
.bg-dotted {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='0.76' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

.bg-checker {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23000000' fill-opacity='0.16'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}

.bg-diagonal-lines {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fdba74' fill-opacity='0.66' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.bg-white {
  background-color: white;
}

.bg-test {
  background-color: #8d29ff;
  background-image: url("../images/purple-floral.png");
}

/* Shadows */
.shadow {
  position: relative;
  border-radius: 4px;
}

.shadow::after {
  content: "";
  position: absolute;
  z-index: -10;
  border-radius: 4px;
  background-color: #0f172a;
}

.shadow-md::after {
  top: 18px;
  right: -12px;
  bottom: -12px;
  left: 18px;
}

.shadow-textured::after {
  /* background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='0.90' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); */

  background-color: #8d29ff;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.90' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Margins & Paddings */
.mx-auto {
  margin: auto;
}

.p-lg {
  padding: 12px;
}

/* Widths & Heights */
.max-w-md {
  max-width: 960px;
}