@font-face {
    font-family: Moderniz;
    src: url("/font/Moderniz.otf") format("opentype");
}

@font-face {
    font-family: Zephyrea;
    src: url("/font/zephyrea.ttf") format("truetype");
}
@font-face {
    font-family: Squarish;
    
    src: url("/font/ZF2334Squarish-Regular.otf") format("opentype");
}
@font-face {
    font-family: Squarish;
    font-weight: bold;
    src: url("/font/ZF2334Squarish-Bold.otf") format("opentype");
}
@font-face {
    font-family: Squarish;
    font-weight:bolder;
    src: url("/font/ZF2334Squarish-Hairline.otf") format("opentype");
}
@font-face {
    font-family: Squarish;
    font-weight: lighter;
    src: url("/font/ZF2334Squarish-Light.otf") format("opentype");
}
@font-face {
    font-family: AnimeAce;
    font-weight: lighter;
    src: url("/font/AnimeAce3BB_Regular.otf") format("opentype");
}
@font-face {
    font-family: AnimeAce;
    font-weight: bold;
    src: url("/font/AnimeAce3BB_Bold.otf") format("opentype");
}
@font-face {
    font-family: AnimeAce;
    font-style:italic;
    font-weight:normal;
    src: url("/font/AnimeAce3BB_Italic.otf") format("opentype");
}
@font-face {
    font-family: AnimeAce;
    font-style:italic;
    font-weight:normal;
    src: url("/font/AnimeAce3BB_BoldItalic.otf") format("opentype");
}
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
:root {
  --color-dev: #E9FF5D; /* set a value "red" to the "color" variable */
  --color-shader:#FE5F55;
  --color-model:#EA8FDF;

}
html.currentmodel .menubutton,html.currentmodel #logo,html.currentmodel .software,html.currentmodel #videobg,html.currentmodel .sidetext {
  transition:.5s linear;
  filter: hue-rotate(0deg);
}
html.currentshader .menubutton,html.currentshader #logo,html.currentshader .software,html.currentshader #videobg,html.currentshader .sidetext {
  transition:.5s linear;
  filter: hue-rotate(90deg);
}
html.currentdev .menubutton,html.currentdev #logo,html.currentdev .software,html.currentdev #videobg,html.currentdev .sidetext {
  transition:.5s linear;
  filter: hue-rotate(-50deg);
}

/* html.currentmodel .projecttitle {
    transition:.5s ease;
  background-color:var(--color-model);
}
html.currentdev .projecttitle {
    transition:.5s ease;
background-color:var(--color-dev);
}
html.currentshader .projecttitle {
    transition:.5s ease;
background-color:var(--color-shader);
} */


body {
  color: #111;
  background-color: #222222;
  font-family: Squarish;
  line-height: 1.5;
  width:100vw;
  margin:0%;

}
h0, h1, h2, h3{
  font-family: Moderniz;
}
h0{
  font-size:4vh;
}
header {
 /* border-bottom: 1px solid #222;
  margin-bottom: 1rem;*/

}

footer {
 /* border-top: 1px solid #222;
  margin-top: 1rem;*/
}

a {
  color: #EA8FDFFF;
  text-decoration: none;
}

/*
div.layer{
  /*padding: 2%;
  opacity:.4;
  position:fixed;
  top: 110px; 

  width: 70%;
  height: 100%;

  overflow-y:scroll;
} */
.colorbar{

  flex:1;
  height:100%;


  min-height: 100vh;
}
.colorbar#model,.layer#model{

  background: linear-gradient(180deg, transparent 0%,  transparent 10%, var(--color-model) 20%, var(--color-model) 90%,transparent 100%);
}
.colorbar#shader,.layer#shader{
background: linear-gradient(180deg, transparent 0%,  transparent 10%, var(--color-shader) 20%, var(--color-shader) 90%,transparent 100%);

}
.colorbar#dev,.layer#dev{
background: linear-gradient(180deg, transparent 0%,  transparent 10%, var(--color-dev) 20%, var(--color-dev) 90%,transparent 100%);

}

.layer{
  display:flex;
  width:100%;
  min-height: 100vh;

}



