@charset "UTF-8";



/* @FONT FACE (enable the use of 'custom fonts' inside your document) */

/* 
  You can use 'fontsquirrel' (https://www.fontsquirrel.com) 
  or 'transfonter' (https://transfonter.org)
  to generate your own font for the web from .ttf or .oft files 
*/

/* @font-face {
  font-family: 'Apoc';
  src: url('../fonts/Apoc/Apoc-Normal-Trial-Regular.woff2') format('woff2'),
      url('../fonts/Apoc/Apoc-Normal-Trial-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
} */

@font-face {
  font-family: 'Apoc';
  src: url('../fonts/Apoc/ApocNormal-Regular.woff2') format('woff2'),
      url('../fonts/Apoc/ApocNormal-Regular.woff2') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Apoc';
  src: url('../fonts/Apoc/ApocNormal-RegularItalic.woff2') format('woff2'),
      url('../fonts/Apoc/ApocNormal-RegularItalic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* VARIABLES */

:root {
  /* Color values */
  --color-background: rgb(32, 31, 31);
  --color-text: rgba(20, 20, 20, 0.812);
  --color-text-link: rgba(0, 82, 71, 0.8);
  --color-text-link-hover: rgba(2, 166, 152, 0.142);
  /* Font values */
  --font-text: 'Apoc', sans-serif;
  --font-size: clamp(19px, 3vw, 55px);
  /* Margin value */
  --margin: 1rem;
}

/* GENERAL STYLES */

html, body {
  overflow-x: clip;
}

html {
  /* font: var(--font-size) var(--font-family); */
  font-family: var(--font-text);
  font-family: Apoc;
  font-size: clamp(16px, 1.5vw, 30px);
  color: var(--color-text);
  background-color: var(--color-background);
  scroll-behavior: smooth;
}

body {
  position:relative;
  background-color: var(--color-background);
  background: 
    url("https://kabk.github.io/go-theses-25-marie-af-rosenborg/assets/images/green-dust-and-scratches.png"),
    /* url("https://kabk.github.io/go-theses-25-marie-af-rosenborg/assets/images/vintage-rusty-scratched-wall.png"), Grain Texture */
    linear-gradient(180deg, #B87333 0%, #04a99b 51%, #00f0b8 85%); /* Gradient */
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  width: calc( 100% - 20px );
  height:auto;
  overflow-y:auto;
  padding: 10px;
}

a {
  color: var(--color-text-link);
  text-decoration: underline;
}

a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

div:has( > .back) {
  pointer-events: none;
  z-index: -1;
}

.img {
  /* width:50%;
  height:50%; */
  width:100%;
  display: block;
  position:relative;
  margin: auto;
  border: groove;
  border-width: 2px 4px;
  border-radius: 40px;
}

.figcaption {
  width:90%;
  font-size: 11.5px;
  display: block;
  position:relative;
  margin: auto;
  text-align: center;
  text-indent: 0px;
    padding: 10px; /* Optional: add padding for better readability */
    /* background-color: rgba(0, 0, 0, 0.7);  */
    opacity: 60%;
    color: rgb(253, 253, 253); /* Optional: ensure text is visible */
}


/* .vertical {
  width: unset;
  height: 40vh;
} */

/* .img-left {
 width:50%;
  height:50%;
  display: block;
  position:relative;
  margin-right: auto;
  border: groove;
  border-width: 2px 4px;
  border-radius: 40px;
} */

/* figcaption {
  margin: 0;
  box-sizing: border-box; 
} */

.parent{
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 50%, transparent 100%);
  top:0px;
  left: 0px;
  display: block;
  z-index: 0;
  position:absolute;
}

.child{
  background-image: "børsen1.jpg";
  opacity: 70%;
  margin:auto;
  position: relative;
} 

 h1{
  font-size: 5rem;
  margin:50;
  padding:30;
  padding-top: 35vw;;
  padding-left: 5vw;
  z-index: 12;
  color: #ddd;
  position: relative;
}

h2{
  padding-inline: 20vw;
  padding-top: 5vw;
  font-style: italic;
}

h3 {
 padding-inline: 20vw;
  padding-top: 10vw;
  font-style: italic;
}

h4 {
  padding-inline: 20vw;
  padding-top: 10vw;
  font-style: italic;
}

h5 {
  padding-inline: 20vw;
  padding-top: 15vw;
  font-style: italic;
  font-size: 15px;
}



/*h6{

}
*/

/* h8{
  padding-inline: 175px;
  padding-top: 15px;
} */

p {
  /* paragraph style */
  width: min(50ch, 100%);
  margin-inline: auto;
  line-height: 1.45;
  text-indent: 60px;
  z-index: 1;
}

.biblio {
  width: min(90ch, 100%);
  overflow: hidden; 
  margin-inline: auto;
  line-height: 1.45;
  text-indent: 0px;
  font-size: 70%;
  z-index: 1;
}


/* */

.answer {
  width: min(50ch, 100%);
  margin-inline: auto;
  line-height: 1.45;
  text-indent: 40px;
}

.question {
  /* width: min(50ch, 100%);
  margin-inline: auto;
  line-height: 1.45; */
  text-indent: 0px;
}

.foot {
  font-size: 11px;
  text-indent: 0px;
  position: absolute;
  left:25px;
  padding-left: 5px;
  padding-bottom: 15px;
}

/* PAGE STYLES */

/* page structure */

div.page-wrapper {
  /* the element that 'wraps' everything */
  padding: var(--margin);
  z-index:20;
}


/* UTILITY CLASSES */

/* hide desktop mobile etc */

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

/* WEBSITE MEDIA QUERIES */

/* responsive typeface for various breaking points, sets the default 'rem' value */
/*
@media (max-width: 299px) { :root{--font-size: 18px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 299px) and (max-width: 340px) { :root{--font-size: 10px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 340px) and (max-width: 440px) { :root{--font-size: 10px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 441px) and (max-width: 779px) { :root{--font-size: 10px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 780px) and (max-width: 992px) { :root{--font-size: 10px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 993px) and (max-width: 1200px) { :root{--font-size: 10px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 1201px) and (max-width: 1320px) { :root{--font-size: 10px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 1321px) { :root{--font-size: 20px;} html, body {font: var(--font-size) var(--font-text); } }
*/
/* styles for 'mobile', screen sizes up to 779px, should covers 'mobile' and 'tablet' */
/* style this one first and then use the subsequent ones in a cascading way (from general to specific) */

@media (max-width: 779px) {

  /* your 'mobile' overriding css properties here */



  /* utility classes, mobile */

  .desktop-only{
    display:none;
  }

  .mobile-only{
    display:block;
  }

}



/* use this query to apply style changes to smaller smartphones sizes (like an iPhone 5S or SE 2016), max size of 339px */

@media (max-width: 339px) {

  /* your overriding css properties here */

}



/* use this query to apply style changes for 'mobile' screen sizes that are flipped in 'landscape' mode */

@media (max-width: 779px) and (orientation: landscape) {

   /* your overriding css properties here */

}



/* use this query to apply style for 'small' desktop screens */

@media (min-width: 780px) and (max-width: 992px) {

  /* your overriding css properties here */

}

/* this under is the function navbar */

.navbar { 
  overflow: hidden; 
  opacity: 80%;
  position: fixed;  
  display: flex;
  justify-content: space-between;
  top: 0;  
  width: calc( 100% - 20px );  
  z-index: 1000;
  text-indent: 0px;
}  

.navbar a { 
  float: left; /* Align links to the left */ 
  display: block; 
  color: white; /* Text color */ 
  text-align: center; /* Center the text */ 
  padding: 14px 16px; /* Padding */ 
  text-decoration: none; /* Remove underline */ 
  text-indent: 0px;
} 

.navbar a:hover { 
  background-color: #ddd; /* Change background on hover */ 
  color: black; /* Change text color on hover */ 
  text-indent: 0px;

} 

.content { 
  padding: 20px; /* Add some padding to the content */ 
} 

/* fire animation */

.fire {
  animation: burn 1.5s linear infinite alternate;
}

@keyframes burn {
  from { text-shadow: -.1em 0 .3em #fefcc9, .1em -.1em .3em #feec85, -.2em -.2em .4em #ffae34, .2em -.3em .3em #ec760c, -.2em -.4em .4em #cd4606, .1em -.5em .7em #973716, .1em -.7em .7em #451b0e; }
  45%  { text-shadow: .1em -.2em .5em #fefcc9, .15em 0 .4em #feec85, -.1em -.25em .5em #ffae34, .15em -.45em .5em #ec760c, -.1em -.5em .6em #cd4606, 0 -.8em .6em #973716, .2em -1em .8em #451b0e; }
  70%  { text-shadow: -.1em 0 .3em #fefcc9, .1em -.1em .3em #feec85, -.2em -.2em .6em #ffae34, .2em -.3em .4em #ec760c, -.2em -.4em .7em #cd4606, .1em -.5em .7em #973716, .1em -.7em .9em #451b0e; }
  to   { text-shadow: -.1em -.2em .6em #fefcc9, -.15em 0 .6em #feec85, .1em -.25em .6em #ffae34, -.15em -.45em .5em #ec760c, .1em -.5em .6em #cd4606, 0 -.8em .6em #973716, -.2em -1em .8em #451b0e; }
}

body {
  /* margin-left: auto;
  margin-right: auto; */
  /* padding-left: 12.5%;
  max-width: 1400px; */
  counter-reset: sidenote-counter;
}

blockquote p {
  width: 55%;
  margin-right: 40px;
}

blockquote footer {
  width: 55%;
  font-size: smaller;
  text-align: right;
}

section>p,
section>footer,
section>table {
  width: 55%;
}

figure {
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  max-width: 55%;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  margin: 0 0 3em 0;
}

figure.fullwidth figcaption {
  margin-right: 24%;
}

/* Sidenotes, margin notes, figures, captions */
img {
  max-width: 100%;
}

.sidenote,
.marginnote {
  float: right;
  clear: right;
  margin-right: -35%;
  width: 30%;
  margin-top: 0.3rem;
  margin-bottom: 0;
  /* font-size: 1.1rem; */
  font-size: 12px;
  /* line-height: 1.3; */
  vertical-align: baseline;
  position: relative;
 text-indent: 0;
}

.sidenote,
.marginnote {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  hyphens: auto;
}

.sidenote-number {
  counter-increment: sidenote-counter;
  text-indent: 0;

}

.sidenote-number:after,
.sidenote:before {
  position: relative;
  vertical-align: baseline;
}

.sidenote-number:after {
  content: counter(sidenote-counter);
  font-size: var(--font-size);
  font-feature-settings: "sups" 1;
  top: -0.5rem;
  left: 0.1rem;
}

.sidenote-number:after {
  font-size: .8rem;
  top: -.2rem;
  left: -.05rem !important;
}

.sidenote:before {
  content: counter(sidenote-counter) " ";
  /* font-size: .8rem; */
  top: -0.2rem;
}

blockquote .sidenote,
blockquote .marginnote {
  margin-right: -82%;
  min-width: 59%;
  text-align: left;
}

div.fullwidth,
table.fullwidth {
  width: 100%;
}

div.table-wrapper {
  overflow-x: auto;
  font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif;
}

.fullwidth {
  max-width: 90%;
  clear: both;
}

input.margin-toggle {
  display: none;
}

label.sidenote-number {
  display: inline-block;
  max-height: 2rem;
  /* should be less than or equal to paragraph line-height */
}

label.margin-toggle:not(.sidenote-number) {
  display: none;
}

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* phone version */
@media (max-width: 760px) {
  html {
/* overflow-y: visible; */
}
  body {
    width: 84%;
    padding-left: 8%;
    padding-right: 8%;
    overflow-y: visible;
  }

  .navbar {
    left: 0;
    /* margin-left: -10px; */
    display: flex; 
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    font-size: large;
    }

    .navbar > em {
      flex-basis: 30%;
    }
    .navbar > a {
      float:unset;
      width: 100%;
    }

    .foot {
      position: static;
    } 


      nav {
        overflow: hidden; 
        opacity: 80%;
        position: fixed;  
        display: flex;
        justify-content: space-between;
        top: 0;  
        width: 80%; 
        z-index: 1000; 
      } 
    
      .navbar a {
        font-size: 100%;
        display: block; 
        color: white; 
        text-align: center; 
        /* padding: 5px -1px; */
        text-decoration: none;
      } 
      
      .navbar a:hover { 
        background-color: transparent; 
        color: black; 
      }  

      .content { 
        padding: 20px; /* Add some padding to the content */ 
      } 

      .navbar em {
        cursor: pointer;
        padding: 10px;
        font-style: normal;
        transition: all 0.3s ease-in-out;
    }
    
    .navbar a {
        text-decoration: none;
        color: white;
    }
    
    /* .navbar em:hover {
        background-color: rgba(255, 255, 255, 0.2);
    } */
    
    /* Hide all chapters except the first one */
    .navbar em:not(:first-child) {
        display: none;
    }
    
    /* Show chapters when expanded */
    .navbar.expanded em {
        display: block;
    }


  h1 {
    font-size: 300%;
    margin:auto;
  }   
  
  h2 {
    text-indent: 0px;
  }  

  h3 {
    text-indent: 0px;
  } 
  
  h4 {
    text-indent: 0px;
  } 
  
  h5 {
    text-indent: 0px;
  }  

  hr,
  section>p,
  section>footer,
  section>table {
    width: 100%;
  }

  pre>code {
    width: 97%;
  }

  section>dl,
  section>ol,
  section>ul {
    width: 90%;
  }

  figure {
    max-width: 90%;
  }

  figcaption,
  figure.fullwidth figcaption {
    margin-right: 0%;
    max-width: none;
  }

  blockquote {
    margin-left: 1.5em;
    margin-right: 0em;
  }

  blockquote p,
  blockquote footer {
    width: 90%;
  }

  label.margin-toggle:not(.sidenote-number) {
    display: inline;
  }

  .sidenote,
  .marginnote {
    display: none;
  }

  .margin-toggle:checked+.sidenote,
  .margin-toggle:checked+.marginnote {
    display: block;
    float: left;
    left: 1rem;
    clear: both;
    width: 95%;
    margin: 1rem 2.5%;
    vertical-align: baseline;
    position: relative;
  }

  .sidenote-number:after {
    text-decoration: underline;
    text-underline-offset: .1rem;
  }

  label {
    cursor: pointer;
  }

  div.table-wrapper,
  table {
    width: 85%;
  }

  img {
    width: 100%;
  }

  p {
    text-indent: 10vw;
  }

  @media (max-width: 779px) {
  }
 
}

.subtitle {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  text-indent: 0;
}

h2 + p {
  text-indent: 0;
}

.none {
  text-indent: 0;
}