/* 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');


/* Apply the custom font to specific elements */
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; /* Sets the link color to red */
}





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: "#222222"; text-decoration: none; font-family: "Roboto", sans-serif;}

.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;
}

/* Hover styles for navigation panel */

.bi-twitter:hover {
    color: #F9F9F9; 
}
.navbar-nav .nav-item .nav-link:hover {
    color: #7f9994; 
}

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

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

/* 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;
}

</style>