/* Resets */
*, *:before, *:after {box-sizing: border-box;}
* {padding: 0; margin: 0;}
div {padding: 0; margin: 0;}
.url {text-decoration: underline;}


body {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  background-color: #ffffff;
}

.screen {margin: 0;}
.page {margin: 1em;}
.clear {clear:both;}

html, body {font-family: 'Noto Serif', serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 100;}

h1 {text-align: center;}
h1 {font-size: clamp(3rem, 5vw, 5rem); font-weight: 700;}
.text {font-size: clamp(1rem, 2.5vw, 1.8rem); }
#menu, #menu-main {font-size: clamp(2rem, 2.5vw, 2.8rem); font-weight: 700;}
#menu, #menu-main {text-align: center;  margin-bottom: 1.5em;}
#menu a, #menu-main a {text-decoration: undeline; color: black;}
#menu a:hover, #menu-main a:hover {color: blue;}
#menu li, #menu-main li {list-style: none;}
#menu-main li {margin-bottom: 0.9em;}


#text{width: 100%; max-width: 1000px; justify-content: center; text-align: left;  line-height: 1.6; margin: 0 auto;}

img {
  width: 100%;
  max-width: 1600px;
  height: auto;
  margin: 0;
  margin-bottom: clamp(5rem, 50vw, 10rem);
}
img:last-child {
  width: 100%;
  max-width: 1600px;
  height: auto;
  margin: 0;
}

p {
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards;
  margin-bottom: 1em;
}
p:nth-of-type(2) {
  animation-delay: 0.5s;
}        
p:nth-of-type(3) {
  animation-delay: 1s;
}        
p:nth-of-type(4) {
  animation-delay: 1.5s;
}        
p:nth-of-type(5) {
  animation-delay: 2s;
}        

#pagerTop {margin-bottom: 2.5em;}

.pager {text-align: center; width: 100%; display: flex;justify-content: center; align-items: center; margin-top: 2.5em;}
.pager a {background-color: white; text-decoration: none;}
.pager .selected {background-color: black; color: white;}
.pager a, .pager .selected {width: 4em; height: 4em;display: flex;justify-content: center; align-items: center; border-radius: 100%; float: left; margin: 0 0.25em;}
.pager a:hover {background-color: rgb(216, 216, 216); color: white}

#note {text-align: center; width: 100%; margin: 2em 0}

@keyframes fadeInUp {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

/* Begränsa bredden till max 1600px */
@media (min-width: 1600px) {
  img {
      width: 1600px;
  }
  .screen {width: 1600px;}

}

#hidden-info {display: none;}