/** Video insert **/

.video--wrapper.video--vimeo--wrapper {}

.video--thumbnail.video--vimeo--thumbnail {
    display: none
}

.video.video--vimeo {}



:root {
  --font-size: 17px;
  --line-height: 24px;
  --header-height: 1.2;
  --font-size--header: 40px;
  --line-height--header: 48px;
  --body-font: "Amiamie";
  --header-font: "Amiamie";
  --link-color: #052048;
  --link-color--visited: #052048;
  --link-color--hover: #0a6be0;
  --body-background-color:  #f1acda;
}
 
body, html {
  font-size: var(--font-size);
  line-height: var(--line-height);  
  font-family: var(--body-font);
  background: var(--body-background-color);
}

body {
  /* max-width: 100ch; */
  /*  display: grid; */
  grid-template-rows: min-content 1fr;
  grid-template-columns: 3fr 1fr;
/*  padding-left: 10ch; */
  column-gap: calc(2 * var(--line-height));
  margin: 0;
}

h1 {
 font-family: var(--header-font);
 font-size: var(--font-size--header);
 line-height: var(--line-height--header);
 margin: 0 0 calc(2.5 * var(--line-height)) 0;
}
.index main,
.index h1 {
     display: none;
    }
    
h2, h3 {
 line-height: var(--line-height);

}

h2 {
 font-size:45px;
 color: transparent;
  margin: calc(2 * var(--line-height)) 0 0 0;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--link-color);
}

h3 {
	font-size:32px;
}

h4 {
	font-size:26px;
}

h5 {
	font-size:20px;
}



h4, h5, h6 {
 margin: var(--line-height) 0 0 0;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-color--hover);
    text-decoration: none;
}

a:visited {
    color: var(--link-color--visited);
}

blockquote {
    font-style : italic;
    }
header {
  display: flex;
  /* margin: 2em 0; */
  /* grid-column-end: span 2; */
}

.index::before {
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  background-image:   url(https://etherport.org/media/filer_public/a2/5e/a25e26c4-91f3-437f-af35-b290836cbd1c/pattern.svg);
  background-repeat: no-repeat;
  background-size: cover;
 opacity: 1;
animation: fadeOutShape ease 2s forwards; 
z-index: 0;
    pointer-events: none;
    }
 
@keyframes fadeOutShape {
  to {
    opacity: 0;
    visibility: hidden;
  }
}


 
 
 
 
.navbar--organisation {
    flex: 0 0 75mm;
    margin-left: calc(-75mm - 2ch);
    display: none;
}

 nav {
     flex-grow: 1; 
     }
#nav--sub {
    display: none;
    }
nav ul {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
  max-width: 100%;
  flex-wrap: wrap;
  flex-direction: column;
}
 
nav ul li {
  margin: 5px;
}



.navbar--chapter:not(.navbar--chapter ~ .navbar--chapter) {
  box-shadow:0 -8px 38px 0px rgb(243 186 117 / 80%);
}


.navbar--reports--subnav,
.navbar--pages--subnav,
.navbar--labels--subnav
{
  display: none;
}
.navbar--labels--subnav {
    display: flex;
    flex-direction: row;
    margin-top: 5px;
    }
.navbar--label {
    margin: 0 -4px 3px 0;
    }
 .navbar--index {
     font-family: AdelpheTrouble;
      margin: 20px 10px 10px 20px;
   }
   
   
     .navbar--index a:hover {
         color: #0a6be0;
         }
     
 .navbar--index a:first-of-type{
          font-size: 50px;
     }

.navbar--index::after {
     font-family: Amiamie;
     font-weight: bold;
    font-size: 20px;
    content:"on democracy and coalition-building";
    position: absolute;
    left: 19px;
    top: 73px;
    color: var(--link-color);
}

.navbar--labels::before {
    content: "entry points";
  font-weight: bold;  
  color: var(--link-color);
  text-transform: uppercase;
    }
 .navbar--labels > a {
     display: none;
     }   
    
