/* VARS */

:root {
  --satinlinen: #D5D7C9;
  --barley: #9F724C;
  --appleblossom: #81171B;
   --concrete: #535A58;   /*  --concrete: #798480; */
  --ebonyclay: #283345;

  --light-shades: var(--satinlinen);
  --light-accent: var(--barley);
  --brand-color:var(--appleblossom);
  --dark-accent: var(--concrete);
  --dark-shades: var(--ebonyclay);

}

/* FONTS */

@import url('https://fonts.googleapis.com/css2?family=Kreon:wght@300..700&family=Rokkitt:ital,wght@0,100..900;1,100..900&family=Yantramanav:wght@100;300;400;500;700;900&display=swap');

@font-face {
  font-family: "Rokkitt";
  src: url("./fonts/Rokkitt-VariableFont_wght.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "kreon";
  src: url("./fonts/Kreon-VariableFont_wght.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Yantramanav";
  src: url("./fonts/Yantramanav-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


.rokkitt-title {
  font-family: "Rokkitt", serif !important;
  font-weight: 700;
  font-style: normal;
}

.kreon-lead {
  font-family: "Kreon", serif !important;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.yantramanav-thin {
  font-family: "Yantramanav", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.yantramanav-light {
  font-family: "Yantramanav", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.yantramanav-regular {
  font-family: "Yantramanav", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.yantramanav-bold {
  font-family: "Yantramanav", sans-serif;
  font-weight: 700;
  font-style: normal;
}


/* ELEMENTS */

body {
  background-color: var(--light-shades)!important;
}

h1, h2 {
  font-family: "Rokkitt", serif;
  font-weight: 700;
  font-style: normal;
}
h3, h4, h5, h6 {
  font-family: "Kreon", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

p, li, a, small, label, input, textarea, select {
  font-family: "Yantramanav", sans-serif !important;
  font-weight: normal !important;
  font-style: normal;
}


/* CLASSES */

.bg-light-shades {
  background-color: var(--light-shades) !important;
}
.bg-light-accent {
  background-color: var(--light-accent) !important;
}
.bg-brand-color {
  background-color: var(--brand-color) !important;
}
.bg-dark-accent {
  background-color: var(--dark-accent) !important;
}
.bg-dark-shades {
  background-color: var(--dark-shades) !important;
}

.light-shades {
  color: var(--light-shades) !important;
}
.hover-light-shades {
  transition:color .3s ease-in-out;
}
.hover-light-shades:hover {
  color: var(--light-shades) !important;
}

.light-accent {
  color: var(--light-accent) !important;
}
.hover-light-accent {
  transition: color .3s ease-in-out !important;
}
.hover-light-accent:hover {
  color: #f44336 !important;
}

.brand-color {
  color: var(--brand-color) !important;
}
.hover-brand-color {
  transition: color .3s ease-in-out;
}
.hover-brand-color:hover {
  color: var(--brand-color) !important;
}

.dark-accent {
  color: var(--dark-accent) !important;
}
.hover-accent-color {
  transition: color .3s ease-in-out;
}
.hover-accent-color:hover {
  color: var(--dark-accent) !important;
}

.dark-shades {
  color: var(--dark-shades) !important;
}
.hover-dark-shades {
  transition: color .3s ease-in-out;
}
.hover-dark-shades:hover {
  color: var(--dark-shades) !important;
}


/* BUTTONS */

/* Primary - Stiletto */
.btn-primary {
  background-color: #9c2b2c !important;
  border-color: #9c2b2c !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #821f20 !important;
  border-color: #821f20 !important;
}

/* Info - Ebony Clay */
.btn-info {
  background-color: #283345 !important;
  border-color: #283345 !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: #1f2736 !important;
  border-color: #1f2736 !important;
}

/* Success - Dingley */
.btn-success {
  background-color: #648745 !important;
  border-color: #648745 !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #4d6d36 !important;
  border-color: #4d6d36 !important;
}

/* Warning - Christine */
.btn-warning {
  background-color: #e1770d !important;
  border-color: #e1770d !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: #bb610b !important;
  border-color: #bb610b !important;
}

/* Danger - Pomegranate */
.btn-danger {
  background-color: #f44336 !important;
  border-color: #f44336 !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #d32f2f !important;
  border-color: #d32f2f !important;
}

/* ANIMATIONS */

.hover-grow {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-grow:hover {
  transform: scale(1.03);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

/* MASONARY */






/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/