/* css styles */
:root {
  --danielblue: rgb(24, 32, 43);
  --daniellink: rgb(164, 234, 255);
  --daniellink-hover: rgb(0, 195, 255);
  --quarto-sidebar-width: 280px;
  /* --quarto-scss-export-link-color: rgb(131, 226, 255);
  --quarto-scss-export-link-color-hover: rgb(131, 226, 255) !important;
  --bs-link-color-rgb : rgb(0, 195, 255) !important; */
}

a:hover {
  color: var(--daniellink-hover) !important;
}

a {
  color: var(--daniellink);
}

a:hover {
  color: var(--daniellink-hover) !important;
}


table.quarto-listing-table th a {
  color: white !important;
}

table.quarto-listing-table a:hover,
table.quarto-listing-table a:focus {
  color: var(--daniellink-hover) !important;
}

/* table.quarto-listing-table a {
  color: var(--daniellink);
} */

div.sidebar-item-container .active,
div.sidebar-item-container .show>.nav-link,
div.sidebar-item-container .sidebar-link>code {
  color: var(--daniellink);
}

.sidebar nav[role=doc-toc] ul>li>a.active,
.sidebar nav[role=doc-toc] ul>li>ul>li>a.active {
  border-left: 1px solid var(--daniellink) !important;
  color: var(--daniellink) !important;
}

.sidebar nav[role=doc-toc] ul>li>a:hover,
.sidebar nav[role=doc-toc] ul>li>ul>li>a:hover {
  color: var(--daniellink-hover) !important;
}

.quarto-title-breadcrumbs .breadcrumb li:last-of-type a {
  color: var(--daniellink) !important;
}

div.sidebar-item-container:hover,
div.sidebar-item-container:focus {
  color: var(--daniellink-hover) !important;
}

.quarto-secondary-nav nav.quarto-page-breadcrumbs a:hover {
  color: var(--daniellink-hover) !important;
}

.link {
  color: var(--daniellink) !important;
}

.link :hover {
  color: var(--daniellink-hover) !important;
}

h1,
h2 .title {
  font-size: 30px;
  text-align: center;
  color: #c0d9ff;
  padding: 10px;
  ;
}

.navbar {
  background-image: url("images/navbar.jpg");
  background-size: cover;
  background-color: transparent;
}

.navbar * {
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
  text-shadow: -2px -2px 4px rgba(0, 0, 0, 1);
}

#quarto-sidebar {
  background-color: var(--danielblue);
}

.quarto-secondary-nav {
  background-color: var(--danielblue) !important;
}

div.quarto-post .thumbnail img {

  border-radius: 10px;
}

.img-fluid {
  border-radius: 10px;
}

.table img {
  border-radius: 4px;
}

/* stick the sidebar to the left of the viewport */
@media (min-width: 992px) {

  /* target the actual Quarto sidebar element */
  #quarto-sidebar {
    position: fixed !important;
    left: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    width: var(--quarto-sidebar-width) !important;
  }

  /* #quarto-document-content {
    margin-left: 70px !important;
  } */

  body.floating .page-columns {
    display: grid;
    gap: 0;
    grid-template-columns: [screen-start] 250px [screen-start-inset] 2fr [page-start] 0 [page-start-inset] 0 [body-start-outset] minmax(0px, 50px) [body-start] 0em [body-content-start] minmax(500px, calc(1000px - 3em)) [body-content-end] 1.5em [body-end] minmax(25px, 150px) [body-end-outset] 0px [page-end-inset] 0px [page-end] 2fr [screen-end-inset] 0em [screen-end] !important;
  }

  /* .quarto-page-body .quarto-main {
    margin-left: var(--quarto-sidebar-width) !important;
  } */
}

.navbar-brand.navbar-brand-logo img {
  width: 30px;
}

.panel {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 30px;
  justify-content: space-between;
}

@media (max-width: 600px) {
  .panel {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
}

.panelsection {
  align-self: flex-start;
  text-align: left;

}

.panelphoto {
  align-self: center;
  margin: 0px auto;
  width: auto;
  height: auto;
  border-radius: 10px;
}


.bigtext {
  font-size: 1.5em;
}

/* animate the drawing of the path */
.animatesvg {
  fill: none;
  /* we only want the stroke */
  stroke: #ffffff;
  /* same colour as your original fill */
  stroke-width: 10px;
  /* pick a stroke width */
  /* pick a dash‐length ≥ your path’s length (1000 is usually safe) */
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  /* start “invisible” (fully offset) */
  animation: draw-path 7s ease-out forwards;
}

@keyframes draw-path {
  0% {
    stroke-dashoffset: 1000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hover-path {

  0%,
  100% {
    /* fully drawn, no gap */
    stroke-dashoffset: 0;
    stroke-dasharray: 1000;
  }

  50% {
    /* keep the same drawn length but open a 300px gap */
    stroke-dashoffset: 50;
    stroke-dasharray: 100;
  }
}

a:hover .animatesvg {
  stroke-width: 30px !important;
  stroke-dashoffset: 0;
  animation: hover-path 3s ease forwards;
}


/* h1, h2,
h1 a, h2 a {
  text-decoration: none !important;
  border-bottom: none !important;
} */

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
}

.sektion {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  padding: 20px;
  background-color: rgba(16, 59, 100, 0.288);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.download-button {
  display: inline-block;
  padding: 0.5em 1em;
  background: var(--daniellink);
  color: var(--danielblue);
  border-radius: 0.25em;
  text-decoration: none;
  font-weight: bold;
}