@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

:root {
    /* Change the hex code to whatever color you want */
    --bs-primary: #198754;       /* Base primary color (e.g., success green) */
    --bs-primary-rgb: 25, 135, 84; /* Must match the RGB equivalents for opacities */
    /* Changes the baseline rounding from 0.375rem (6px) to 0.75rem (12px) */
    --bs-border-radius: 0.75rem;
    
    /* Automatically scales up larger components (like cards/large modifiers) */
    --bs-border-radius-lg: 1rem;     
    --bs-border-radius-xl: 1.5rem;
}

body {
    font-family: "Open Sans", Verdana, Geneva, Tahoma, sans-serif;
    --bs-primary: #198754;       /* Base primary color (e.g., success green) */
    --bs-primary-rgb: 25, 135, 84; /* Must match the RGB equivalents for opacities */
    /* Changes the baseline rounding from 0.375rem (6px) to 0.75rem (12px) */
    --bs-border-radius: 0.75rem;
    
    /* Automatically scales up larger components (like cards/large modifiers) */
    --bs-border-radius-lg: 1rem;     
    --bs-border-radius-xl: 1.5rem;
}

/* Fixes the button hover states manually since we aren't using SASS */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #146c43; /* A slightly darker shade for hover */
    --bs-btn-hover-border-color: #13653f;
    --bs-btn-active-bg: #13653f;
    --bs-btn-active-border-color: #125e3b;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Fixes outline primary buttons */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}


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

.font-mono {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 300;
  font-style: normal;
}

#particles-js {
  position: absolute;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.project-img {
  max-width: 100%;
  object-fit: cover;
}

.img-profile {
  border-radius: var(--bs-border-radius-lg);
}

#certifications a {
  text-decoration: none;
  color: inherit;
}

#hero {
  background-image: url('./assets/bg01.png');
  background-size: cover;
}