@font-face {
   font-family: 'Dosis';
   src: url('./Dosis-VariableFont_wght.ttf') format('truetype');
}

:root {
   --c-blue: #104f9e;
   --c-grey: #f1f2f2;
   --s-max-width: 600px;
   box-sizing: border-box;
   font-family: 'Dosis', sans-serif;
}

html {
   margin: 0;
}
body {
   margin: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

header {
   background-color: #f1f2f2;
   padding: 0.5em 3em;
   position: sticky;
   top: 0;
   z-index: 99;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
header img {
   width: 48px;
}
header a:nth-child(2) {
   display: block;
   text-decoration: none;
   background-color: var(--c-blue);
   font-weight: 500;
   color: white;
   padding: 0.5em 1em;
   border-radius: 5px;
}

#scroll-button {
   position: fixed;
   bottom: 3em;
   right: 3em;
   background-color: var(--c-grey);
   padding: 1em;
   border-radius: 50%;
   z-index: 99;
   border: none;
   display: none;
}
#scroll-button:hover {
   cursor: pointer;
}

@media screen and (max-width: 600px) {
   #scroll-button {
      padding: 0.5em;
      bottom: 1.5em;
      right: 1.5em;
   }
}

.introduction {
   padding: 1em 3em;
   display: flex;
   justify-content: center;
}
.introduction .content {
   max-width: var(--s-max-width);
   min-width: 300px;
   flex: 1;
   word-wrap: normal;
}

.content h1 {
   color: var(--c-blue);
   text-align: center;
   margin-bottom: 0;
}

.content p.subtitle {
   text-align: center;
   margin-bottom: 2em;
   color: var(--c-blue);
   font-weight: 500;
   margin-top: 0.3em;
}
.content p {
   font-size: 1.2em;
   line-height: 1.7em;
}

.content .img-wrap {
   display: inline-block;
}

.content img {
   width: 100%;
}
.content .reference {
   display: flex;
   max-width: var(--s-max-width);
   align-items: center;
   gap: 2em;
   background-color: var(--c-grey);
   padding: 1em;
   border-radius: 10px;
   margin: 2.5em 0em;
}
.content .reference p {
   margin: 0;
}
.svg-reference {
   display: block;
}

.svg-reference p {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
}
.slider {
   display: flex;
   gap: 2em;
   background-color: var(--c-grey);
   padding: 1em;
   border-radius: 10px;
   margin: 2em 0em;
}
.slider input {
   display: block;
   flex: 3;
}
.slider .output {
   display: block;
   flex: 1;
   text-align: center;
   font-size: 1.8em;
   color: var(--c-blue);
}
.sum-wrapper {
   text-align: center;
   margin: 3em 0em 5em;
}
.sum-total {
   background-color: var(--c-grey);
   display: inline-block;
   padding: 1em 3em;
   text-align: center;
   font-size: 1.8em;
   color: var(--c-blue);
   border-radius: 10px;
}

#graphics-wrapper {
   padding: 2em;
}

#graphics-container {
   position: relative;
   text-align: center;
}

#descriptions {
   box-sizing: border-box;
   position: absolute;
   top: 0;
   left: 0;
   width: 100px;
   height: 100px;
   z-index: 2;
   isolation: isolate;
   padding: 0;
}
#descriptions div {
   box-sizing: border-box;
   width: 100%;
   text-align: center;
   height: 2000px;
   position: relative;
   padding: 1px; /*Somehow, making this 0 messes up the layout and I don't pretend to understand why*/
   margin: 0;
}
#descriptions div p {
   box-sizing: border-box;
   color: white;
   font-weight: bold;
   position: sticky !important;
   background-color: rgba(0, 0, 0, 0.8);
   border-radius: 5px;
   padding: 1em;
   /* width: 100%;
   margin: 0; */
   top: 5em;
   bottom: 0;
   left: 0;
   letter-spacing: 1px;
   margin: 2em;
}

#descriptions div p.hidden {
   display: none;
}

svg g {
   display: block;
   height: 10px;
   width: 10px;
}

a {
   color: var(--c-blue);
}

.credits {
   margin-top: 3em;
}

.footer {
   background-color: var(--c-blue);
   padding: 1em;
   color: white;
   text-align: center;
}
.footer a {
   color: white;
}

p {
   margin-block-start: 1.2em;
   margin-block-end: 1.2em;
}