@font-face {
    font-family: "zarathustra";
     src:url('../fonts/zarathustra-v01.otf');

}

@font-face {
    font-family: "egyptien";
      src:url('../fonts/egyptien.ttf');
}

@font-face {
    font-family: "amarante";
      src:url('../fonts/Amarante/Amarante-Regular.ttf');
}


    @font-face {
        font-family: Solide-Mirage;
        src: url(https://vvvvvvaria.org/~lain/%CF%83%CF%85%CF%81%CF%84%CE%AC%CF%81%CE%B9/fonts/Solide-Mirage-master/fonts/SolideMirage-Etroit.otf);
    }

@font-face {
    font-family: "compagnon-light";
      src:url('https://vvvvvvaria.org/~lain/%CF%83%CF%85%CF%81%CF%84%CE%AC%CF%81%CE%B9/fonts/compagnon/Compagnon-Light.otf');
}



body {
  margin: 0px;
  box-sizing: border-box;
  line-height: 1.4;
  padding: 0px;
  width: 100%;
  height:100%;
  font-family: 'zarathustra';
  color: #3d3d3d;
}

.col-md-8 {
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 3%;
}
.col-md-8 h1 {
  text-align: center;
}

.cell_bio {
  font-family: zarathustra;
}

html  {
  height:100%;
  margin: 0px;
}

figcaption {
position:relative;
top:0em;
color:black;
font-style:italic;
}

#info_bottom h2 {
text-align:center;
}

#lastupdated {
  font-size: 0.8rem;
  font-style: italic;
} 

a {
/*background: -webkit-linear-gradient(#fb0000,#0000fb);
  color: purple;
  -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;*/
   /* background-image: linear-gradient(transparent, #80008033, transparent);*/
font-style: italic;
  text-decoration: none;
  color: grey;
}

a:link {

}

a:visited {
  text-decoration: none !important;
  text-decoration-style: none;
/*color:purple;*/
}

a:hover {
  font-style: normal !important;

}

/*a:active {
  color:blue;
}
*/

table { 
width:100%;
}

td {
  padding: 0.4em;
border-right: 1px black dashed; 
border-bottom: 1px black dashed;
max-width:100%;
}

td:nth-child(2) {  
  font-style:italic;
}



.category {
/*  text-decoration-line: underline;
  text-decoration-style: dashed;*/
   color: purple !important;
  font-family: Solide-Mirage !important;
}

#stream {
color: purple !important;
  font-family: Solide-Mirage !important;
size:0.8em;
}


#stream {
	font-style:italic;
}


#menu-categ {
	word-spacing:1.2em;
}

li {
	list-style: none;
}

ul  {
  padding: 0;
}


h1 {
  font-size: 1.4em !important;
  /*letter-spacing: .2em;*/
text-align:center;
}

.typeOfWork {
font-style: italic;
font-size:0.8em;
text-align:center;
}

#title {
  font-size: 1.2em !important;
}





h2 {
  font-size:1em;
  font-weight: normal;
  margin-top: 4em;
font-family: Solide-Mirage;
}

h3 {
  font-size:1em;
}

.tagline {
  margin:0;
  margin-top: 1.25em;
  line-height:1.5em;
  color: #fff;
  background-color: #2196F3;
  padding: 0.2em;
}

.vertical-nav {
  padding: 8px;
}

.tags {
font-size:1em;
  text-align:center;
  line-height: 1.4em;


}

/*.workimg{
  max-width: 47%;
  height: auto;
  padding-bottom:0.5%;
}*/

/*#menu {
  float: right;
  width: 50%;
  height:1000%;
  right: 0px;
  bottom: 0px;
  top: 0px;
  position: absolute;
  overflow: auto;
  background-color: #e0b5cd;

}*/