.navbar--reports,
.navbar--pages,
.navbar--labels,
.navbar--print
{
  display: none;
}
.navbar--labels {
    display: block;
    order: -1;
    margin-left: 50vw;
    margin-top:9px;
    ul li a {
    border: 1px solid   var(--link-color);
    padding: 1px 8px 5px 8px;
    border-radius: 15px;
      background: linear-gradient(7deg, rgba(255, 255, 255, 1) 0%, rgb(181 225 182) 52%, rgba(255, 255, 255, 1))
}
   
}
    
.navbar--index {
    order: -2;
    font-size: 30px; 
    a {
       color: var(--link-color);
     text-transform: lowercase;
        }
        a::after {
            font-family: Jacquarda;
            font-size: 45pt;
            content:"25.06";
            padding-left: 0.3em;
    }
    }
    
@property --angle {
  syntax: "<angle>";
  initial-value: 90deg;
  inherits: false;
}

 .navbar--chapter {
  --angle: 90deg;
  background: linear-gradient(
    var(--angle),
rgba(255, 255, 255, 1) 0%, rgba(77, 171, 78, 1) 52%, rgba(255, 255, 255, 1)
  );
   a p {
      display: flex;
        align-items: center;
   padding: 0 10px 0 50px;
	  transition: padding 0.8s ease;
      }
      &:hover a p {
          
               padding: 25px 10px 25px 50px;
          }
}


 .navbar--chapter:hover {
  animation: rotate-gradient 5s linear infinite;
}

.navbar--chapter {
    font-family : Amiamie;
    font-size: 20px;
    }

@keyframes rotate-gradient {
  from {
    --angle: 90deg;
  }
  to {
    --angle: 450deg;
  }
}        


  
 aside {
     display: none; 
     }    
     