.layer >.contents{
  flex:100;
  padding:3%;
  
  padding-top: 13vh;
  background-color:rgba(0, 0, 0, 0.85);
  height:100%;
  min-height: 100vh;
  color:rgba(214, 214, 214, 0.8);
  font-size: 1.4em;
}
/* .layer#introduction{
  height:30vh;
  min-height:30vh;
}
.layer#introduction >.contents{
  min-height:0vh;
  
} */

.layer#model h1 {
  color:var(--color-model);
  
}

.layer#shader h1{
 
  color: var(--color-shader);
  
}

.layer#dev h1 {

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

div.selected{
  z-index: 5;
  opacity: 1;
}

/* .layer-sidebar{
  width: 130px;
  position: fixed;
  z-index:100;
}

.layer-sidebar button{
  font-size: .9em;
  margin: 0 0.5em;
  color:white;
  background-color: black;
} */

.sidebar{
  position:absolute;
  /*display: inline-block;*/
  height:100vh;
   width: 34vw; 
   z-index:-2;
}

internal{
  /* background-image: url("/lyns_bg.png"); */
  /* display: block; */
   width:24vw; 
  position: fixed;
  z-index: 100;
}

.content{
  overflow-x: hidden;
  position:absolute;
  left: 24vw;
  color:#c8c4c8;
  display:block; 
  background-color: #100a0f;
  /* padding:2%; */
  width:76vw;
  height:100%;
  z-index: 2;
  
}


#videobg{
  position:fixed;
  z-index: -100;
  height:100vh;
}
gallery{
  display: flex; /* or inline-flex */
  flex-wrap: wrap;
  flex-direction: row;
}
thumb:hover{
  height:100%;
      transition:.1s ease;
}
thumb{

  position: relative;
  display: inline-block;
  height:100%;
 
  /* width:20em;
  height:20em; */
  /* align-content: center; 
  overflow:hidden;
  background-clip:padding-box; */
  /*border-radius:50px; /* this makes it a circle wow*/
}

thumb img{
  display:block;
  vertical-align: middle;
  height: 100%;

}
.brick video{
  opacity: 0;
}
.brick video:hover{
  opacity:1;
  transition: .5s ease;
}
/* .filtered{
  opacity: 1 !important;

}
.filtermodel{
transition:.2s ease;
opacity:.1;

}
.filterdev{
transition:.2s ease;
opacity:.1;

}
.filtershader{
transition:.2s ease;
opacity:.1;

} */


imgtitle{
    transform-origin: center left;
    /* transform:translateY(0%)perspective(13rem)rotateY(20deg)rotateZ(-2.4deg)scale(200%,1); */
  /* transform:translateY(-50%)rotateX(-90deg);  */
 
  /* transform:rotateZ(1rem); */
  font-size: 3em;
  height:0%;
  font-family: Moderniz;
  /* opacity:0; */
  position:absolute;
  vertical-align: text-bottom;
  z-index: 30;

  width:100%;
  top:0;
  transition:.5s ease;
  background-color: #100a0f;
  transform:scale(1,0);
  }
thumb:hover imgtitle{
/* 
  transform:scale(1,1);
  
  height:10%;

    transition:.5s ease; */
 /* transform:rotateY(24deg); */
}

row {
  flex-direction: row;
  flex: 20%;
  max-height: 40vh;
  flex-wrap: wrap;
  padding-top:4px;
  
}


column {
  flex-direction: column;
  display: flex;
  
  padding: 0 4px;

}

/* Responsive layout - makes a two column-layout instead of four columns
@media screen and (max-width: 800px) {
  row {
    flex: 50%;
    max-height: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
/* @media screen and (max-width: 600px) {
  row {
    flex: 100%;
    max-height: 100%;
  }
} */ 

/* sidebar stuff */
/* nav{
  position: absolute;
    z-index: -100;
   width: 34vw; 
   margin-left: -5vw;
} */
.sidetext{
  color:lab(77.07% 29.41 -17.39);
}
.subtitle{

  margin-bottom:10%;
  
  display:block;
  text-align: right;
  font-size: 1.8vw;

  text-transform: lowercase;
  transform: rotate(-20deg)
             skew(-20deg);
}
menubuttons{
  position:absolute;
  z-index:-2;
  width:120%;
 
}

