:root{
  /* <-- standard style !--> */
  --background-color: rgb(16, 17, 24);
  --text-color: antiquewhite;
  --border-color: gray;

  --secondary-color: brown;
  --tertiary-color: teal;

  background-color: var(--background-color);
}

body {

  font-family: 'Courier New', Courier, monospace;
  font-size: 75%;
  color: var(--text-color);
  height: 100%;
}

h2 {
  padding-bottom: 5px;
  font-size: large;
  text-transform: uppercase;
}

h3 {
  font-size: medium;
  text-transform: uppercase;
}
#sleepless h3 {
  font-size: medium;
  font-weight: bold;
  color: var(--tertiary-color);
  text-transform: uppercase;
}

b {
  color: var(--secondary-color);
}

hr {
  border-bottom: var(--border-color);
  border-style: dashed;
  border-top: transparent;
  border-width: 1px;
}

sub {
  font-style: italic;
}

/* >>> link styling <<< */
/* unvisited link */
a:link {
  color: var(--tertiary-color);
  font-weight: bold;
  text-decoration: underline;

}

/* visited link */
a:visited {
  color: var(--tertiary-color);
  font-weight: bold;
}

/* mouse over link */
a:hover {
  color: red;
  font-weight: bold;
}

/* selected link */
a:active {
  font-weight: bold;
}

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

#header {
  text-align: center;
  cursor:pointer;

  color: var(--text-color);
  height: 10vh;
  /* font-size: 25px; */
  font-style: italic;
  letter-spacing: 10px;

  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  z-index: -10;

  margin: auto;
}

.symbol {
  font-size: 1em;
  color: var(--text-color);
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: -10;
}

#main {
  width: 37%;
  height: 70vh;

  border: 1px dotted var(--border-color);
  background-color:  var(--background-color);
  padding: 15px;

  margin: auto;
  right: 0;
  left: 0;

  overflow-y: auto;
  overflow-x: hidden; 
}

.row {
  backface-visibility: hidden;
  width: 27%;
  height: 99vh;

  top: 0.5%;
  position: absolute;
}
#left {  left: 0.5%; }
#right {  right: 0.5%; }



/* shows a navbar on mobile */
@media screen and (min-width: 800px) { #navbar{ display: none; }}

/* CONTENT */

#navbar {

  font-size: 1.5em;
  text-align: center;

  width: 85vw;
  height: fit-content;

  padding: 5px;
  margin: auto;
  margin-top: -10px;

  color: var(--tertiary-color);
  font-weight: bold;
  text-decoration: underline;

}#navbar:hover {
  color: red;
}

.navtext {
  font-weight: bold;
  text-decoration: underline;
  color: var(--tertiary-color);
}.navtext:hover {
  color: red;
}

/* ascii text that changes on hover */
.ascii {
  cursor:pointer;
  width: fit-content;
  height: fit-content;
  font-size: 0.85em;

}.ascii .ascii_neutral{
  font-family: 'Courier New', Courier, monospace;
  color: var(--text-color);
}.ascii:hover .ascii_neutral {
  color:transparent;
}.ascii .ascii_hover {
  font-family: 'Courier New', Courier, monospace;
  position: absolute;
  color: transparent;
}.ascii:hover .ascii_hover {
  color: var(--text-color);
}


#opencall {

  --background-color: rgb(31, 25, 33);
  --secondary-color: rgb(245, 60, 117);
  --tertiary-color: deepskyblue;

  width: 37%;
  height: 70vh;

  border: 1px dotted var(--border-color);
  background-color:  var(--background-color);
  padding: 15px;

  margin: auto;
  right: 0;
  left: 0;

  width: 40%;

  overflow-y: auto;
  overflow-x: hidden; 
}

#changelog {
  margin: 5px;

  padding: 10px;
  height: 80px;
  width: 160px;
  
  position: relative;
  /* position: absolute; */
  display: inline-block;

  border-color: var(--border-color);
  border: 1px dotted var(--border-color);
  font-size: 0.85em;
} 
#changelogTitle {
  padding:3px; 
  margin: -11px; 
  margin-bottom: 11px; 
  text-align: center; 
  border: 1px solid var(--text-color);
}

#ascii_title{
  width: 100%;
  font-size: 1em;
}

#camera {
  display: inline-flex;
  float: right;
  margin: 5px auto;
}

#artbook {

  display: inline-flex;
  float: right;
  margin: 5px auto;
  margin-right: 30px; /*because the book is bigger on hover */
}

