::selection {
  color: white;
  background-color: black;
}

header {
	background: white;
	transition: none;
}

h1.big {
        padding: 0.67em 20px;
    font-size: 8.3vh;
    margin: 0;
    background: white;
}

.data-type {
	padding: 20px;
}

.info, h2 {
	font-size: clamp(20px, 4.3vh, 32px);
	max-width: 815px;
}

.info.petit {
	font-size: 16.2px;
}

.info a {
	color: inherit;
}

.info p:first-child {
	margin-top: 0px;
}

.param {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.param a {
	text-decoration: none;
    color: white;
    padding: 10px;
    background: black;
    display: block;
    font-size: 20px;
    width: fit-content;
    border: 1px dashed white;
    pointer-events: none;
}

.param a.parenting {
	font-weight: bold;
}

a[data-type="countries"], a[data-type="geographies"], a[data-type="areas"] {
	background: var(--areas-color);
}

a[data-type="families"], a[data-type="practices"]  {
	background: var(--families-color);
}

a[data-type="laws"], a[data-type="catlaws"]  {
	background: var(--legal-color);
}

a[data-type="functions"] {
	background: var(--purposes-color);
	font-weight: bold;
}

#svg {
	z-index: 6;
	opacity: 0.2;
}

.sources a {
	color: black;
}

#svg path:nth-child(1) {
	stroke: var(--purposes-color);
}

#svg path:nth-child(2) {
	stroke: var(--legal-color);
}

#svg path:nth-child(3) {
	stroke: var(--families-color);
}

#svg path:nth-child(4) {
	stroke: var(--areas-color);
}

#svg path {
	stroke: black !important;
}

.topborder::before {
	opacity: 1;
	background:
repeating-linear-gradient(
    to right,

    var(--legal-color) 0px 0px,
    black         15px 15px,

    var(--areas-color)            30px 30px,
    black        60px 60px,

    var(--purposes-color)            75px 75px,
    black        90px 90px,

    var(--families-color)            105px 105px,
    black       120px 120px,

    var(--legal-color)		135px 135px
);
}


@media screen and (max-width: 980px) {

	h1.big {
		font-size: clamp(20px, 6.3vh, 35px);
	}

	.info, h2 {
		font-size: 20px;
	}

}