body{
  margin:5%;
  font-family: 'Anybody';

}

p{
  margin:0;
  font-size: 28px;
}

a{
  cursor: pointer;
  color:red;
  text-decoration: underline;
  font-weight:bold;
  /* border: solid 1px red; */
}

mark{
  background-color: yellow;
  color: black;
}

#title{
  font-size: 128px
}

#subtitle{
  font-size:96px;
}

.blank{
  color: white;
}

.panel{
  /* outline: 1px red solid; */
  width:100%;
  display:flex;
  align-items: center;
}

.panel-full-height{
  /* outline: 1px red solid; */
  width:100%;
  min-height:100vh;
}

.panel-adaptive-height{
  /* outline: 1px blue solid; */
  width:100%;
  /* min-height:100vh; */
}

.panel-content{
  width: 100%;
  max-width:900px; /*change later*/
  padding: 5px;
  /* height:200px; */
  /* outline: 1px green solid; */
  margin-left: auto;
  margin-right: auto;
}

#iframe-wrapper{
  /* outline: 1px solid pink; */
  /* background-color: black; */
  /* opacity: 0.5; */
  position: fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  /* display: flex; */
  display: none;
  align-items: center;
  justify-content: center;
}

.iframe-outer-frame{
  width: 85%;
  max-width: 700px;
  height:60vh;
  background-color:#ff8200;
  display:flex;
  flex-direction: column;
  outline: 1px solid #ff8200;

}

.iframe-nav{
  background-color: #ff8200;
  color: white;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.iframe-inner-frame{
  background-color: white;
  height: 60vh;
}

#actual-iframe{
  width: 98%;
  height: 95%;
  border: none;
}

#close-iframe{
  cursor:pointer;
}

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 2s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 5px;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext{
  /* visibility: hidden;
  width: 120px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 25%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s; */
  visibility: hidden;
  width: 40%;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  /* border-color: blue transparent transparent transparent; */
}

.tooltip:hover .tooltiptext{
  visibility: visible;
  opacity: 1;
}