.content {
  float: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.ext-links {
  float: right;
  width: 21%;
  margin-top: 1rem;
}

/* .grid {
  float: left;
} */

/*.content p {
  padding-right: 40%;
}*/

.license {
margin-left:auto;
margin-right:auto;
width:50%;
text-align:center;
font-size:1em;
margin-bottom:5% !important;
}

.audio-section {
  background-color: grey;
  padding-left: 2%;
}

.all .publishing .feminism {
	display: none;
}

.desc {
	font-size: 0.8<em;
	}

.keywords a {
/*color:blue;*/
text-decoration-style: dashed;
/*background-image: none;*/
}

.cell a{
/*background-image: none;*/
-webkit-text-fill-color: inherit;
}



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

.tooltip .tooltiptext {
  display: none;
  position: absolute;
  z-index: 1;
  font-weight: normal !important;
  /*padding: 0.2em;*/
  background-color: white;
  border: 2px;
  border-style: dashed;
  border-color: purple;
  right: 30%;
  /*bottom: 50%;*/
  min-width: 300px;
  font-size: 80%;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    display: block;
}

.tooltip:hover .tooltipimg {
    visibility: visible;
    display: block;
}

.tooltipimg {
  display: none;
  position: absolute;
  z-index: 1;
  font-weight: normal !important;
  text-align: center;
  /*padding: 0.2em;*/
  background-color: white;
  border: 2px;
  border-style: dashed;
  border-color: purple;
  left: 80%;
  bottom: 600%;
  min-width: 300px;
  min-height: 50px;
  font-size: 100%;
}


audio {
  width:100%;
}

.audio-mini {
  width: 20% !important;
    margin: 0;
    position: absolute;
    top: 85%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


/*.nav {
  floast: left;
}
*/
.container_img {
  margin: 0 auto;
  /*max-width: 1200px;*/
}

.entry-title{
text-align: center;
}

.responsive-image {
  max-width: 100% !important;
}


/*img {
  width: 100%;
  height:100px;
}*/

.credits {
  font-size: 0.9em;
  font-style: italic;
}

.credits img{
  margin-bottom: 0.3%;
  margin-top: 3%
}


.center {
  margin: 0 auto;
  padding-left: 2%;
}


.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /*height: 80%;*/
  height: 10%;
  width: 100%;
  opacity: 0.12;
  /*filter: blur(20px);*/
  transition: .5s ease;
}

.overlay:hover {
  /*opacity: 1;*/
  /*filter: blur(0px);*/
  /*height: 80%;*/
  font-size: 1.5em;
    /*z-index: -1;*/

}



@media screen and (min-width: 300px) {
     body {
    font-size: 1em;
    font-family: amarante;

  }

  .col-md-8 {
  max-width: 40em;
  margin-right: auto 0;
  margin-left: auto 0;
  position: relative;
}

  .cell {
    width: calc(90% - 2rem);
    height: 2rem;
    border-top: dashed 1px black;
    border-top-width:1px;
    text-align: center;
    padding: 1rem;
    margin-bottom: 0rem;
    margin-right: 1rem;
    margin-left: 1rem;
    position: relative;
    font-size: 1.2em;
    overflow: hidden;

  }

/*  .cell:hover {
  height: 40rem;
}
*/



figure {
float: left;
display: inline;
margin-left: 0em;
width: 100%;
margin-right: 0.5em;
margin-top: 1.1em;
margin-bottom: -1em;
}

figure img {
width:100% !important;
}

.rotate {
  transform-origin: top;
 width:0;
text-align:right;
  transform: rotate(90deg);
margin:2% 120%;
white-space: nowrap;
    position: absolute;

  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(90deg);

  /* Firefox */
  -moz-transform: rotate(90deg);

  /* IE */
  -ms-transform: rotate(90deg);

  /* Opera */
  -o-transform: rotate(90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}


#info_bottom {
margin-left: auto;
margin-right: auto;
}

@media screen and (min-width: 600px) {
     body {
    font-size: 1.4em;
  }

#bio-bottom { 

font-family: 'zarathustra';font-size:0.5em}

    .col-md-8 {
  max-width: 100%;
}

#tags_index {
position:relative;
font-size:0.4em !important;
}


.grid {
  position: absolute;
   display: flex;
    flex-wrap: wrap;
    flex-direction: row;
position: relative;
    width: 100%;
    margin-top: 2rem;
    margin-left: 8%;
    margin-right: 0;
  }

  .cell {
    width: calc(90% - 2rem);
    height: 8rem;
    border-top: dashed 1px black;
    border-top-width:1px;
    text-align: center;
    padding: 1rem;
    margin-bottom: 0rem;
    margin-right: 1rem;
    margin-left: 1rem;
    position: relative;
    font-size: 1.4em;
    overflow: hidden;

  }

/*  .cell:hover {
  height: 20rem;
}*/

    .cell_bio {
    width: calc(100% - 2rem);
    margin-left: auto;
    margin-right: auto;
    line-height: 2em;
    word-wrap: break-word;
    /*text-align: center;*/
    padding-left: 2%;
    padding-right: 2%;
  }


  .category {
    font-size: 2em;
    margin-top: 2em;
  }

  .article_desc {
  font-size: 1em;
  max-width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: zarathustra;
  }

  .article_info {
  word-wrap: break-word;
  padding:1% 3% 1% 3%;
  /*background-image: linear-gradient(to right, rgba(0,255,0,0), red);*/
  border: 3px;
  border-style: dashed;
  border-color: purple;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 5%;
  overflow:hidden;
  font-size: 1rem;
  max-width: 80%
  }

 #info_bottom {
margin-left: auto;
margin-right: auto;
padding:2em;
font-size:1em;
}


#info_bottom td {
  vertical-align: top;
  }