#animation {

  display: inline-flex;
  float: right;
  margin: 5px auto;
  margin-left: 20px;
}

#butterfly {
  
  display: inline-flex;
  float: right;
  margin: 5px auto;
  margin-left: 20px;
}

#ipad {

  display: inline-flex;
  /* float: left; */
  margin: 10px auto;
  margin-left: 20px;
}

/* project balls that change on hover */
.imageball {
  cursor: pointer;
  background-size: contain;
  background-color: var(--text-color);
  background-blend-mode: luminosity;
  
  width: 80px;
  height: 80px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;

}.imageball:hover {
  background-blend-mode: normal;
}

.imageball #hiddenfolksIcon {
  background-blend-mode: multiply;
}

#simmilandIcon {
  display: inline-flex;
  float: right;
  margin: 5px auto;

  background-image: url("images/simmiland.jpg");
}

#hiddenfolksIcon {
  
  display: inline-flex;
  float: left;
  margin: 10px auto;
  margin-top: 40px;
  /* margin-left: 15px; */

  background-image: url("images/hiddenfolksicon.jpg");
}

#galaxyIcon {
  
  display: inline-flex;
  margin: 10px auto;
  /* margin-left: 30px; */
  float: left;
  background-image: url("images/galaxyicon.jpg");
}

#flowerIcon {
  
  display: inline-flex;
  margin: 5px auto;
  float: right;
  background-image: url("images/flowericon.png");
}

#dandelionIcon {
  
  display: inline-flex;
  margin: 5px auto;
  background-image: url("images/dandelionicon.png");
}

#celineandtijmen {
  
  display: flex;
  margin: 5px auto;

  background-image: url("images/tijmenceline2.jpg");
  background-size: contain;
  
  width: 200px;
  height: 200px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
}

#mailme{
  margin: 5px auto;
  margin-bottom: 0px;
  display: inline-flex;
}

#deadprojects{
  margin: 5px auto;
  margin-bottom: 0px;

  padding: 10px;
  display: inline-flex;
}

#peekaboo {
  cursor:pointer;

  display: inline-flex;
  width: 180px;
  height: 210px;
  margin: 5px;

  border-width: 1px;
  border-style: solid;
  border-color: var(--background-color);

  font-size: 3px;
  font-weight: bold;
  letter-spacing: -0.08mm;
  line-height: 1mm;
}#peekaboo #aboo{
  font-family: 'Courier New', Courier, monospace;
  position: absolute;
  color: transparent;
}#peekaboo:hover #aboo{
  color: var(--text-color);
}#peekaboo #peek {
  font-family: 'Courier New', Courier, monospace;
  color: var(--text-color);
}#peekaboo:hover #peek{
  color:transparent;
}

#photo-info{
  display: flex;
}

#photo {
  font-family: 'Courier New', Courier, monospace;
  font-size: 3px;
  font-weight: bold;
  letter-spacing: -0.08mm;
  line-height: 1mm;
}

/* Chrome version 29 and above /// fix for ascii image chrome */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
  #photo {
    line-height: 0.795mm;
  }
  #peekaboo {
    line-height: 0.795mm;
  }
}

#pot {

  display: inline-flex;
  float: left;
  margin: 5px auto;
  margin-left: 30px; /*because the book is bigger on hover */
}

#info {
  font-size: 1.1em;
  float: right;
  margin: auto;
  padding: 15px;
  margin-top: 5px;
  margin-bottom: 5px;

  border-width: 1px;
  border-style: dotted;
  border-color: var(--border-color);
}

#bio {
  padding: 5px;

  margin: auto;
  margin-top: 5px;
  margin-bottom: 5px;

  font-style: italic;
}


@media screen and (max-width: 800px) {
  #main {
    width: 80vw;
  }
  #opencall {
    width: 80vw;
  }
  .row {
    display: none; /* The width is 100%, when the viewport is 800px or smaller */
  }
  #photo-info{
    display: inline;
  }
  #photo {
    text-align: center;
    /* display: inline-block; */
    width: 100%;
  }
  
  #info {
    width: 90%;
    float: none;
    margin: 10px auto;
  }

}

/* don't look: browser specific garbage */

@-moz-document url-prefix() {
  body {
    font-size: 70%;
  }
  #peekaboo {
    line-height: 0.795mm;
  }

  #photo {
    line-height: 0.795mm;
  }
}