.conference a p::before {
padding-right: 15px;
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(https://etherport.org/media/filer_public/23/39/233925e4-dd4e-4132-be9e-1b248d0ba092/star-bullet.svg);
  background-repeat: no-repeat;
  background-size: contain;
   }  
   
   .workshop a p::before {
padding-right: 15px;
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(https://etherport.org/media/filer_public/38/e5/38e5f0b7-391a-4e23-ab12-e0fde9a904bb/jacquard-bullet.svg);
  background-repeat: no-repeat;
  background-size: contain;
   }  
main {
  position: relative;
}


 /** on single report page, and label page */

 .page--chapter, .page--label {
   .navbar--chapter,
   h6 {
       display: none; 
       } 
   h1 {
       color: var(--link-color);
	 font-family: AdelpheTrouble;
	font-size: 55px;
	line-height: 1;

    }    
    main {
		max-width: 80ch;
		margin-inline: auto;
		color: var(--link-color);
		margin-bottom: 50px;
        } 
     }
 
/** References which aren't direct links (they don't have the data-direct-link attribute) */

[data-link-target-type="label"],
[data-link-target-type="label"]:visited {
    color: inherit;
    text-decoration: none;
}

[data-link-target-type="label"]:hover {
    color: var(--link-color);
}

[data-link-target-type="label"] .reference--target {
  float: right;
  width: 20ch;
  margin-right: -25ch;
  clear: right;
  text-decoration: none;
  color: var(--link-color);
}

[data-link-target-type="label"]:hover .reference--target {
    text-decoration: underline;
}

[data-link-target-type="label"] .reference--label--inline {
    text-decoration: underline;
    text-decoration-style: dotted;
}

 
[data-link-target-type="label"][data-direct-link] .reference--label,
[data-link-target-type="label"] .reference-label--target .reference-label--target--label {
  display: inline-block;
  background: #efefef;
  padding: .5ch;
  margin-top: -.5ch;
  font-family:var(--body-font);
}
 
.link-source {
  float: right;
  width: 20ch;
  margin-right: -25ch;
  clear: right;
  margin-top: 0;
  font-size: 85%;
}

ul.label--context-list {
  padding: 0;
  list-style-type: none;
}

ul.label--context-list li {
  margin-bottom: calc(2 * var(--line-height));
}

/** Hide elements which were marked as instructions in the pad */
.instruction {
    display: none;
}
 
.tag--question {
  font-size: 110%;
  color: green;
}
 
.tag--important  {
    text-decoration-line: underline;
    text-decoration-style: double;
}
 
.tag--trouble {
    text-decoration-line: underline;
    text-decoration-style: wavy;
}
 
.tag--commentary {
    text-decoration-line: underline;
    text-decoration-style: dotted;
}
 
.tag--citation {
    background-color: beige;
}
 
b {
    border: solid black 2px;
}


.going-hybrid--labels ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.going-hybrid--labels ul li {
    margin-top: var(--line-height);
}
.going-hybrid--labels ul li a {
    padding: .3em .5em;
    border: 2px solid;
    text-decoration: none;
}
.going-hybrid--labels ul li a:hover {
    background: white;
}
 
img {
    max-width: 100%;
}


 
/**Anwhich aren't direct links (they don't have the data-direct-link attribute) */

[data-link-target-type="label"],
[data-link-target-type="label"]:visited {
    color: inherit;
    text-decoration: none;
}

[data-link-target-type="label"]:hover {
    color: var(--link-color);
}

[data-link-target-type="label"] .reference--target {
  float: right;
  width: 20ch;
  margin-right: -25ch;
  clear: right;
  text-decoration: none;
  color: var(--link-color);
}

[data-link-target-type="label"]:hover .reference--target {
    text-decoration: underline;
}

[data-link-target-type="label"] .reference--label--inline {
    text-decoration: underline;
    text-decoration-style: dotted;
}

pre {
    white-space: pre-wrap;
  word-wrap: break-word;
  }

.page--label {
    .label--link-count {
         font-style: italic;
         opacity: 0.7;
        }
 .reference--target{
        display: none;
        }
    .link-source {
        float: left;
            margin-right: unset;
            width: auto;
        }
        .link-source + p a {
            padding-left: 10px;
		 font-family: AdelpheTrouble;
		font-size: 25px;
		    line-height: 0;
	    }
	.link-source + p {
	    margin-bottom: 0;
	}
    }





@media screen and (max-width: 800px) {
    body {
        padding-left: 0;
    }
   .navbar--organisation {
        position: absolute;
        margin-left: -2ch;
        transform: rotate(90deg);
        transform-origin: top left;
    }
    .navbar--labels {
   display: block;
    order: -1;
    margin-left: 50px;
    margin-top: 50px;
    margin-bottom: 20px;
}
[data-link-target-type="label"] .reference--target {
float: right; 
     width: auto; 
     margin-right: 0; 
    text-decoration: none;
    color: var(--link-color);
    position: absolute;
    right: -66px;
    font-size: 10px;
    transform: rotate(
90deg);
    }
    
    
    .page--chapter, .page--label {
        h1 {
            font-size: 33px;
            margin: 10px;
            p {
                margin-top: 0;
                }
            }
    main {
        margin: 10px;
        }
        }
    iframe { 
width: 100%;
    height: auto;
}
    
}

@media screen and (min-width: 800px) and (max-width: calc(116ch + 150mm)) {
    body {
    /*    margin-left: calc(75mm + 4ch);
        margin-right: 2ch; */
        padding-left: 0;
    }
}

@media screen and (max-width: 600px) {
.navbar--index a:first-of-type {
    font-size: 8vw;
    }
    
    .navbar--index  {
        a::after { 
            font-size: 9vw;
            }
    }
    
    .navbar--index::after {
        top: 57px;
            font-size: 4.2vw;
        left: 0;
    right: 0;
    text-align: center;
        }
        
        .navbar--labels::before {
            font-size: 3.5vw;
            }
	.navbar--labels {
	        margin-left: 15px;
	}
	
	.navbar--label {
    font-size: 14px;
	}
}