:root{
    --bg-blew-900:#00283D;/*#003D5C*/
    --bg-black-900:#1B2631;
    --bg-card-100:#fdfdfd;
    --bg-card-200:#fdfdfd;
    --bg-box-3:yellow;
    --bg-mark-1:blue;
    --bg-mark-2:yellow;
    --bg-mark-3:green;
    --bg-cardimage-50:#004082;/*black*/
    --bg-cardbutton-50:#504e70;
    --bg-cardbutton-grijs:grey;
    --text-black-900:#302e4d;
    --text-black-700:#504e70;
    --color-headings: #302e4d;
    /*extra flip card*/
    --level-one: translateZ(3rem);
  --level-two: translateZ(6rem);
  --level-three: translateZ(9rem);  
  --fw-normal: 400;
  --fw-bold: 700;  
  --clr: #b7c9e5;
}

*{
    box-sizing:border-box;
    padding:0px;
    margin:0;scroll-behavior:smooth;
}
/* thema licht-donker start */

/* thema licht-donker stop */

body{
    /*font-family:"Georgia", serif;"Poppins"*/
    font-family: Helvetica;font-size:100%;
    /*font-family:'Calibri',Helvetica,Arial, sans-serif;*/
    background-color:var(--bg-cardimage-50);
    overflow-x:hidden;margin:0;height: 100%;
}
@media print {
  body {
    font-size: 8pt;
  }
    header, .EE, .Terrein, .footer{display:none;}
    article .calc{display:none;}
    article img{display:none;}
    .tree details{display:block;}
   div.accordion__content {
  display: block;
}
    button.button{display:none;}
    .newpage{page-break-before:always;}
}
main {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(min(320px,100%), 1fr));*/
    grid-template-columns: repeat(auto-fit, minmax(368px, 1fr));
    /*grid-gap: 0.5rem; margin-left:2px; margin-right:2px;*/
    justify-content: center;
}
/*extra list style*/
main article #names{
      list-style-type: none;
      } 
/*stop extra list-style*/
.collection-header{
    background:green;
    width:auto;
    color:white;
    text-align:center;
    border-radius:5px;
    margin:5px;
    padding:2px;
    box-sizing:content-box;}
.collection-item {
    border-bottom: 1px solid grey;
    padding:5px;}

    /*li:hover{
        background:#003D5C;
        color:white;      
      }*/    
      main .card7{
          border-bottom: 1px solid grey;
          padding-bottom:5px;
          line-height:1.6;
          /*padding-left:10px;*/          
}
      main .card8 {
          border-bottom: 0px solid red;
          padding-bottom:5px;
          line-height:1.6;
          /*padding-left:10px;*/          
}
    .circular--square {
        border-radius: 50%;}       
    main .card9 img {
        /*width: 75%;*/
        /*filter:drop-shadow(.75em .75em 1em);*/
        color:grey;
        display:block;
        margin-left:auto;
        margin-right:auto;
        margin-top:2px;
        border-radius:15px 15px 0 0;
}   
mark1{
    color:var(--bg-mark-1);
    background-color:var(--bg-card-100);
    padding-left:4px;
    padding-right:4px;
    /*font-weight:bold;*/
    /*display:block;*/
    }
mark2{
    background-color:var(--bg-mark-2);
    border-radius:2px;
    margin:2px;
    padding-left:4px;
    padding-right:4px;
    color:black;
}
mark3{
    background-color:var(--bg-mark-3);
    border-radius:2px;
    margin:2px;
    padding-left:4px;
    padding-right:4px;
    padding:0px;    
}
div{
    line-height: 1.3;
}
/*dit nazien en testen             
#main{padding:0;}
stop nazicht*/
/*main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    grid-gap: 0.5rem;
    margin-left:2px;
    margin-right:2px;
}*/
/*.container {
  overflow: hidden;
  box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
  background-color: white;
  text-align: center;
  border-radius: 1rem;
  position: relative;
  margin: 0.5rem;
}*/
main .card {
    /*background-color:var(--bg-card-100);*/
    transition: transform 0.3s;
    height:auto; 
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
    border-radius:15px;
    /*cursor: pointer*/;margin: 0.3rem;overflow: hidden;position: relative;
}
main .card:nth-of-type(1n) {
  border: 0px solid grey;background-color:var(--bg-card-100);
}
       main .card:nth-of-type(2n) {
         border: 0px solid grey;background-color:var(--bg-card-200);
}  
/*main .card:hover {
    background-color:var(--bg-cardimage-50);
    color:white;
    transform: translateY(0px);
    border: 0px solid red;
}*/
main .card .info {
  padding: 1rem;
}
      main .card .text {
  padding: 1rem;
}
       main .card .button {
    background-color:var(--bg-cardbutton-grijs);
    border: 0px solid red;
    color: white;
    padding: 10px;cursor:pointer;
    width: auto;     
      }
      main .card .button:hover {
   background: Blue;   
      }
    /*  .card .text > button {
    background: gray;
    border: 0;
    color: white;
    padding: 10px;
    width: 60%;
    }*/   
