@charset "UTF-8";
@font-face {
    font-family: 'PlaakBold';
    src:    url('Fonts/Plaak-46BoldExtended.woff');
    font-weight: normal;
    font-style: normal;
}
@media only screen and (min-width: 1200px) {
  html, body{
    cursor:crosshair;
    height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000000;
  }
  #loading-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  .loader{
    height:200px;
    width:200px;
    position:absolute;
    top:50vh;
    right:0;
  }
  h1{
    display: block;
    font-family: 'PlaakBold';
    font-size: 20pt;
    left:2vw;
    top:0.8vh;
    z-index: 6;
    cursor:pointer;
    position: fixed;
    color: white;
    overflow: hidden;
  }
img, video{
  position:relative;
object-fit: contain;
cursor: url('cursor.png'), auto;
width:100%;
height:100%;
}
.loading-text {
  margin:0 auto;
  position:absolute;
  font-size: 1.4rem;
  color: white;
}
.azeret-mono {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  white-space: normal;
  color:white;
  text-justify:inter-word;
  font-size: 8pt;
  font-style: normal;
}
.azeret-mono5 {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  white-space: normal;
  color:white;
  text-justify:inter-word;
  font-size: 9pt;
  font-style: normal;
}
.azeret-mono2 {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: 10pt;
  color:white;
  font-style: normal;
}
.azeret-mono3 {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-size: 12pt;
  text-decoration-line: underline;
  text-decoration-style:double;
  text-emphasis-style:dot;
  text-decoration-thickness: 1px;
  text-underline-offset: 10px;
  text-decoration-color: white;
  color:white;
  font-style: normal;
}
.azeret-mono3:hover{
  color:orange;
  text-decoration-color: orangered;
}
.azeret-mono4 {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-size: 12pt;
  text-decoration-line: underline;
  text-decoration-style:double;
  text-decoration-thickness: 1px;
  text-underline-offset: 10px;
  text-decoration-color: white;
  color:white;
  font-style: normal;
  margin-right:20px;
  transition: all 100ms ease-out;
}
.azeret-mono4:hover{
  color:orange;
  text-decoration-color: orangered;
  font-weight:300;
}
.puff {
  display:flex;
}
.panel {
  height: 100vh; 
  display: flex;
overflow: hidden;
  justify-content: flex-end; 
  margin: 0; 
}
.extint {
  display:none;
}
.puffmobile {
  display:none;
}
.project{
  width: 70vw; 
  height: 100vh; 
  margin-left: auto; 
  display: flex;
  background-color: #000000;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: center; 
  text-align: center;
  position: relative;
  }
  .desc{
    position:relative;
    left:2vw;
    top:16vh;
    opacity:1;
    transition: all 500ms ease-out;
    width:20vw;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content:flex-start;
    align-items: left;
    text-align: left;
  }
    .menu{
      height:10vh;
      width: 100vw;
      position: fixed;
      display: inline-block;
      text-align: right;
      top: 3.2vh;
      stroke: solid white;
      stroke-width: 2px;
      opacity:1;
      z-index: 5;
      transition:all 100ms ease-out;
      display:block;
    }
    a {
      display: inline-block;
      font-family: 'PlaakBold';
      filter:drop-shadow(1px 1px black);
      font-size: 12pt;
      margin-right: 2vw;
      height:3vh;
      z-index: 999;
      position: relative;
      color: white;
    }
    .proj{
      transition: all 100ms ease-out;
    }
    .proj:hover{
      color:orange;
      text-decoration-line: underline;
      text-decoration-style:double;
      text-decoration-thickness: 1px;
      text-underline-offset: 8px;
      text-decoration-color: orangered;
      font-weight:300;
    }
    .linkbox{
      position:fixed;
      display:flex;
      flex-direction: row;
      align-items: flex-start;
      text-align: left;
      justify-content: left;
      width: 15vw;
      height:5vh;
      bottom:2vh;
      left:2vw;
      overflow: hidden;
    }
}
@media screen and (max-width: 1200px) and (orientation: landscape) {
  html, body{
    cursor:crosshair;
    height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000000;
  }
  #instructions {
    width:80vw;
    text-align:center;
  }
  #loading-screen {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  .loading-text {
    margin:0 auto;
    position:absolute;
    font-size: 0.8rem;
    color: white;
  }
  h1{
    display: block;
    font-family: 'PlaakBold';
    font-size: 0.8rem;
    left:2vw;
    top:0.5vh;
    z-index: 6;
    cursor:pointer;
    position: fixed;
    color: white;
    overflow: hidden;
  }
