/* Colors */
:root{
  --cultured-white: #F4F0E0;
  --bone: #E8DACC;
  --off-white: #FAF9F6;
  --anti-flash-white: #EFF2F4;
  --sonic-silver: #787879;
  --granite: #5F5E62;
  --davys-gray: #585D59;
  --olive-camouflage: #4E4B44;
}

/* Padding */
.p-1{ padding: 1rem !important;}
.p-2{ padding: 1.618rem !important;}
.p-3{ padding: 2.617rem !important;}

.pt-1{ padding-top: 1rem !important;}
.pt-2{ padding-top: 1.618rem !important;}
.pt-3{ padding-top: 2.617rem !important;}


.pb-1{ padding-bottom: 1rem !important;}
.pb-2{ padding-bottom: 1.618rem !important;}
.pb-3{ padding-bottom: 2.617rem !important;}
.pb-4{ padding-bottom: 3.617rem !important;}
.pb-5{ padding-bottom: 6.617rem !important;}

.pl-1{ padding-left: 1rem !important;}
.pl-2{ padding-left: 1.618rem !important;}
.pl-3{ padding-left: 2.617rem !important;}

.pr-1{ padding-right: 1rem !important;}
.pr-2{ padding-right: 1.618rem !important;}
.pr-3{ padding-right: 2.617rem !important;}

/* Margin */
.m-1{ margin: 1rem;}
.m-2{ margin: 1.618rem;}
.m-3{ margin: 2.617rem;}

.mt-1{ margin-top: 1rem;}
.mt-2{ margin-top: 1.618rem;}
.mt-3{ margin-top: 2.617rem;}

.mb-1{ margin-bottom: 1rem;}
.mb-2{ margin-bottom: 1.618rem;}
.mb-3{ margin-bottom: 2.617rem;}

.ml-1{ margin-left: 1rem;}
.ml-2{ margin-left: 1.618rem;}
.ml-3{ margin-left: 2.617rem;}

.mr-1{ margin-right: 1rem;}
.mr-2{ margin-right: 1.618rem;}
.mr-3{ margin-right: 2.617rem;}

/* Text */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.618rem; }
.text-xl { font-size: 2.617rem; }
.font-thin { font-weight: 100; }
.font-normal { font-weight: 400; }
.font-bold { font-weight: 700; }

/* Borders */
.border { border: 4px solid var(--dark); }
.border-btm { border-bottom: 1px solid #771f21; }
.border-thick { border: 2px solid black; }
.rounded { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

/* Images */


/* Scaling Helpers */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-auto { width: auto; }
.h-auto { height: auto; }

/* Containers */
.flex { display: flex; }

/* Shadows */
.shadow-small {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

.shadow-normal {
    box-shadow: 4px 10px 15px rgba(0, 0, 0, 0.5);
}

.shadow-large {
  box-shadow: 4px 10px 15px rgba(0, 0, 0, 1.00);
}