.top {
    background:#cce9e2;
    border: 1px solid black;
    padding: 1px;
}
.top:before {
        content: "⊤";
}

.bot {
    background:#fed4d6;
    border: 1px solid black;
    padding: 1px;
}
.bot:before {
        content: "⊥";
}


.rowf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;

}

.minislide h3 {
    text-align: center;
    margin: 0 auto;
}

.minislide {
    width: 80%;
    padding: 1ch;
    border: 1px solid black;
    margin: 1ch;
}

.iframe-container {
    display: flex;
    flex-direction: column;
    height: 80%;
    width: 100%;
}
iframe {
    border: none;
    height: 100%;

}

span.var {
    padding: 0 1ch ;    
}
  span.var:hover {
      background: #ccc;
  }

  table.highlight {
      background: red;
  }

  .prooftree tr:hover {
      background: #ccc;
  }

  .theorem,.openq {
      margin: 1ch;
      border: 0.3ch solid;
      padding: 1ch 0;
      
}
  .theorem::before {
      white-space: nowrap;
      content: "Theorem";
      font-weight: bold;
  }
  .openq::before {
      white-space: nowrap;
      content: "Open question";
      font-weight: bold;
  }

  

  section.conclusion {
      background-image: url('figures/conclusion.webp');
  }

  section.representing {
      background-image: url('figures/arcimboldo.jpg');
  }
  section.yannakakis {
      background-image: url('figures/tree.jpg');
  }
  section.factorized {
      background-image: url('figures/escher.png');
  }
  section.topdown {
      background-image: url('figures/albiez.jpg');
  }
  section.joinq {
      background-image: url('figures/neg.png');
  }

  .map {
      position: relative;
      height: 100%;
      width: 100%;
      margin: auto;
  }

  .map .back {
      position: absolute;
  }

  .overlay {
      position: absolute;
      z-index: 10;
      background: rgba(255,255,255,0.8);
      padding: 5px;
  }

  .space {
      margin: 3ch;
  }

  .grey {
      color: #aaa
  }

  /* svg highlighting */

.svghighlight {
    polygon, ellipse {
	color: var(--highlight-textcolor);
	background: red !important;
	fill: red !important;
	stroke: red !important;
    }
    path {
	stroke: red !important;
	stroke-width: 4px;
    }
}

.svghighlighta {
    polygon, ellipse {
	color: var(--highlight-textcolor);
	background: #ff7777 !important;
	fill: #ff7777 !important;
	stroke: #ff7777 !important;
    }
    path {
	stroke: #ff7777 !important;
	stroke-width: 4px;
    }
}

.svghighlightc {
    polygon, ellipse {
	color: var(--highlight-textcolor);
	background: #ffcccc !important;
	fill: #ffcccc !important;
	stroke: #ffcccc !important;
    }
    path {
	stroke: #ffcccc !important;
	stroke-width: 4px;
    }
}

.hide {
    display: none !important;
}

.hidden {
    visibility: hidden !important;
}



.svghighlightgreen {
    polygon, ellipse {
	color: var(--highlight-textcolor);
	background: green !important;
	fill: green !important;
	stroke: green !important;
    }
    path {
	stroke: green !important;
	stroke-width: 4px;
    }
}


.svghighlightg {
    polygon, ellipse {
	color: var(--highlight-textcolor);
	background: #afa !important;
	fill: #afa !important;
	stroke: #afa !important;
    }
    path {
	stroke: #afa !important;
	stroke-width: 4px;
    }
}