* {
    margin: 0;
    padding: 0px;
    border: 0;
}


/* #262626 */

html {
    font-size: 9px ;
    background-color: #181818;
    color: white;
}



h2{
    position: relative;
    /* top:100%;*/
    transform: translateY(-50%); 
  top: 4.5vh;
  left:-6vw;
    font-family: 'Raleway', sans-serif;
    font-size: 3rem;
    font-weight: 400;

}

h3{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    font-weight: 400;
 
    font-family: 'Raleway', sans-serif;
    font-size: 3em;
    text-align: center;
    width: 130%;
    left: -15%;

} 
.dropShadow {
    width: 100vw;
    height: 18vh;
    background-image: linear-gradient(rgb(26, 26, 26), rgba(0, 0, 0, 0));
    opacity: 1;
    display: block;
    top: 9vh;
    position: fixed;
    z-index: 1;
    opacity: .8;
}
.smallShadow {
    width: 100vw;
    height: 6vh;
    background-image: linear-gradient(rgb(26, 26, 26), rgba(0, 0, 0, 0));
    opacity: 1;
    display: block;
    top: 15vh;
    position: fixed;
    z-index: 3;
    opacity: .5;
}


.header {
    cursor: pointer;
    z-index: 10;
    width: 100vw;
    height: 18vh;
    background-color: #181818;
    display: block;
    position: fixed;
    /* box-shadow: 0px 2px 15px rgba(0,0,0,1); */
}

.themeSelector{
    
    position: absolute;
    width: 100px;
    height: 50px;
    background-color: #2a2a2a;
    top:50%;
    transform: translateY(-50%);
    border-radius: 100vh;
    right: 0;
}
.themeKnob{
    transition: 200ms;

    position: relative;
    width: 40px;
    height: 40px;
    background-color: #bb2727;
    top:50%;
    transform: translateY(-50%);
    border-radius: 100vh;
    left:5px;


}
.knob-light{

left:55px;
}

.topFader{
    width: 100vw;
height: 24vh;
/* background-image:linear-gradient(180deg,rgba(38, 38, 38,1), rgba(38, 38, 38,0)); */
background-image:linear-gradient(180deg,#181818, #18181800);
display: inline-block;  
/* background-color: #262626; */
top:18vh;
position: fixed;
z-index: 52;
}


.titleHolder {
    width: 48vw;
    height: 18vh;
    left: 26vw;
    display: inline-block;
    position: fixed;
    text-align: center;
    font-weight: 800;
    font-family: 'Raleway', sans-serif;
    user-select: none;
    /* box-shadow: 0px 2px 15px rgba(0,0,0,1);  */
}
.titleHolderSmall {
    width: 48vw;
    height: 13.5vh;
    left: 26vw;
    display: inline-block;
    position: fixed;
    text-align: center;
    font-weight: 800;
    font-family: 'Raleway', sans-serif;
    user-select: none;
    /* box-shadow: 0px 2px 15px rgba(0,0,0,1);  */
}
#taglineSmall{
    font-family: 'Raleway', sans-serif;
    /* font-size: 3rem; */
    font-weight: 400;
    font-size: 1.75vh;
    text-align: center;
    width: 100%;
    position: fixed;
    /* top: 100%; */
    transform: translateY(-100%);
    z-index: 350;
    top:19.5vh;
    letter-spacing: .75ch;
    user-select: none;

}
#urlLine{
    font-family: 'Raleway', sans-serif;
    /* font-size: 3rem; */
    font-weight: 400;
    font-size: 1.75vh;
    text-align: center;
    position: fixed;
    left: 3vh;
    /* top: 100%; */
    transform: translateY(-100%);
    z-index: 350;
    top:19.5vh;
    letter-spacing: .75ch;
    line-height: 3ch;
}
#tagline{
    font-family: 'Raleway', sans-serif;
   /* font-size: 3rem; */
    font-weight: 400;
    font-size: 1.75vh;
    text-align: center;
    width: 100%;
    position: fixed;
    /* top: 100%; */
    transform: translateY(-100%);
    z-index: 350;
    top:15vh;
    letter-spacing: .75ch;
    user-select: none;

}
.headerSmall {
    cursor: pointer;
    z-index: 10;
    width: 100vw;
    height: 13.5vh;
    background-color: #262626;

    background-color: #181818;
    
    display: block;
    position: fixed;
    /* box-shadow: 0px 2px 15px rgba(0,0,0,1); */
}

