/* @link https://utopia.fyi/type/calculator?c=320,12,1.2,1240,20,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--3: clamp(0.434rem, 0.3624rem + 0.3582vw, 0.64rem);
  --step--2: clamp(0.5208rem, 0.4237rem + 0.4855vw, 0.8rem);
  --step--1: clamp(0.625rem, 0.4946rem + 0.6522vw, 1rem);
  --step-0: clamp(0.75rem, 0.5761rem + 0.8696vw, 1.25rem);
  --step-1: clamp(0.9rem, 0.6696rem + 1.1522vw, 1.5625rem);
  --step-2: clamp(1.08rem, 0.7763rem + 1.5185vw, 1.9531rem);
  --step-3: clamp(1.296rem, 0.8976rem + 1.992vw, 2.4414rem);
  --step-4: clamp(1.5552rem, 1.0347rem + 2.6027vw, 3.0518rem);
  --step-5: clamp(1.8662rem, 1.1885rem + 3.3886vw, 3.8147rem);
}

body{
  margin: 0px; 
}


#background{
  
  background-image: url('bg2.jpg');
background-size: cover;
  background-position: center;
  filter: brightness(123%);

  display: block;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  position: fixed;
  
  z-index:-1;
}

h1{
  font: bold var(--step-5) "Atkinson Hyperlegible Next";  
  
}

h3{
  font: bold var(--step-1) "Atkinson Hyperlegible Next";
  margin: 0;
}


.info_circle{
      hyphens: auto;
      position:fixed;
      padding: 1em;
      text-align-last:center;
      font: var(--step-0) "Atkinson Hyperlegible Next";
      transform: translate(-50%,0%);
      top: var(--origin-top);
      left: var(--origin-left);
      box-shadow: black 0px 0px 5px 0px;
      transition-property: width, height,top, left, box-shadow;
      transition-duration: .3s;
      transition-timing-function: linear;    
      
      background-color: red;
      overflow: hidden;  
      
      color: white;
      display:  inline-block; 
      border-radius: 50cqw;
      
      container-type: size;
}

.info_circle:hover{
   box-shadow: black 0px 0px 20px 0px;
}

.info_circle a{
   color: white;
   font-weight: bold;
}

.circle_content{
  display: none; 
}

#info_sources{
  text-align:center;
}


@media only screen and (min-width: 650px) {
  #info_about{
    --origin-top: 10vh;
    --origin-left: 12vw;
  }
  
  #info_sources{
    --origin-top: 10vh;
    --origin-left: 88vw;
  }
  
  #info_contribute{
    --origin-top : 50vh;
    --origin-left: 12vw;
  }
  
  #info_disclaimer{
    --origin-top: 50vh;
    --origin-left: 88vw;
  }

  .info_circle{
      --origin-diameter:calc(10vw);
      --extended-diameter:calc(80vh);      
      width: var(--origin-diameter);
      height: var(--origin-diameter);
      min-width: 150px;
      min-height:150px;
      max-width: 95vw;
      max-height: 85vh;
  }
  
  #l_tags_table{ 
      min-width: 300px;
      width: 20%;
      max-width: 50%;
      margin: auto auto;
      border-spacing: 1em;  
      padding-bottom: 10em;
      font: var(--step--1) "Atkinson Hyperlegible Next";
      text-align: center;
  }
}
@media only screen and (max-width: 649px) {
    .info_circle{
      --origin-diameter: 26vw;  
      --extended-diameter:calc(80vh);
    
      text-align-last: center;
      width: var(--origin-diameter);
      height: var(--origin-diameter);
      min-width: 20vw;
      min-height:20vw;
      max-width: 95vw;
      max-height: 90vh;
  }
  
  .infocircle > h3{
    font: bold var(--step-0) "Atkinson Hyperlegible Next";
    margin: 0;
  }
  
  #info_about{
    --origin-top: 5%;
    --origin-left: 20%;
  }
  
  #info_sources{
    --origin-top: 25%;
    --origin-left: 20%;
    --extended-diameter:calc(100vw);
  }
  
  #info_contribute{
    --origin-top: 45%;
    --origin-left: 20%;
  }
  
  #info_disclaimer{
    --origin-top: 65%;
    --origin-left: 20%;
  }


  
  #l_tags_table{ 
min-width: 200px;
    width: 60%;
    max-width: 300px;
      margin: auto 10px auto auto;
      border-spacing: 1em;
      padding-bottom: 10em;
      font: var(--step--1) "Atkinson Hyperlegible Next";
      text-align: center;
  }
  
  #l_tags_div {
    margin: auto 0px auto auto;
  }
}

[aria-hidden='true'] {
	display: contents;
	
	&:before, &:after {
		float: left;
		width: 50%; height: 100%;
		--bite: radial-gradient(farthest-side
														at var(--pos-x, 100%) , 
														transparent 100%, red);
		-webkit-shape-outside: var(--bite);
		shape-outside: var(--bite);
		content: ''
	}
	
	&:after {
		float: right;
		--pos-x: 10px;
	}
}

.import_iframe{
  overflow: auto;
  font: var(--step-0) "Atkinson Hyperlegible Next";
  color: white;
  display: block;
  margin: 1em auto;
  width: 56cqw;
  height: 38cqh;
  position: relative;
  border: 1px solid white;
  border-radius: 10px;
}

#info_backdrop{
  width: 100%;
  height: 100%;
  display: inline-block;
  backdrop-filter: /*blur(0px);*/blur(4px);
  position: fixed;
  top: /*0;*/-100%;
  left: 0;
  z-index: 4;
  transition-property: backdrop-filter, display, top;
  transition-duration: .3s;
  transition-timing-function: ease;  
}