main .card img {
  width: 100%;
  border-radius:15px 15px 0 0;  
}
/* bereken medstart */
.calc{
      display:flex;margin-top:8px;
      }
      span{
      color:red;font-weight:bold;
      }
      .box10{width:80px;height:auto;background:Green;Color:White;margin:0px;margin-top:3px;margin-left:2px;
   margin-right:5px;box-sizing:border-box;border-radius:10px;text-align:center;}
    main .card10 img {
  width: 30%;filter:display:block;margin-left:auto;margin-right:auto;margin-top:2px;
}
.box3{margin-left:5px;padding:5px;  border-left:2px solid grey;}
.box3:hover{background:#E5E8E8;}
/* bereken medstop */

main .card .desc {
    color: red;    
}
      main .card .descGreen {
  color: green;
}
.b{margin-top:8px;}
 .DD{
    font-size:13px;
    /*border-top:2px solid red;
    border-bottom:2px solid red;*/
    display:flex;margin-bottom:5px;
    justify-content:center;
    color:white;z-index:3;
    /*background-color:var(--DD-back);*/
    /*background:#111;*/
    /*opacity:0.9;*/
    padding:2px;
    margin-top:82px;/*65px old*/}
/*.DD{
    font-size:13px;
    border-top:1px solid white;
    border-bottom:1px solid white;
    display:flex;
    justify-content:center;
    color:white;
    background:#111;
    opacity:0.9;
    padding:3px;
    margin-top:64px;/*64px old*/}*/
.footer{
    position:notfixed;
    left:0;
    margin-top:5px;
    bottom:0;
    width:100%;
    background-color:red;
    color:white;
    width:auto;
    text-align:center;}
   h3{
      position:relative;z-index:1;display:inline-block;
      }
      h3::after{
        content:"";
        position:absolute;
        left:0.2rem;
        width:calc(100% + 1px);height:30px;top:-0.28rem;
        background:var(--bg-blew-900);opacity:0.6;
        z-index:-1;
        
        transform:scaleX(0.06);
        transform-origin:left;
        transition:transform 250ms ease-in;
      }
     /* .card:hover h3::after{
      transform:scaleX(1);
      }  */
h3 { 
    display: block;
    font-size: 14px;text-transform: uppercase;
    padding: 3px 20px 2px;/*display: flex1;*/
    font-weight: bold;border-bottom:1px solid #669BD1;
    border-right:1px solid #669BD1;box-shadow: 1px 1px #888888;
    color:white;background: var(--bg-blew-900);
}
#cyclus{
        /*color:black;*/
        /*font-weight: bold;*/
        background:cadetblue;
        width: 90%;
        border-radius:5px;
        padding:2px;
        margin-top:2px;
      }
/*
background:green;
    width:auto;
    color:white;
    text-align:center;
    border-radius:5px;
    margin:5px;
    padding:2px;
    box-sizing:content-box;
*/
 main article ul li{
      /*list-style-type: none;*/margin-left:5px;
      } 
main article ol li{
      margin-left:10px;
      } 
i1{
    color:red;
    margin-left:5px;float:right;
   }
 i1:hover {
     color:blue;
}
z{
    color:black;
    float:right;
    font-size:12px;
    background:yellow;
    padding:1px;}
main .calc7{
    /*background: url("../picture/bg.jpeg") no-repeat;*/
    background-position: bottom;
    background-size: cover;
    height: 100%;
    transition: all .5s;
    display:block;border:1px solid red;
    padding:10px;border-radius:5px;    
}

/* oke tit hier*/
/*start-automatisch tellers op article*/
/*article{
      	counter-increment:dirk-teller;
      }
      .collection-header::before{
        color:yellow;
      	content:counter(dirk-teller) " . ";
      }*/
/*stop-automatisch tellers op article*/

c1{
     background-color:green;padding:5px;border-radius:5px;font-weight:bold;margin:5px;padding:2px;line-height:1.6;color:white;
      }
 c2{
     background-color:yellow;padding:5px;border-radius:5px;box-sizing:border-box;   margin:5px;padding:2px;width:auto;height:auto;line-height:1.6;color:black;font-weight:bold;
      }
c3{
     background-color:yellow;padding:5px;border-radius:5px;box-sizing:border-box;   margin:5px;padding:2px;width:auto;height:auto;line-height:1.6;color:black;
      } 
c4{
     background-color:dimgrey;padding:5px;border-radius:5px;font-weight:bold;margin:5px;padding:2px;line-height:1.6;color:white;
      }


i4{color:yellow;
   }
.back{font-size:13px;display:flex;justify-content:center;color:white;background:#003D5C;
   padding-bottom:0.5rem;}
article div.back img{border-radius:5%;}

 

    </style>
    <style>
h1 {
  margin: 5rem;
}
/*@media(max-width:765px){
    body{
    background-color:var(--bg-black-900);
        /*background-color:var(--bg-black-900);*/
    }*/
}
/*@media(max-width:450px){
    main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  cursor: pointer;grid-gap: 0.5rem;margin-left:2px;margin-right:2px;
        justify-content: center;
}
  }*/
    </style>