.letters{

  /* //  background-color: rgb(172, 255, 155); */
    transform: translateY(-50%);
    top:calc(50% - .75em);
position: relative;

}


span {
    font-size: 15rem;
    letter-spacing: .2ch;

}

.grid {
    position: relative;
    width: 27vw;
    top: 36vh;
    height: 600vh;
    left: 36.5vw;
    z-index: 2;
    /* background-color: aqua; */
}
canvas{
position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);

}
.item {
    position: relative;
    display: inline-block;
    /* background-color: red; */
    width: 6vw;
    height: 6vw;
    cursor: pointer;
    margin: 1.5vw;
    transition: 200ms;
    /* transform 200ms, opacity 200ms; */
    opacity: .85;
}
.item:hover{
 /* transform: scale(1.025);; */
 transform: translateY(-1vh);
    opacity: 1;
    /* width: 5.8vw;
    height: 5.8vw;
    margin: 1.6vw; */


}
.item:hover .itemTitle {
    transform: scale(1.25);


}
.itemTitle{
    transition: 400ms 200ms;
    /* background-color: rosybrown; */
bottom:-6vh;
position: absolute;
    width: 6vw;
    height: 6vh;
    display:inline-block;
    text-align: left;
/* background-color: rebeccapurple; */
}
.spacer{
    position: relative;
    display: inline-block;
    width: 36vw;
    height: 3vw;
    /* background-color: rgba(65, 105, 225, 0.26); */
    vertical-align: middle;
}
.footer{

    width: 100vw;
height: 24vh;
background-image:linear-gradient(#18181800, #181818);
display: inline-block;  
position: fixed;
bottom : 6vh;
z-index: 12;
}
.bottomMenu{
    height: 6vh;
    width: 100vw;
    background-color: #252525;
    background-color: #181818;

position: fixed;
z-index: 20;
bottom: 0px;
justify-content: center;
align-items: center;
display: flex;
}

.bottomItem{
    width: 6vh;
    width: 6vh;
    position: relative;
    background-color: red;
    display: flexbox;
    margin-left:3vh;
    margin-right:3vh;
}

.logo{
    position: fixed;
    height: 12vh;
    top:1.5vh;
left:1.5vh;
    z-index: 15;
    user-select: none;
pointer-events: none;
transform: scale(.65);

}
.logoSmall{
    user-select: none;
pointer-events: none;
    position: fixed;
    height: 9vh;
    top:1.5vh;
left:1.5vh;
    z-index: 15;
}

img{
position: relative;
}

#justaplatformer{
    background-image: url("/justaplatformer/Icon2.png");
    background-size:cover;
image-rendering: crisp-edges;
  /* IE, only works on <img> tags */
  -ms-interpolation-mode: nearest-neighbor;
  /* Firefox */
  image-rendering: crisp-edges;
  /* Chromium + Safari */
  image-rendering: pixelated;
}
.light-fg{
    opacity: .2;
transform: translate(200px);
}

.light-bg{
    background-color: #c3c3c3;
    background-color: #d1d1d1;

}

.light-text{
    color: rgb(26, 26, 26);
}
.fader-up{
    background-image:linear-gradient(180deg,#d1d1d1, #d1d1d100);

}
.fader-down{
    background-image:linear-gradient(#d1d1d100, #d1d1d1);

}

.tx{

}