#l_tags_i_filter{
  
  border-radius: 10px;
  border: 3px solid yellowgreen;
  padding: 1em;
  font: bold var(--step-1) "Atkinson Hyperlegible Next";
  float: left;
  width: 85%;
  margin-right: 10px;
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  z-index: inherit;
  padding: 1em;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: left;
  padding: 0.5em;
  border-radius: 6px;
  font: normal var(--step--1) "Atkinson Hyperlegible Next";
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  
  top: 80%;
  right: 0px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover, .tooltip:active {
  .tooltiptext {
    visibility: visible;
  }
}

.inputIcon {
  position: absolute;
  right: -10px;
  transform: translateY(-50%);
}


.l_tag_row td{ 
  padding: 1em; 
  border-radius: 10px;
  background-color: yellowgreen;
  text-align: center;
  border-collapse: seperate;
  border: 0px solid white;  
  font: bold var(--step-1) "Atkinson Hyperlegible Next";
}

.l_tag_cell:hover{
  box-shadow: 0 0px 20px gray;
}

.l_tag_cell{
  box-shadow: 0 0px 2px gray;
  transition: box-shadow 0.3s ease-in-out;
  hyphens: auto;
  word-break: break-word;
}

.link_count{  
  font: lighter var(--step-1) "Atkinson Hyperlegible Next";
  color: lightgray;
  float: right;
}
 
#link_overlay{  
  width: 94vw;
  top: 90%;
  background-color: lightgray;
  bottom: 0px;    
  position: fixed;
  box-shadow: 0px 0px 6px darkgrey;
  padding-top: 0px;
  margin: 0 auto;
  left: 3vw;  
  right: 3vw; 
  bottom: 0px;
  box-sizing:border-box;
} 
 
#link_overlay_b_close{
  position:absolute;
  top: 10px;
  right: 10px;  
  width: 30px;
  height: 30px;
  background-color: red;
  box-shadow: 0px 0px 6px darkgrey;
  border-radius: 20%;
}

#link_overlay_body{
  overflow-y:auto;
  height: 100%;
  border-top: 1px solid black;
  height: 90%;
}

#link_overlay_header{
  background-color: lightblue;
  display: inline-block;
  width: 100%;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  text-align: center;
}


#link_overlay_h_text{
  display: inline-block;
  top: 1em;
  left: 1em;
  position: absolute;
}