.menubutton {
  filter:none;
  font-family: Zephyrea;

  display:flex;
  align-items: right;
  font-size: 2.5vw;

  text-transform: lowercase;
  transform: rotate(-20deg)
             skew(-20deg);
  background-color: #100a0f;
  width:100%;
  margin-left:-10%;
  text-align:right;
 flex-wrap: wrap;
 flex-direction: column;
 flex-flow: column;
}
.contact{
  display: inline-block;
  margin-top: 5%;
  background-color: transparent;
  font-family: Squarish;
  overflow: hidden;
  height: 4vw;
 transition:.5s ease;
}
.contact:hover{
  background-color: #100a0f!important;
}
.contact a{
  color:lab(77.07% 29.41 -17.39);
  transform:scale(1,1)!important;
   margin-right: 10% !important;
    text-transform: lowercase;
    font-size: 2.5vw;
}
.email{
  color:#9b939b;
  font-size: 2vw;
  margin-right:9%;
  padding-bottom: 4%;
}
.menubutton a{
  margin-left: auto; 
  margin-right: 15%;
  
  
  
  filter:drop-shadow(-2px -2px 0px #2c2c75);
  /* transform: skew(50deg) scale(2,1) ; #c462fd */
  transform:scale(1.5,1);
  /* width:100%; */
  /* pointer-events: none; */
  
}
.contactshow{
  transition:1s ease;
  background-color: #100a0f;
  height:100%;

}
.contactshow:hover{
    background-color: #100a0f!important;
      margin-left:-10%!important;
}
.menubutton:hover {
       margin-left:-8%;
    transition:.1s ease;
  background-color: #2c2c75;
}
.active a{
  filter:none;
  color:#100a0f;
  transition:.5s ease;
}
.active#mbmodel{
  filter:none;
background-color: var(--color-model);
  transition:.5s ease;
}
.active#mbdev{
   filter:none;
    transition:.5s ease;
 background-color: var(--color-dev);
}
.active#mbshader{
  filter:none;
    transition:.5s ease;
 background-color: var(--color-shader);
}
.flexspacer{
  display:flex;
  flex:2;
  flex-grow:3;
}
.layerplanecontainer{
  display: flex;
  flex:2;
}
.layerplane{

  transform: skew(50deg);
  position: absolute;
	width: 80px;
	height: 50px;
  bottom: 18px;
  left:30px;
	background: red;
}
.layerplaneshadow{
	width: 100px;
	height: 50px;
	transform: skew(50deg);
	background: blue;
}

layer{
  background-color: red;
  width:100%;
  padding-top:20vh;
}

#logo{
  width: 90%;
  margin:5%;
  margin-bottom: -10%;

}
#logo:hover{
  width:92%;
  transition: .2s ease;
}
/* :root{
  filter: hue-rotate(90deg);
}
.layer{

  filter: hue-rotate(-90deg);

} */

.undermenu{
  position:absolute;
  top:50vh;
}

.projecttitle{
  position:fixed;
  top:0;
  color: #e8e8e8;
  background-color: #100a0f;
  width: 100vw;
  /* height: 8vh; */
  margin-left:.7%;

  z-index: 20;
}

.projecttitle h3{
  font-family: Squarish;
  margin-bottom:-1vh;
  margin-top:-1%;
  font-size: 2.5vh;
  font-weight: lighter;
  color:#747474;
}
.projecttitle .texts{
    padding:2%;
    padding-bottom: 0;
}
.software{
  background-color:#3b2438;
  background:linear-gradient(90deg,transparent 0%,#201423 3%);
  width:100%;
  padding-top:.3%;
  padding-left:2%;
  
}
.softwareicon{

  filter:contrast(1)
  grayscale();
  opacity:.5;
  max-height: 2.5vh;
}
.type{
  display: inline-block;
  font-family: Squarish;
  margin-top:-10vh;
  font-size: 2.5vh;
  font-weight: lighter;
  color:#a1a1a1;

}
.aboutme{
  font-family: AnimeAce;
  display:flex;
  font-size:2vh;
  margin:2vw;
  margin-bottom:0px;
  height:40vh;
}
.aboutdiv{
  font-family:Squarish;
}
.aboutme h1, .aboutme h2, .aboutme h3{
  font-family: AnimeAce;
  margin:0;
}
#portrait{
  height:100%;
}