img, video{
  position:relative;
object-fit: contain;
cursor: url('cursor.png'), auto;
width:100%;
height:100%;
}
.azeret-mono {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  white-space: normal;
  color:white;
  text-justify:inter-word;
  font-size: 0.5rem;
  font-style: normal;
}
.azeret-mono5 {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  white-space: normal;
  color:white;
  text-justify:inter-word;
  font-size: 0.6rem;
  font-style: normal;
}
.azeret-mono2 {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: 10pt;
  color:white;
  font-style: normal;
}
.azeret-mono3 {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-size: 1rem;
  text-decoration-line: underline;
  text-decoration-style:double;
  text-emphasis-style:dot;
  text-decoration-thickness: 1px;
  text-underline-offset: 10px;
  text-decoration-color: white;
  color:white;
  font-style: normal;
}
.azeret-mono3:hover{
  color:orange;
  text-decoration-color: orangered;
}
.azeret-mono4 {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-size: 12pt;
  text-decoration-line: underline;
  text-decoration-style:double;
  text-decoration-thickness: 1px;
  text-underline-offset: 10px;
  text-decoration-color: white;
  color:white;
  font-style: normal;
  margin-right:20px;
  transition: all 100ms ease-out;
}
.azeret-mono4:hover{
  color:orange;
  text-decoration-color: orangered;
  font-weight:300;
}
.puff {
  display:flex;
}
.panel {
  height: 100vh; 
  display: flex;
overflow: hidden;
  justify-content: flex-end; 
  margin: 0; 
}
.extint {
  display:none;
} 
.project{
  width: 80vw; 
  height: 100vh; 
  margin-left: auto; 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: center; 
  text-align: center;
  position: relative;
  }
  .desc{
    position:relative;
    left:2vw;
    top:16vh;
    opacity:1;
    transition: all 500ms ease-out;
    width:16vw;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content:flex-start;
    align-items: left;
    text-align: left;
  }
    .menu{
      height:10vh;
      width: 100vw;
      position: fixed;
      display: inline-block;
      text-align: right;
      top: 1.2vh;
      stroke: solid white;
      stroke-width: 2px;
      opacity:1;
      z-index: 5;
      transition:all 100ms ease-out;
      display:block;
    }
    a {
      display: inline-block;
      font-family: 'PlaakBold';
      filter:drop-shadow(1px 1px black);
      font-size: 0.8rem;
      margin-right: 2vw;
      height:3vh;
      z-index: 999;
      position: relative;
      color: white;
    }
    .proj{
      transition: all 100ms ease-out;
    }
    .proj:hover{
      color:orange;
      text-decoration-line: underline;
      text-decoration-style:double;
      text-decoration-thickness: 1px;
      text-underline-offset: 8px;
      text-decoration-color: orangered;
      font-weight:300;
    }
    .linkbox{
      position:fixed;
      display:flex;
      flex-direction: row;
      align-items: flex-start;
      text-align: left;
      justify-content: left;
      width: 17vw;
      height:5vh;
      bottom:2vh;
      left:2vw;
      overflow: hidden;
    }
}
@media screen and (max-width: 1200px) and (orientation: portrait) {
  html, body{
    cursor:crosshair;
    height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000000;
  }
  #instructions {
    width:80vw;
    text-align:center;
  }
  #loading-screen {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  .loading-text {
    margin:0 auto;
    position:absolute;
    font-size: 0.8rem;
    color: white;
  }
  h1{
    display: block;
    font-family: 'PlaakBold';
    font-size: 0.9rem;
    left:2vw;
    top:0vh;
    z-index: 6;
    cursor:pointer;
    position: fixed;
    color: white;
    overflow: hidden;
  }
img, video{
  position:absolute;
object-fit:cover;
cursor: url('cursor.png'), auto;
width:100%;
height:100%;
}
.azeret-mono {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  white-space: normal;
  color:white;
  text-justify:inter-word;
  font-size: 0.5rem;
  font-style: normal;
}
.azeret-mono5 {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  white-space: normal;
  color:white;
  text-justify:inter-word;
  font-size: 0.9rem;
  font-style: normal;
}
.azeret-mono2 {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: 10pt;
  color:white;
  font-style: normal;
}
.azeret-mono3 {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  margin-top: 15px;
  font-size: 1.2rem;
  text-decoration-line: underline;
  top:20vh;
  text-decoration-style:double;
  text-emphasis-style:dot;
  text-decoration-thickness: 1px;
  text-underline-offset: 10px;
  text-decoration-color: white;
  color:white;
  font-style: normal;
}
.azeret-mono3:hover{
  color:orange;
  text-decoration-color: orangered;
}
.azeret-mono4 {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-size: 12pt;
  text-decoration-line: underline;
  text-decoration-style:double;
  text-decoration-thickness: 1px;
  text-underline-offset: 10px;
  text-decoration-color: white;
  color:white;
  font-style: normal;
  margin-right:20px;
  transition: all 100ms ease-out;
}
.azeret-mono4:hover{
  color:orange;
  text-decoration-color: orangered;
  font-weight:300;
}
.puff {
  display:none;
}
.panel {
  height: 100vh; 
  display: flex;
overflow: hidden;
  justify-content: center; 
  margin: 0; 
}
.extint {
  display:none;
} 
.project{
  width: 120vw; 
  height: 80vh;
  padding-top: 10vh;
  position:absolute;
  }
  span {
    background-color: #000000;
  }
  .desc{
    left:2vw;
    position:absolute;
    opacity:1;
    transition: all 500ms ease-out;
    width:70vw;
    z-index:10;
    flex-direction: column;
    justify-content:flex-start;
    align-items: left;
    text-align: left;
  }
  .desctitle {
    position:relative;
    top:52vh;
  }
  .desctext{
    width:35vw;
    position:relative;
    top:52vh;
  }
    .menu{
      height:6vh;
      width: 100vw;
      position: fixed;
      display: inline-block;
      text-align: right;
      top: 4vh;
      left:0;
      stroke: solid white;
      stroke-width: 2px;
      opacity:1;
      z-index: 45;
      transition:all 100ms ease-out;
      display:block;
    }
    a {
      display: inline-block;
      font-family: 'PlaakBold';
      font-size: 0.9rem;
      margin-right: 2vw;
      filter:drop-shadow(1px 1px black);
      height:3vh;
      z-index: 999;
      position: relative;
      color: white;
    }
    .proj{
      transition: all 100ms ease-out;
    }
    .proj:hover{
      color:orange;
      text-decoration-line: underline;
      text-decoration-style:double;
      text-decoration-thickness: 1px;
      text-underline-offset: 8px;
      text-decoration-color: orangered;
      font-weight:300;
    }
    .linkbox{
      position:fixed;
      display:flex;
      flex-direction: row;
      align-items: flex-start;
      text-align: left;
      justify-content: left;
      width: 70vw;
      height:15vh;
      bottom:0vh;
      left:2vw;
      overflow: hidden;
    }
}