@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');
/* Main styles */
/* TODO: CHECK IF TRANSPARENT IS REPLACED WITH rgba(255,255,255,0)*/
@keyframes heart {
    0% {margin:0; opacity:0;}
    40% {opacity:1;}
    50% {margin-top:-30px; margin-right:-10px;}
    100% {opacity:0; margin:0;}
}
html {
    scroll-behavior: smooth;
}
body{
    margin:0;
    background-color: #fcfcfc;
    font-family: "Quicksand";
    overflow-x: hidden;
}

.background {
    position:fixed;
    z-index:-1;
    background-color: #fcfcfc;
    width:100vw;
    height:100vh;
    background-image:  linear-gradient(#f1f1f1 1.6px, rgba(255, 255, 255, 0) 1.6px), linear-gradient(90deg, #f1f1f1 1.6px, rgba(255, 255, 255, 0) 1.6px), linear-gradient(#f1f1f1 0.8px, rgba(255, 255, 255, 0) 0.8px), linear-gradient(90deg, #f1f1f1 0.8px, #fcfcfc 0.8px);
    background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
    background-position: -1.6px -1.6px, -1.6px -1.6px, -0.8px -0.8px, -0.8px -0.8px;
    background-attachment:fixed;
}

section {
    margin-top:160px;
}
section:first-child {
    margin-top:0px;
}
.row .columns{
    padding: 20px;
    background:white;
    box-shadow: 5px 5px 0 black;
    margin-top:52px;
    z-index:-2;
}

.row.nobg{
    background:none;
    box-shadow:none;
}
.row.repeat {
    margin-top:0;
    padding-top:0;
    padding-bottom:0;
}
.comparison h2 {
    background:rgb(45, 114, 243);
    color:white;
    letter-spacing:.5px;
    padding:5px;
    text-align:center;
    box-shadow: 3px 3px 0 black;
}

.comparison li {
    background:white;
    color:black;
    box-shadow: 3px 3px 0 black;
    text-align: center;
    list-style:none;
    font-size:16px;
    padding:3px;
    text-align:left;
    padding-left:10px;

    user-select:none;
}
.row.lightbg{
    background: rgba(0,0,0,0.03);
    margin:0 20px 10px 20px;
    border-radius:10px;
    padding:5px;
    display:flex;
}

.woordenboek {
    background: rgba(0, 0, 0, 0.04);
    padding:25px;
    margin:15px;
}

.woordenboek > li {
    list-style-type:none;
}

/* Woorden labels*/
.woordenboek i { 
    font-weight:bold;
    display:block;
    font-size:20px;
    letter-spacing:0.5px;
    font-family: "Times New Roman", serif;
}

.woordenboek i.straight {
    font-style:normal;
}
.info {
    background: rgba(255, 208, 54, 0.214);
    border-radius:10px;
    padding:20px;
    margin:20px;
}
/* -- end main styles */
/* Legenda aan linkerkant:*/
.legend{
    width: 280px;
    font-family: 'Staatliches', 'Arial';
    position: fixed;
    top:36px;
}

.legend button{
    background:white;
    font-family: 'Staatliches', 'Arial';
    font-size:20px;
    letter-spacing:normal;
    font-weight:normal;
    line-height:34px;
}

.legend h1,.credit h1 {
    font-size: 64px;
    line-height: 56px;
    margin:0 0 0 40px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.legend ul{
    list-style-type:upper-roman;
    list-style-position:inside;
    font-size:24px;
    margin:-10px 0 0 33px;
    padding:0;
}

.legend ul button:first-child{
    margin-top:0px;
}
.legend ul button{
    margin-bottom:5px;
    padding-left:8px;
    padding-right:12px;
}

.legend p {
    font-family: Kalam;
    margin: 30px 0 0 60px; 
 }

 .legend ul button[data-active='1']{
     background:white;
     box-shadow: 4px 4px 0 black;
     margin-left: -3px;
     margin-top: -2px;
     margin-bottom:5px;
     transition: 200ms;
 }

 /* Compenseer voor sticky touch devices*/
 @media (hover:hover){
    .legend ul button:hover {
        background:white;
        box-shadow: 4px 4px 0 black;
        margin-left: -3px;
        margin-top: -2px;
        margin-bottom:5px;
        transition: 200ms;
    }
 }
/* -- einde legenda -- */

/* Main text */
h2.ondertitel{
    font-family:'Kalam', sans-serif;
    font-size:18px;
    width:60%;
    margin-top:-24px;
    margin-bottom:18px;
    margin-left:auto;
    text-align:right;
}
h1.chapter {
    font-family: 'Staatliches', serif;
    margin-top:11px;
    font-size:64px;
}

div.newchapter {
    position:sticky;
    padding:16px;
    margin-bottom:40px;
    z-index: 10;
    width:100%;
    top:0px;
    border-bottom: 3px solid black;
    box-shadow: 0 10px 20px -20px black;
    background-color: #fcfcfc;
    background-image:  linear-gradient(#f1f1f1 1.6px, transparent 1.6px), linear-gradient(90deg, #f1f1f1 1.6px, transparent 1.6px), linear-gradient(#f1f1f1 0.8px, transparent 0.8px), linear-gradient(90deg, #f1f1f1 0.8px, #fcfcfc 0.8px);
    background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
    background-attachment: fixed;
    background-position: -1.6px -1.6px, -1.6px -1.6px, -0.8px -0.8px, -0.8px -0.8px;
}

h2.chaptersubtitle {
    font-family:'Kalam', sans-serif;
    font-size:24px;
    width:60%;
    margin-top:-33px;
    margin-left:auto;
    margin-right:150px;
    margin-bottom:0px;
    text-align:right;
}
h2{
    font-family: "Staatliches";
    text-align:left;
    font-size: 32px;
    margin-bottom: 1.5rem;
}
p {
    font-family: 'Quicksand', sans-serif;
    font-size:16px;
    max-width: 66ch;
}
p.tiny{
    font-size:10px;
    margin-top:2px;
}

h3{
    font-size:25px;
}

h4{
    margin:0;
}

.handwritten {
    font-family:'Kalam', sans-serif;
}
/* -- End main text -- */
/* Markeerstift-look */
i.mark{
    position:relative !important;
    font-style:normal;}
i.mark::before{
    content: '';
    position:absolute;
    opacity: 0.8;
    top:3px;
    left:-8px;
    padding:5px;
    width:105%;
    height:80%;
    transform:skew(-8deg) rotate(-1deg);
    border-radius:4px;
    z-index:-1;
    background: linear-gradient(rgba(232, 238, 144,0.4), yellow, rgba(255, 230, 0,0.6) );}
i.mark.green::before{
    background: linear-gradient(rgba(202, 238, 144, 0.4), rgb(7, 218, 7), rgba(108, 192, 12, 0.6) );}
i.mark.pink::before{
    background: linear-gradient(rgba(247, 202, 247, 0.4), rgb(225, 99, 241), rgba(165, 9, 139, 0.6) );}
.effect{
        color:rgb(255, 255, 255);
        text-shadow: -6px -3px 0 rgba(92, 0, 2, 0.762), 3px 5px 0 rgba(255, 0, 0, 0.824);} /* rgba(0, 85, 0, 0.783) */
/* -- End Markeerstift-look */


hr {
    width:80%;
}

.sticky{
    position:sticky;
    top: 20vh;
    z-index:100 !important;
    width:100%;
    height:auto;
}

.row > .stickycol{
    box-shadow:none;
    height:2000px;
    background:none;
}

input, select,input[type="number"]  {
    width:100%;
    transform:translateY(-5px);
    padding:5px;
    margin:0;
    border: 2px solid black;
    border-radius:0;
    color:black;
    box-shadow: 2px 2px 0 black;
    font-size:18px;
}
#viz {
    position: relative;
    left: calc(-50vw + 50% + 70px);
    width: 50vw;
    background: white;
    padding:20px 40px 10px 40px;
    margin-top:20px;
    border-radius:10px;
    box-shadow:0px 10px 20px #3e3e3e5b;
}

.hid {
    opacity:0;
}
.canvas {
    height:100%;
    width:100%;
}
#chart > div:first-child{
    width:100% !important;
}
.chartcontainer {
    width:60%;
    height:80vh;
    margin-left:auto;
    margin-right:auto;
}
.flex {
    display:flex;
    justify-content:center;
}
.bar{
    display:flex;
    flex-direction:column-reverse;

    border: 4px solid black;
    width:100px;
    height:60vh;
    background:white;
}

.bar span.title{
    position:absolute;
    top:3%;
    font-family:'Kalam';
    font-weight:bold;
    font-size:20px;
    margin-left:-5px;
    text-align:center;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
.bar > .item {
    width: 100%;
    border-top: 4px solid black;
    transition:all 250ms;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.item.b {
    height:60%;
    background-color: #e5e5f7;
    background: repeating-linear-gradient( -45deg, black, black 5px, #ededed 5px, #ededed 20px );
}

.item.c {
    height:4%;
    background :grey;
}

.item.d {
    height:5%;
    background :rgb(218, 165, 32);
}

.item.e{
    height:5%;
    background:#daa520;
    border-top:none;
}

.item.f {
    height: 12%;
    background: rgb(241, 183, 56);
}
.item span.label {
    font-family: 'Staatliches';
    background: white;
    box-shadow: 5px 5px 0px black;
    padding:5px;
    font-size:16px;
    line-height:15px;
    position:relative;
    left: calc(100% + 35px);
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.item span.label::before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top:5px;
    left:-19px;
    border-top: 8px solid transparent;
    border-right: 8px solid black;
    transform:rotate(-50deg)
}

.item span.label::after{
    content: "";
    position: absolute;
    border: 0 solid transparent;
    border-top: 4px solid black;
    border-radius: 20px 0 0 0;
    top: 9px;
    left: -35px;
    width: 25px;
    height: 20px;
    transform:rotate(-15deg)
}

.bar.left span.label{
    left:auto;
    left:calc(-100% - 55px);
}
.bar.left span.label::before{
    right: -40px;
    left:auto;
    transform:rotate(135deg);
}
.bar.left span.label::after{
    left:auto;
    right:-55px;
    border-top:0;
    border-radius: 0 20px 0 0  ;
    border-top:4px solid black;
    transform:rotate(16deg);
}

/* Schuldcounter */
.schuldbar {
    width: 100%;
    display:flex;
    flex-direction:row;
    justify-content:space-around;
}
.schuldcounter {
    display:flex;
    justify-content:baseline;
}
.mainInfo, .splitInfo {
    margin:5px;
    width: auto;
    display:flex;
    flex-direction:column;
    /*padding:10px 30px 10px 40px;
    border: 4px solid #3e3e3e;
    box-shadow: 5px 5px 0 hotpink;*/
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.schuldcounter span{
    margin-left:auto;
    font-family: "Staatliches";
    font-size:18px;
    padding: 5px;
    width:auto;
    margin-bottom:6px;
    background: white;
    box-shadow: 5px 4px 0 red, 0px 0px 5px #707070;
}

.schuldcounter span.count{
    font-size:40px;
    margin-right:0;
}

.schuldcounter.left span {
    margin-right:auto;
    margin-left:0px;
}
.schuldcounter.right span {
    margin-right:0px;
    margin-left:auto;
}

.splitInfo span{
    padding:3px;
    margin-left:0px !important;
    margin-right:0px;
    background: lightgrey;
}

.schuldcounter .title {
    background: darkred;
    color:white;
    box-shadow: 2px 2px 0 white;
}



/* Money overzicht */
div.grafiek{
    display:flex;
    justify-content:center;
    flex-direction:row;
    gap:10px;
}

div.items{
    width:80%;
    height:fit-content;
    font-size:25px;
    display:inline-flex;
    flex-direction: row;
    flex-wrap:wrap;
    align-content:flex-start;
}

div.items > div.item {
    border:none;
    display:flex;
    width:35px;
    height:35px;
    margin:5px;
    padding:5px;
    background:rgba(255, 208, 0, 0.2);
    box-shadow: 1px 1px 0px black;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.items:hover .item {
    filter:brightness(120%);
}

div.items.legenda {
    width:fit-content;
    flex-direction:column;
    font-family:"Staatliches";
    text-align:right;
    letter-spacing:2px;
    margin-right:0px;
}
div.items.legenda .item {
    width:fit-content;
    align-self:end;
    font-size:18px;
    padding-left:10px;
    background:rgba(255,255,255,0.3);
}

/* Draagkracht labels */
.draagkracht .labels {
    height:60%;
    width:5%;
    margin-top:4.5%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    font-family:"Staatliches";
    color:black;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.draagkracht .labels .item{
    display:flex;
    justify-content:space-between;
}
.draagkracht .labels .item:last-of-type{
    margin-bottom:-20px;
}

.draagkracht .labels .item::before,
.draagkracht .labels .item::after{
    content: "-";
}

.timeline {
    position:sticky;
    padding:16px;
    z-index: 10;
    width:100%;
    height:100px;
    bottom:0px;
    background-image:  linear-gradient(#f1f1f1 1.6px, transparent 1.6px), linear-gradient(90deg, #f1f1f1 1.6px, transparent 1.6px), linear-gradient(#f1f1f1 0.8px, transparent 0.8px), linear-gradient(90deg, #f1f1f1 0.8px, #fcfcfc 0.8px);
    background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
    background-attachment: fixed;
    background-position: -1.6px -1.6px, -1.6px -1.6px, -0.8px -0.8px, -0.8px -0.8px;
}

span.small{
    font-size:16px;
    margin-left:5px;
    margin-right:5px;
}

li.empty{
    opacity:0;
}

.comparison li.heading{
    background:#3e3e3e;
    color:white;
    margin-bottom:15px;
    font-family: "Staatliches";
    font-size:20px;
    padding:0px;
    text-align:center;
}

.comparison li.subheading{
    background:rgb(224, 207, 20);
    font-family: "Staatliches";
    font-size:18px;
    padding:0px;
    padding-left:10px;
}

.row.request {
    background:rgb(255, 251, 237);
}

.row.form {
    background:none;
    box-shadow:none;
    padding:none;
}


button {
    border-radius:0;
    border:2px solid black;
    color:black;
    font-family: "Staatliches";
    font-size:16px;
    margin-left:10px;
    margin-right:10px;
    box-shadow: 2px 2px 0px black;
}

button:hover{
    box-shadow: 4px 4px 0px black;
    border:2px solid black;
    transform:translate(-2px, -4px);
}
button.confirm {
    border:2px solid rgb(0,100,50);
    box-shadow: 2px 2px 0px rgb(0,100,50);
}
button.confirm:hover{
    box-shadow: 5px 5px 0px rgb(0, 100, 50);
}
button.deny {
    border: 2px solid rgb(100, 0, 0);
    box-shadow: 2px 2px 0px rgb(100,0,0);

}
button.deny:hover {
    box-shadow: 4px 4px 0px rgb(100, 0, 0);
    transform:translate(-1px, -2px);
}

.center{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    text-align:center;
}

.credit {
    font-family: 'Staatliches';
    margin-left:auto;
    margin-right:auto;
    width:150px;
    text-align:center;
    margin-top:200px;
    user-select:none;
}
.credit h1{
    margin:0;
    margin-top:50px;
    line-height:100%;
}

.credit p{
    font-family:"Staatliches";
    background:white;
    border:2px solid black;
    box-shadow: 4px 4px 0 black;
    color:black;
    padding:3px;
}
span.creditlink{
    color:black;
    font-style:none;
    text-decoration:none;
    cursor:grab;
}

span.creditlink::before{
    content:"😺";
    position:absolute;
    font-size: 20px;
    opacity:0;
    transform:translateX(20px);
}
span.creditlink:hover::before{
    animation-duration: .75s;
    animation-name: heart;
}


button.terugnaarboven{
    z-index:999;
    width:60px;
    height:60px;
    position:fixed;
    bottom:30px;
    right:30px;
    background:white;
    border:3px solid black;
    box-shadow:4px 4px 0 black;
    border-radius:2px;
    text-align:center;
    font-size:50px;
    font-family:"Staatliches";
    opacity:0.6;
    font-style:none;
    color:black;
    padding: 0;
    padding-top:18px;
}

button.terugnaarboven:hover {
    box-shadow:8px 8px 0 black;
    transform:translate(-3px,-6px);
    opacity:1;
    font-style:none;
    color:black;
}

label {
    font-family:"Staatliches";
    font-size:18px;
}

#staatsgrafiek {
    margin:50px;
}

i.kop {
    font-family: 'Staatliches';
    font-size:18px;
    margin-left:auto;
    margin-right:auto;
    font-style:normal;
}
/* Smaller screens 
@media (max-width: 1440px) {
    .container{
        width:740px;
        margin-left:300px;
    }
}

@media (max-width: 1110px) {    
}
*/