* {

}

#bar {
    position: fixed;
    background: url(img/dekooning1.jpg);
    width: 100%;
    height: 10px;
    z-index: 2;
}

#title-wrapper {
  padding: 3em;
  text-align: center;
}

#title {
  font-family: 'Cutive Mono';
  font-size: 48pt;

}

#back {
	text-decoration: none;
  font-family: 'Cutive Mono';
  /* margin: 2em; */
	padding-left: 0.2em;
	padding-right: 0.2em;
	font-size: 18pt;
	color: #ffffff;
	background-color: #000000;
  text-align: left;
}

#topics-wrapper {
  font-family: 'Cutive Mono';
  padding-left: 3em;
  padding-right: 3em;
  text-align: center;
}

.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  /* background-color: #ffaa99; */
  background-color: #edceda;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  /* filter: alpha(opacity=80); */
}

.topic {
  font-size: 28pt;
  color: #888888;
}

.topic_content {
  font-size: 16pt;
  display: none;
	text-align: left;
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 50%;
  padding: 1em;
  /* border: 16px solid #ffaa99; */
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

/* ****************************************** */
.link {
	cursor: pointer;
	text-decoration: none;
	background-color: #000000;
	animation: flash 1s linear infinite;
}

.topiclink {
	cursor: pointer;
	/* text-decoration: underline; */
	color: #000000;
	/* background-color: #dddddd; */
  /* border-style: solid;
  border-color: white; */


	/* font-weight: bold; */
}
.topiclink:hover {
	background-color: #000000;
	animation: flash 0.6s linear infinite;
  /* border-style: solid;
  border-color: black; */
}

@keyframes flash {
	0% {color: #ffffff;}
	33% {color: #00ffff;}
	67% {color: #ff00ff;}
	100% {color: #ffff00;}
}

/* wavy underline animation */
.wavy {
  color: #000000;
  border-bottom: 1px solid white;
  cursor: pointer;
}
.wavy:hover {
  border-bottom: none;
  padding-bottom: 2px;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 10 18'%3E%3Cstyle type='text/css'%3E.squiggle%7Banimation:shift .5s linear infinite;%7D@keyframes shift %7Bfrom %7Btransform:translateX(-10px);%7Dto %7Btransform:translateX(0);%7D%7D%3C/style%3E%3Cpath fill='none' stroke='black' stroke-width='1' class='squiggle' d='M0,17.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5' /%3E%3C/svg%3E");
}