#l_links_i_filter{
  position: relative;
  margin: 1em auto;
  display: inline-block;
  
      width: 300px;
      max-width: 50%;
  border-radius: 10px;
  border: 3px solid #799BA1;
  padding: 1em;
  font: bold var(--step-1) "Atkinson Hyperlegible Next";
}
 

#link_overlay{
  border-radius: 1em;
  transition-property: box-shadow backdrop-filter, display, top;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;  
}

#link_overlay:hover{
  box-shadow: 0 0px 20px gray;

}



#l_links_table{
  width: 90%;
  margin: 2em auto;
  padding: 0 0 5em 0;
  border-collapse: collapse;
}

#l_links_table tr{
 background: aliceblue;
 border-bottom: 1em solid lightgray;
}

#l_links_table th{
  padding: 1em;
  float: left;
  font: bold var(--step-0) "Atkinson Hyperlegible Next";
}

.l_link_row{
  transition-property: box-shadow backdrop-filter, display, top, height;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;  
}


.l_link_row td{
  font:  var(--step-0) "Atkinson Hyperlegible Next";
  vertical-align: top;
  padding: 1em;
}

.l_link_row > td:first-child{
  border-radius: 10px 0 0 10px;
}

// Set border-radius on the top-right and bottom-right of the last table data on the table row
.l_link_row > td:last-child{
  border-radius: 0 10px 10px 0;
}



.l_link_descr{
  font-style:italic;
}

.l_readmore_tags{
  display: none;
  vertical-align: top;
  width: 50%;
}

.l_readmore_pivot{
  display:none;
  vertical-align: top;
  width: 50%;
}

.link_tag{
  background-color: lightblue;
  border: 1px solid gray;
  border-radius:0.5em;
  padding: 0.5em;
  margin: 0.5em;
  box-shadow: 0 0 0.25em gray;
  display: inline-block;
}


.l_b_expand{
  position:relative;
  width: 30px;
  height: 30px;
  background-color: green;
  box-shadow: 0px 0px 6px darkgrey;
  border-radius: 20%;
  padding: 0px;
  display: inline-block;
  color: white;
  text-align:center;
  align-content: center;
  font: bold var(--step-1) "Atkinson Hyperlegible Next";
  float:right;
}

.l_b_expand_div{
  width:100%;
  height: 30px;
  
}
 
.l_link_content{
  padding: 1em;
}

.l_link_content a {
  font: bold var(--step-0) "Atkinson Hyperlegible Next";
  color: navy;
}


 /* Dropdown Button */
.dropbtn {
  background-color: lightblue;
  border: 1px solid gray;
  border-radius:0.5em;
  padding: 0.5em;
  margin: 0.5em 0.5em 0px 0.5em;
  box-shadow: 0 0 5px gray;
  display: inline-block;
  min-width: 10em;
  font: var(--step-0) "Atkinson Hyperlegible Next";
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  float: right;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: lightblue;
  width: 30cqw;
  max-width: 20em;
  z-index: 1;
  padding-bottom: 3em;
  width: 100cqw;
  word-wrap: break-word;
  box-shadow: 0 0 5px gray;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;

}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #799BA1;}

.link_tag_wayback{
  background-color: lightblue;
  border: 1px solid gray;
  border-radius:0.5em;
  padding: 0.5em;
  margin: 0.5em;
  box-shadow: 0 0 0.25em gray;
  display: inline-block;
  float: right;
}
.link_tag_wayback a{
  font: var(--step-0) "Atkinson Hyperlegible Next";
  text-decoration: none;
  color: black;
}

.link_tag_wayback:hover{
  background-color: #799BA1;
}

.sourcelink{
  color: grey;
  margin: .5em;
}

.sourcesdropdown{
  float: none;
}

.sourcesdropdown button{
  width: 20em;
}
.sourcesdropdown a{
  background: lightgray;
}

.sourcesdropdowncontent{
  height: 50cqh;
  overflow: auto;
  margin: 0 .5em;
}