/* Universal Selector to remove default browser settings */
* {
  padding: 0rem;
  margin: 0rem;
  box-sizing: border-box;
}

@font-face {
  font-family: "Mont-medium";
  src: url(./assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf);
  font-weight: 500;
}

@font-face {
  font-family: "Mont-bold";
  src: url(./assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf);
  font-weight: 700;
}

@font-face {
  font-family: "Fraunces";
  src: url(./assets/fonts/Fraunces/static/Fraunces_9pt_Soft-Black.ttf);
  font-weight: 700;
}

/* CSS Variables */
:root {
  /* Primary */
  --Dark-cyan: hsl(158, 36%, 37%);
  --Cream: hsl(30, 38%, 92%);

  /* Neutral */
  --Dark-blue: hsl(212, 21%, 14%);
  --Dark-grayish-blue: hsl(228, 12%, 48%);
  --White: hsl(0, 0%, 100%);
}

:root,
[data-bs-theme="light"] {
  --bs-primary: #f2ebe3;
  --bs-primary-rgb: 242, 235, 227;
  --bs-light: #ffffff;
  --bs-light-rgb: 255, 255, 255;
  --bs-secondary: #3c8067;
  --bs-secondary-rgb: 60, 128, 103;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #3c8067;
  --bs-btn-border-color: #3c8067;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1c232b;
  --bs-btn-hover-border-color: #1c232b;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1c232b;
  --bs-btn-active-border-color: #1c232b;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #3c8067;
  --bs-btn-disabled-border-color: #3c8067;
}

html {
  font-size: 14px;
}

body {
  font-family: "Mont-medium";
}

h1 {
  letter-spacing: 0.5rem;
}

:where(h2, h3) {
  font-family: "Fraunces";
}

.card-text {
  font-size: 1.2rem;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  img[alt~="Perfume"] {
    border-bottom-left-radius: 0px !important;
    border-top-right-radius: 1rem !important;
    border-top-left-radius: 1rem !important;
  }

  .mycard {
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
  }

  body {
    padding: 12px !important;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}

/* Desktop */
@media only screen and (min-width: 1900px) {
  .mycard {
    display: flex;
  }

  .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}