@font-face {
  font-family: "pica";
  font-style: italic;
  src: url("fonts/FeDPit2.ttf")
}

@font-face {
  font-family: "pica";
  font-style: normal;
  src: url("fonts/FeDPrm2.ttf")
}

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

@font-face {
  font-family: 'garamond';
  src: url('fonts/garamond-semibold.otf');
}

* {
  margin: 0;
  padding: 0;
}

section {
  height: 100vh;
}


#loading {
  height: 100vh;
  display: flex;
  justify-content: center;
}

#loading img{
  height: 20vh;
  width: auto;
  
  display: block;
  margin: auto;
  transition: 1s;
  user-select: none;
}

#currentImage {
  position: fixed;
  font-size: 13px;
  color: #5b5b5b;
  cursor: default;
  bottom: 8vh;
}


.titles {
  display: flex;
  position: fixed;
  width: 80%;
  padding-left: 10%;
  padding-right: 10%;
  text-align: center;
  top: 0;
  opacity: 0;
  transition: 1s;
  font-size: 20px;
}
.titles h1 {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
  font-size: 2.4vw;
}
.titles span {
  font-size: 30px;
  color: #5b5b5b;
}


.spacer-title {
  font-family: 'pica';
  font-style: italic;
  color: #16469d;
}
.fictional-title {
  font-family: 'voila';
}

#images {
  display: flex;
  overflow: scroll;
  margin-top: 12vh;
  height: 80vh;
  margin-bottom: 8vh;
}
#images img {
  height: 100%;
  width: auto;
  margin-right: 10px;
}


.projects {
  display: flex;
  padding: 0 10%;
  font-size: 22px;
  display: none;
}

.spacer-plots {
  font-family: 'garamond';
}

.projects h1{
  text-align: center;
  transition: 1s;
}


.projects img {
  width: 100%;
}

.spacer-documentation, .fictional-documentation {
  width: 50%;
  overflow: scroll;
}

.spacer-documentation {
  color: #16469d;
  font-family: 'pica';
  padding-right: 14px;
}

.spacer-documentation * {
  margin-bottom: 80px;
}


.spacer-documentation h3 {
  text-align: center;
}

.spacer-description {
  margin-top: 100px;
}

.spacer-plot {
  padding: 0 15%;
}

.spacer-plot * {
  margin-bottom: 30px;
}

.spacer-plot h5{
  text-align: center;
}

.spacer-plot h3 {
  margin-bottom: 0;
}

.spacer-plot img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.spacer-plot p {
  font-size: 16px;
}

.spacer-plot sup, .spacer-plot .dish-components {
  font-family: 'pica';
  color: #16469d;
}

.spacer-plot .dish-components {
  font-style: italic;
}

.village-party {
  color: #00adef;
}

.kebabs-palace {
  color: #d2232a;
}

.jan-kalata {
  color: #41ad49;
}

.cube {
  color: #f68a1f;
}

.fictional-documentation {
  padding-left: 14px;
}

.fictional-documentation * {
  margin-bottom: 80px;
}

.fictional-documentation video {
  width: 100%;
}

.fictional-documentation h1 {
  font-family: 'voila';
}

.body-title {
  visibility: hidden;
}

img.fictional-description {
  width: 65%;
  display: block;
  margin: auto;
  margin-bottom: 80px;
}

img.sticker {
  width: 25%;
  display: block;
  margin: auto;
  margin-bottom: 80px;
}

@media screen and (max-width: 700px) {
  .titles {
    width: 100%;
    padding: 0;
    position: absolute;
  }
  .titles h1 {
    font-size: 4vw;
  }
  .titles span {
    font-size: 0px;
  }
  .fictional-title {
    text-align: right;
    padding-right: 10px;
  }

  h1.spacer-title{
    text-align: left;
    justify-content: left;
    padding-left: 10px;
  }

  #loading img {
    height: 20vh;
    max-height: 80vh;
  }
  .fictional-documentation, .spacer-documentation {
    width: 100%;
    padding: 0;
  }
  .body-title {
    visibility: visible;
  }
  .spacer-plot {
    padding: 0;
  }

  .spacer-documentation {
    border-bottom: 3px solid #5b5b5b;
  }
  .fictional-documentation {
    padding-top: 100px;
  }
  
}