@font-face {
     font-family: "roboto light";
     font-style: normal;
     font-weight: normal;
     src:url('./font/Roboto-Light.ttf') format('truetype')
 }
 @font-face {
     font-family: "roboto regular";
     font-style: normal;
     font-weight: normal;
     src:url('./font/Roboto-Regular.ttf') format('truetype'),
        url('./font/Roboto-Regular.woff2') format('woff2');
 }
 @font-face {
     font-family: 'Montserrat Regular';
     font-style: normal;
     font-weight: normal;
     src: local('Montserrat Regular'), url('./font/Montserrat-Regular.woff') format('woff');
 }
@font-face {
	font-family: 'SansationLight';
	src: url('./font/SansationLight/SansationLight.eot');
	src: local('SansationLight'), 
            url('./font/SansationLight/SansationLight.woff') format('woff'), 
            url('./font/SansationLight/SansationLight.ttf') format('truetype');
}
@font-face {
	font-family: 'OpenSansRegular';
	src: url('./font/OpenSansRegular.eot');
	src: local('OpenSansRegular'), 
            url('./font/OpenSansRegular.woff') format('woff'), 
            url('./font/OpenSansRegular.ttf') format('truetype');
}
body {
   font-family: "roboto regular";  
   margin-left: 1rem;
   margin-right: 1rem;
   --border-color:#d9d9d9;
   --bg-grey:#fbfbfb;
   --bg-white:white;
}
@media (min-width: 576px) {
body {
   font-family: "roboto regular";  
   margin-left: 2rem;
   margin-right: 2rem;
	
}
}
/* MeDium */
@media (min-width: 768px) {
    body {
   font-family: "roboto regular";  
   margin-left: 2rem;
   margin-right: 2rem;
}
}
/* LarGe */
@media (min-width: 992px) {
    body {
   font-family: "roboto regular";  
   margin-left: 2rem;
   margin-right: 2rem;
}
}
/* eXtraLarge */
@media (min-width: 1200px) {
    body {
   font-family: "roboto regular";  
   margin-left: 10rem;
   margin-right: 10rem;
}

}
div.footer {
    display:flex;
   justify-content: space-evenly;
   align-items:stretch;
}
span.highlight {
    padding:0.1rem;
    border:1px solid navy;
    border-radius: 5px;
    color:lightblue;
    background-color: navy;
}
h1, h2,h3,h4{
    font-family: 'Montserrat Regular';
}
h1 {
    text-align: center;
    font-size:200%;
    font-size:2rem;
}
h2 {
    font-size:160%;
    margin-left:5rem;
}

h3 {
    font-size:140%;
    margin-left:7rem;
}


h4 {
    font-size:120%;
    margin-left:12rem;
}

div.wrap-footer {
    /*position:fixed;*/
    bottom:10px;
    width: 100%;
    position: fixed;
    background-color: var(--bg-white);
}

details {
    margin-top:3rem;
    margin-bottom:3rem;
    margin-left:2rem;
    
}
@media (min-width: 576px) {
div.wrap-footer {
    /*position:fixed;*/
    bottom:10px;
    width: 100%;
    position: fixed;
    background-color:white;
    font-size:70%;
}
}
/* MeDium */
@media (min-width: 768px) {
    div.wrap-footer {
    /*position:fixed;*/
    bottom:10px;
    width: 100%;
    position: fixed;
}
}
/* LarGe */
@media (min-width: 992px) {
    div.wrap-footer {
    /*position:fixed;*/
    bottom:10px;
    width: 100%;
    position: fixed;
     font-size:90%;
}
}
/* eXtraLarge */
@media (min-width: 1200px) {

}
summary > p {
    font-style: italic;
    margin-left:2rem;
}

details.d-item {
background-color: var(--bg-grey);
border-color: var(--border-color);
border-width: 1px;
border-style: solid;
border-radius: 10px;
padding-top: 1rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 1rem;
}
#logo-peppol {
    width:128px;
    
}

.d-item:hover {
border: 1px solid darkgray;
  box-shadow: 3px 3px lightgray;
  transition: box-shadow 0.2s ease-in-out;
}

.d-item span.more-info {
    font-size:0.8rem;
    display:block;
    float:right;
    padding:5px;
    color:darkgray;
}
details.d-item span.par {
    padding:1.5rem;
    display:block;
}

.d-last {
    margin-bottom:5rem;
}
a {
    color:navy;
}
a:visited {
    color:navy;
}
a:hover {
    color:snow;
    background:navy;
}

#top {
    display:flex;
    align-content: center;
    justify-content: center;
    
}
#logo_alchimerys {
    height:100px;
}