.rotate {
  transform-origin: top;
 width:0;
text-align:right;
  transform: rotate(90deg);
margin:2% 100%;
white-space: nowrap;
    position: absolute;

  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(90deg);

  /* Firefox */
  -moz-transform: rotate(90deg);

  /* IE */
  -ms-transform: rotate(90deg);

  /* Opera */
  -o-transform: rotate(90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

}


@media screen and (min-width: 1000px) {
  body {
    font-size: 1em;

  }

#bio-bottom {

font-family: 'zarathustra';font-size:0.7em}

  .title {
    top: 5em !important;
  position: relative !important;
    z-index: 1;
    color: #3d3d3d;
}

#tags_index {
top:18em !important;
position:relative;
font-size:0.7em !important;
}


    .col-md-8 {
  max-width: 100%;
gn
}



figure {
float: left;
display: inline;
margin-left: 0em;
width: 45%;
margin-right: 0.5em;
margin-top: 1.1em;
margin-bottom: -1em;
}

figure img {
width:100% !important;
}

  .grid {
position: relative;
   display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    margin-left:2% !important;
    /*align-items: center;*/
  }
  .cell {
/*    width: calc(60% - 2rem);
    height: 2rem;*/
    width: calc(20% - 0rem);
    height: 25rem;
    border: 0;
    border-top:dashed 1px black;
    border-top-width:1px;
    text-align: center;
    padding: 1rem;
    margin-bottom: 0rem;
    margin-right: 1.2rem;
    margin-left: 1rem;
   position:relative;
    font-size: 1.2em;
    overflow: hidden;

  }

/*  .cell:hover {
  height: 20rem;
}*/



  .cell_bio {
    max-width: 100%;
    word-wrap: break-word;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2%;
    padding-right: 2%;
  }
  .article_desc {
  font-size: 1em;
left:0;
float:left;
  width: 25%;
  margin-left: auto;
  margin-right: auto;
  font-family: zarathustra;
  }

.essay {
  font-size: 1em;
  width: 45%;
  margin-left: auto;
  margin-right: auto;
  font-family: zarathustra;
}

  .article_info {
  /*float: right;*/
  /*padding:1% 1% 1% 1%;*/
  max-width: 100%;
  word-wrap: break-word;
  /*margin-left: 15%;*/
  margin-right: auto;
margin-top:2em;
  font-size: 1rem;
  /*margin-top:20%;*/
background:white;
/*position:absolute;*/
z-index:3;
cursor: grab;
/*  right: 0;
  top: 0;*/
  }

.credits {
position: absolute;
left:30%;
top:60%;
width: 70%;
}

.credits img {
width: 45%;
/*height:800px*/;
border: 1px dashed black;
/*padding: 0.5% 0.5% 0.5% 0;*/
/*object-fit: cover;*/
}

  #info_bottom {
  /*background-image: linear-gradient(to bottom, rgba(0,255,0,0), #9999ff);*/
  bottom: 0px;
  width: 60%;
  padding: 0!important;
  font-size: 1.2em;
}

#info_bottom td {
  vertical-align: top;
  }


.rotate {
  transform-origin: top;
 width:0;
text-align:right;
  transform: rotate(90deg);
margin:0 70%;
white-space: nowrap;
    position: absolute;

  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(90deg);

  /* Firefox */
  -moz-transform: rotate(90deg);

  /* IE */
  -ms-transform: rotate(90deg);

  /* Opera */
  -o-transform: rotate(90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}


}


#searchbar{
     margin-left: 15%;
     padding:15px;
     border-radius: 10px;
   }

   input[type=text] {
      width: 30%;
      -webkit-transition: width 0.15s ease-in-out;
      transition: width 0.15s ease-in-out;
   }

   /* When the input field gets focus,
        change its width to 100% */
/*   input[type=text]:focus {
     width: 70%;
   } */

#searchbar {
  float: right;
}

.biolinks a {
  /*text-decoration: none !important;*/
  font-size: 1em;
}

/*#blueline {
  border-right: 3px;
  border-right-style: dashed;
  border-right-color: blue;
  margin-right: 2%;
  margin-top: 0;
  overflow:hidden;
}*/


img {
width:100%;
}

#concept {
  position:relative;
  font-size: 1.2em;
}


#wrapper, #loginform {
    margin:0 auto;
    padding-bottom:25px;
    background:#EBF4FB;
    width:504px;
    border:1px solid #ACD8F0; }

#loginform { padding-top:18px; }

    #loginform p { margin: 5px; }

#chatbox {
    text-align:left;
    margin:0 auto;
    margin-bottom:25px;
    padding:10px;
    background:#fff;
    height:270px;
    width:430px;
    border:1px solid #ACD8F0;
    overflow:auto; }

#usermsg {
    width:395px;
    border:1px solid #ACD8F0; }

#submit { width: 60px; }

.error { color: #ff0000; }

#menu { padding:12.5px 25px 12.5px 25px; }

.welcome { float:left; }

.logout { float:right; }

.msgln { margin:0 0 2px 0; }