/* Behold The Unmaintainability  */



/* =======< FONTS >======= */



/*

@font-face {

    font-family: "Play";

    src: url("fonts/Play-Regular.ttf ");

}

@font-face {

    font-family: "Play";

    src: url("fonts/Play-Bold.ttf ");

    font-weight:bold;

}

@font-face {

    font-family: "Grisui";

    src: url("fonts/Grisui.ttf ");

}

*/











/* =======< GLOBAL >======= */













* {

  margin:0px;

  padding:0px;

  font-family: "Play", sans-serif;

  font-size:15px;

}



.readable, .readable * {

  font-family: /*"Play",*/ sans-serif;

}



html, body {

  height:100%;

}



a, a *:not(del) {

  outline: 0;

  text-decoration:none;

}



a:focus, a:focus *, a:hover, a:hover * {

  text-decoration:underline;

}


/* https://stackoverflow.com/a/52058198 */
/*
a[target="_blank"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}
*/






/* =======< FX >======= */

















/* =======< MENU >======= */











#menu {

  height:80%;

  width:150px;

  position:fixed;

  top:0;

  left:0;

  z-index:2;

}



#menu img {

  width:100%;

  margin-bottom:50%;

}



nav {

  margin:0 0;

  text-align:center;

}



nav a {

  border-left:8px solid lightgrey;

  display:block;

  margin:0px 0;

  width:100%;

  height:22px;

}



nav a:hover, nav a:focus {

  border-left:8px solid grey;

}









/* =======< CONTENT >======= */











#content {

  height:100%;

  width:auto;

  margin-left:150px;

}



#content > section:not(#home) {

  min-height:100%;

  width:96%;

  margin:0 2%;

}



.redstar { 

    color:red;

    font-size:16px;

    font-weight:bold;

}



.chut_pas_si_fort { font-size:10px; }



#home {

    display:inline-block;

    text-align:left;

    min-height:100%;

    width:98%;

    margin-left: 2%;

    background-image: url(dl/art/grisui/Grisui_travelersplace_md.jpg);

    background-position: center;

    background-size: cover;

    background-attachment: scroll;

    background-repeat: no-repeat;



}



#home_pane {

    display:inline-block;

    text-align:left;

    width:70%;

    margin:50px 0;

    padding:5%;

    background-color:white;

    box-shadow:8px 8px rgba(0,0,0,0.6);

}

#top_pane, #top_pane * { 

    color: black;

    text-align:left;

}

h1 {

    font-size:48px;

}

h2 {

    font-size: 32px;

}









.section_heading {

  font-size:22px;

  height:34px;

  padding-top:5px;

  border-top:2px solid gray;

  border-bottom:1px solid gray;

  margin:20px 0;

}









/* =======< HOME >======= */









#content {

  /*padding-top:42px;*/

}



#hello {

  margin:auto;

  margin-bottom:3%;

  text-align:center;

  border-spacing:20px 0;

}



#featured {

  width:100%;

  height:70%;

  overflow:hidden;/*auto;*/

  white-space:nowrap;

}



#featured > div {

  display:inline-block;

  width:100%;

  height:100%;

  text-align:center;

}



#featured > div * {

  display:block;

  white-space:nowrap;

}



#skipper {

  text-align:center;

  margin:5px auto;

}









/* =======< ART >======= */











.serie {

  font-size:18px;

  border-bottom:1px dashed gray;

  font-weight:bold;

  margin: 5px 0;

}



.serie_description {

  margin-bottom:10px;

}



#art .thumbnail {

  display:inline-block;

  width:142px;

  height:142px;

  border-radius:10px;

  margin-right:10px;

  margin-bottom:10px;

}



#art .thumbnail_link:focus .thumbnail {

  outline:black dotted 1px;

}



#bigview {

  visibility:hidden;

  width:100%;

  height:100%;

  position:fixed;

  top:0;

  left:0;

  z-index:11;

  text-align:center;

  white-space: nowrap;

  border-collapse:collapse;

}



#bigview td {

  white-space: nowrap;

}



#bigview a:focus, #bigview a:focus * {

  outline:black dotted 1px;

  text-decoration:none;

}



#bigview a:hover, #bigview a:hover * {

  text-decoration:none;

}



#bigview a {

  font-family:monospace;

  outline:0;

  color:black;

}



#bigview_cross {

  vertical-align:bottom;

  text-align:left; 

}



#bigview_cross a {

  font-family:monospace;

  font-size:24px;

}



#bigview_previous, #bigview_next {

  width:1px;

  vertical-align:middle;

}

#bigview_previous {text-align:right;}

#bigview_next {text-align:left;}



#bigview_previous a , #bigview_next a {

  font-size:36px;

}



#bigview_img {

  border:1px solid gray;

  max-height:500px;

  max-width:740px;

  cursor:zoom-in;

}



#bigview_description, #bigview_description * {

  display:inline;

}











/* =======< DEV >======= */













#dev table {

  border-spacing:20px 20px;

}



#dev td {

  height:180px;

}



#dev img {

  max-height:100%;

  max-width:270px;

  border-radius:10px;

}



#dev .serie {

  font-size:22px;

}



#dev .serie_description * {

  font-size:14px;

}



#dev .dl_link {

  font-size:14px;

}









/* =======< ABOUT >======= */







#about {

  height:100%;

}



#workspace {

  width:100%;

  height:30%;

  margin:auto;

  background-color:lightgray;

}



#about table {

  height:60%;

  width:90%;

  margin:auto;

  border-collapse:collapse;

}



#bio {

  min-width:350px;

  width:60%;

  height:100%;

  padding: 5%;

}



#bio * {

  font-size:14px;

}



#info {

  width:40%;

  height:100%;

}

#info * {

  font-size:16px;

}



#portrait {

  margin-bottom:5%;

  height:242px;

}











/* =======< FOOTER >======= */











footer {

  height: 16px;

  width:100%;

  position:fixed;

  bottom:0px;

  right:0px;

  z-index:1;

  text-align:right;

}



footer p, footer p * {

  font-size:10px;

}

footer p {

  margin-right:10px;

}

/*



header {

  visibility:hidden;

  height:20px;

  width:100%;

  position:fixed;

  top:0px;

  left:0px;

  z-index:1;

  text-align:center;

}



header p {

  color:red;

  font-size:14px;

  margin:auto;

}



@media screen and (max-width:780px) { 

  header {

    visibility:visible;

  }

}



@media screen and (max-height:580px) { 

  header {

    visibility:visible;

  }

}



*/







/*

.flexcenter {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    align-content: center;

}

*/