/* css styles */
<style>
body {background-color: white}


/* Default styles for h1 */
/* Use the Google Fonts URL */
@import url('https://fonts.googleapis.com/css2?family=Dawning+of+a+New+Day&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

h1 {
  color: #F9F9F9;
  font-family: 'Dawning of a New Day', cursive;
  font-size: 140px;
  text-shadow: -2px -2px 0 rgba(0, 0, 0, .3);
  padding-bottom: 25px;
}


/* Media query for smaller screens (e.g., mobile devices) */
@media (max-width: 768px) {
  h1 {
    color: #F9F9F9;
    font-family: 'Dawning of a New Day', cursive;
    font-size: 45px;
    padding-bottom: 10px;
    text-shadow: -2px -2px 0 rgba(0, 0, 0, .3);
  }
}

/* Default styles for .subtitle.lead */
.subtitle.lead {
    font-weight: bold; 
    font-family: "Patrick Hand"; font-size: 35px;
    color: "#555555";
    -webkit-text-stroke-width: 0px;
}

/* Media query for smaller screens (e.g., mobile devices) */
@media (max-width: 768px) {
    .subtitle.lead {
        font-weight: bold; 
        font-family: "Roboto", sans-serif; font-size: 20px;
        color: #444444;
        -webkit-text-stroke-width: 0px;
    }
}

#quarto-header {
    background-color: #f2f2f2;
}


.quarto-title .quarto-categories .quarto-category a {
    color: #444444; 
}

.quarto-category {
  color: #444444; /* or any color you like */
}




h2   {color: #555555; font-family: "Patrick Hand", sans-serif; font-size: 24px;}
h3   {color: #555555; font-family: "Patrick Hand", sans-serif; font-size: 22px;}
h4   {color: #555555; font-family: "Patrick Hand", sans-serif; font-size: 20px;}
quotation   {color: #444444; font-family: "Roboto", sans-serif; font-size: 300px; padding-top: 0px; padding-bottom: 0px;}

p    {color: "#222222"; font-family: "Roboto", sans-serif;}
a    {color: #3F7469; text-decoration: underline; font-family: "Roboto", sans-serif; font-weight: 500}
a:hover {
    color: #87BCB1; text-decoration: none; /* Change to a darker teal or another desired color */
}

.listing-date {color: #444444; font-family: "Roboto", sans-serif;}
.listing-author {color: #222222; font-family: "Roboto", sans-serif;}
.quarto-listing-category-title {color: #222222; font-family: "Roboto", sans-serif;}
.quarto-listing-category {color: #222222; font-family: "Roboto", sans-serif;}
.navbar-title {color: #3F7469; font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 18px;}
.navbar-logo {max-height: 20px; max-width: 40px; height: 20px;}
.subtitle {
    color: #444444; font-family: "Roboto", sans-serif; font-size: 25px; font-weight: 700; -webkit-text-stroke: 0.5px white;
}


/* Styling for the Categories panel */
.quarto-listing-category .category {
    color: #444444; /* Match the link color */
    text-decoration: none; /* No underline by default */
    font-family: "Roboto", sans-serif; /* Match the font family */
    font-weight: 500; /* Match the font weight */
    cursor: pointer; /* Keep pointer behavior */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

/* Styling for blog post links */
.no-anchor.card-title.listing-title:hover {
    color: #87BCB1; /* Change text color on hover */
}

.quarto-listing-category .category:hover {
    color: #87BCB1; /* Change to a darker color on hover */
}

/* Hover styles for navigation panel */

.navbar-nav .nav-item .nav-link:hover {
    color: #87BCB1; 
}

/* Hover style for .navbar-title */
.navbar-title:hover {
    color: #87BCB1; 
}

/* Hover style for the search icon */
.navbar #quarto-search.type-overlay .aa-Autocomplete svg.aa-SubmitIcon:hover {
    color: #87BCB1; 
}

/* Make logo in index scale for mobile devices */

.logo-svg {
    margin-top: 10px;
    max-width: 100%;
    height: auto;
}

/* Change color of the navigation bar for mobile devices */

.navbar-dark .navbar-toggler-icon {
    background-image: url('navbar_toggle_dark.png') !important;
}

.navbar-nav .nav-item .nav-link {
    color: #444444; font-family: "Roboto", sans-serif; font-size: 17px; 
}

.navbar #quarto-search.type-overlay .aa-Autocomplete svg.aa-SubmitIcon {
    width: 26px;
    height: 26px;
    color: #444444;
    opacity: 1;
}


.quarto-title .quarto-categories .quarto-category {
    padding: 0.25em 0.75em;
    font-size: .85em;
    text-transform: uppercase;
    border: solid 1px;
    border-color: #444444;
    border-radius: 0.8rem;
    opacity: 1;
}
.quarto-title .quarto-categories .quarto-category a {
    color: "#222222";
}



/* EMPHASIS CALL-OUTS */
.callout-note {
    border-left-color: #c3e9e1 !important; /* Important fordi den må override */
}
.callout-caption-container {
    background-color: #c3e9e1; 
}
.callout-icon-container {
    background-color: #c3e9e1; 
}


div.callout-note.callout.callout-style-default > div.callout-header {
    background-color: #c3e9e1; 
}

div.callout-note.callout {
    background-color: #F9F9F9;
}

.callout.callout-style-simple>div.callout-header {
    border-bottom: none;
    font-size: 1.2rem;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    color: #222222;
    opacity: 75%;
    padding-bottom: 5px;
}

.text-col {
  height: 100%;
  background-color: #c3e9e1;
  padding-left: 20px;
  padding-right: 10px;
  padding-bottom: 2px;
  padding-top: 5px;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif; 
  font-size: 16px;
}


.nedlastningsknapp {
    font-family: "Roboto";            /* Sets the font to Roboto. */
    background-color: #c3e9e1;        /* Sets the default background color. */
    border-color: #444444;            /* Matches the border color to the background. */
    color: #444444;                      /* Sets the text color to white. */
    border-radius: 8px;               /* Adds rounded corners (8px). */
    padding: 10px 20px;               /* Adds padding: 10px top/bottom, 20px left/right. */
    text-decoration: none;            /* Removes underline from links (if used). */
    display: inline-block;            /* Ensures proper block-level button behavior. */
    font-size: 16px;                  /* Sets a readable font size. */
    cursor: pointer;                  /* Changes cursor to a pointer for buttons. */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition. */
}

.nedlastningsknapp:hover {
    background-color: #e9c3ca;        /* Changes background color on hover. */
    border-color: #444444;            /* Matches border to hover background color. */
    color: #444444;                      /* Keeps text color white. */
}




</style>