html {
  font-size: 14px;
}


:root {
    /* CSS HEX */
    --coffee: #644536ff;
    --redwood: #b2675eff;
    --lion: #c4a381ff;
    --pistachio: #bbd686ff;
    --cream: #eef1bdff;
}

/*@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}*/
p {
    font-weight: 350; /* Normal weight */
    font-size: 18px;
    line-height: 1.6; /* Adjust line height for better readability */
}

.navbar-light .navbar-toggler {
    border-color: white;
    background-color: white;
}

.navbar-light .navbar-toggler-icon {
    color: white;
    !important;
}

.navbar-brand-large {
    font-size: 2rem; /* Adjust the size as needed */
}

.nav-link-custom {
    color: white;
}

    .nav-link-custom:hover {
        font-weight: 600; /* Equivalent to font-semibold */
        color: #e2e8f0; /* Equivalent to text-gray-200 */
    }

@media (min-width: 1400px) {
    .content-container {
        max-width: 1000px; /* Adjust for larger screens */
    }
}

.container {
    max-width: 1200px; /* Adjust the max-width as needed */
    margin: 0 auto; /* Center the container */
    padding: 0 20px; /* Add padding to the sides */
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.shadow-green {
    --bs-shadow-rgb: 0, 5, 0;
    box-shadow: 0 0.5rem 1rem color(var(--pistachio), 0.15) !important;
}


/* ICONS */

.fa-brands, .fa-solid {
    font-size: 40px;
    text-align: center;
    padding: 10px;
}

.icons {
    display: flex;
    justify-content: center; /* Align items horizontally at the center */
    gap: 20px; /* Optional: Adds space between icons */
}


/* PAGE SPECIFIK BACKGROUNDS */

.special-page-background-about {
    background-color: floralwhite;
}

.special-page-background-projects {
    background-color: #000000;/*  for dark bg: #343a40;*/
    background-image: linear-gradient(#343a40, #032236); /* gray to purple */
}


body {
  margin-bottom: 60px;
}


/* FONTS */

.klee-one-regular {
    font-family: "Klee One", cursive;
    font-weight: 600;
    font-style: normal;
}