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

@font-face {
    font-family: 'DatalegreyaDot';
        src: url('/datalegreya-font/font-files/Datalegreya-Dot/Datalegreya-Dot.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
      }

body
{
    padding: 0;
    margin: 0;
    
    font-family: nowregular, sans-serif;
    overflow-x: hidden;
    
    background-color: #181818;
    /*background-color: #ebfdff;*/
    color: white;
}

a
{
    color: #ffe030;
}

a:visited
{
    color: #ffe030;
}

.hidden{
    display: none;
}

/* for the scroll bar */

/* width */
::-webkit-scrollbar {
    width: 9px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #444; 
    width: 3px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #f1f1f1;
}

/* load animation */
div.load-animation{
    padding: 0;
    margin: 0;
    position: absolute;
    
    transition: 0.5s ease;
    margin: 28vh 0 0vh;
}
canvas#initiate{
    width: 18vmin;
    height: 18vmin;
    position: relative;
    left: 50vw;
    margin-left: -9vmin;
}

/* the animation stuff */
@keyframes fade-in{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fade-out{
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.animate-fade-in{
    animation-name: fade-in;
    animation-duration: 0.6s;
    animation-timing-function: ease;
}
.animate-fade-out{
    animation-name: fade-out;
    animation-duration: 0.6s;
    animation-timing-function: ease;
}

div#actual-site{
    transition: 0.5s ease;
    position: relative;
}

/* tops */
div.top{
    text-align: center;
    min-height: 20vmin;
}

div.wrapp{
    text-align: center;
    margin: 4vh 0 0vh;
}

div.top-logo{
    width: 18vmin;
    height: 18vmin;
    background-image: url("/hornet's_nest_logo.svg");
    background-size: contain;
    text-align: center;
    position: relative;
    left: 50vw;
    margin-left: -9vmin;
    z-index: -999;
}

h1.title{
    font-family: nowregular;
    font-size: 2.8rem;
    font-weight: normal;
    text-align: center;
    padding: 2vh 0 0vh;
    margin: 0;
}
h2.title2{
    font-family: nowregular;
    font-size: 1.15rem;
    font-weight: normal;
    text-align: center;
    padding: 0 15vw;
    margin: 0;
}

div.desc-pics{
    position: relative;
    height: 100vh;
    overflow: hidden;
    
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    

}

div.desc-pics .div-3js-vas-contain {
    z-index: -999;
    position: absolute;

    background-color: rgba(0, 0, 0, 0.5);
    background-image: url("pexels-erik-schereder-nightskyaurora.jpg");
    background-blend-mode: darken;
    background-size: cover;
    background-position: center 74%;

    height: 100%;
    width: 100%;
}

/* the canvas for the 3d scene */
div.desc-pics .canvas-3js {
    position: absolute;
}

div.desc-words{
    float: left;
    margin-left: 3vw;
    margin-top: 4vh;
    padding: 15px;
    line-height: 1.5;
    border-top: 2px white solid;
    border-left: 1px solid white;
}

div.desc-pics h1{
    padding: auto;
    margin: 0;
    font-size: 5.4vh;
    text-align: center;
    text-shadow:1px 1px 7px #fff, 1px 1px 70px #ddd;
    
    padding-top: 5vh;
    
    font-variant: small-caps;
}

div.desc-pics h2 {
    padding: auto;
    margin: 0;
    position: absolute;
    font-size: 5.1vh;
    font-family: 'DatalegreyaDot';

    right: 14vw;
    top: 27vh;
    
    transform: skew(-0deg, -5deg) rotate(5deg);
}

div.desc-pics h2 div {
    font-size: 125%;
    color: #ccffff;
    font-family: 'DatalegreyaDot';
    display: inline-block;
}

div.desc-flex{
    position: absolute;
    left: 0vw;
    height: 100%;
    width: 100%;
}

div.desc-pic{
    background-size: cover;
    background-position: center;
    
    width: calc(96vh / 9 * 16);
    height: 96vh;
    
    position: absolute;
    left: 2vw;
    bottom: 0;
}

div.desc-pic .canvas-3js-sprite {
    position: absolute;
    width: calc(96vh / 9 * 16);
    height: 96vh;
    
    z-index: 0;
    
    background-color: transparent;
}


div.desc-pic .d-screen {
    position: absolute;
    width: 14%;
    height: 15%;
    padding: 0.3%;
    
    font-family: monospace;
    font-size: 0.9vh;
    color: #ccffff9f;
    
    background-color: #ccffff2f;
    border: 0.3vh solid #ccffff7f;
    
    top: 42%;
    left: 3.5%;
    
    overflow-y: hidden;
    display: flex;
    flex-direction: column-reverse;
    
    transform: skew(4deg, 3deg) scale(-1, 1);
    
    z-index: 3;
    
    /*
    animation-name: bobble-d-screen;
    animation-duration: 2400ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
    animation-direction: alternate;
    */
}

div.desc-pic .d-screen .inner-wrap {
    
}

@keyframes bobble-d-screen {
    from {
        top: 42%;
    }
    to {
        top: 44%;
    }
}


div.kevvol-ring-bg{
    position: absolute;
    width:  80vmin;
    height: 80vmin;
    left: 3vw;
    top: 6vh;
    
    background-size: contain;
    background-image: url(/ring_glo.png);

    animation-name: spin;
    animation-duration: 120000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
    
    opacity: 0.9;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

canvas.spr{
    position: absolute;
    width: 48vmax;
    height: 48vmax;
    left: 4vmax;
    top: 0vmax;
}

#play-mus {
    position: absolute;
    font-size: 2.0em;
    padding: 0.4em 0.6em;
    border-radius: 2px;
    min-height: 2.5em;
    min-width: 8em;
    
    background-color: transparent;
    
    border: 2px solid #ccffff7f;
    color: #ccffffdf;
    background-color: #ccffff2f;
    
    right: 18vw;
    top: 52vh;
    
    transition: 0.5s ease;
}

#play-mus:hover {
    background-color: #ccffff5f;
}
#play-mus:active {
    background-color: #ddffff6f;
}
.gradi-box {
    position: absolute;
    width: 100%;
    height: 4%;
    bottom: 0;
    
    background: rgba(255,255,255,0);
    background: linear-gradient(0deg, rgba(24,24,24,1) 0%, rgba(255,255,255,0) 100%); 
}

/* the sections after the top */
div.intro {
    font-size: 107%;
}

div.intro .tyl {
    text-align: center;
    color: #c0ffff;
}
div.intro h4 {
    margin: 0;
    color: #c0ffff;
    font-size: 126%;
}

div.section{
    padding: 2em 6vw;
    line-height: 1.5;
    
    position: relative;

    overflow-x: auto;
}

div.section h2{
    font-weight: normal;
    font-size: 1.6em;
    color: #ffff40;
}

span.subb{
    font-size: 0.9em;
    color: lightgray;
}

div.section h3{
    margin: 2vh 0.5vw 0.3vh;
    font-size: 1.3em;
    font-weight: normal;
    color: #c0ffff;
}

div.proj{
}

div.prada{
    text-align: center;
}

div.flexian{
    margin: auto;
    display: flex; 
    flex-direction: row;
    width: 84vw;
    height: 30vh;
}

div.flexian div.flexer{
    flex: 1;
    border-left: 1px solid grey;
    transition: 0.7s ease;
    background-size: cover;
}

div.flexian div.flexer:hover{
    flex: 4;
}

div.boxxx{
    border: 3px inset #9fb;
    padding: 2px;
    width: 40vw;
}

div.pac{
    width: 40vw;
    height: 20vw;
    background-size: cover;
    background-position: center;
}

div.clear{
    clear: both;
    padding: 5vh 0;
}
div.lef{
    float: left;
}

div.rig{
    float: right;
}

div#spysim {
    background-image: url(spyballoonsim.png);
}
div#am{
    background-image: url(screenshot-www.arcanamathematica.com.png);
}
div#skill{
    background-image: url(coursedelta.png);
}
div#empty{
    background-image: url(emptyrooms.png);
}
div#matr{
    background-image: url(matrixe.png);
}

div.proj-desc{
    padding: 9px;
    margin: 2.15vh;
    border-left: 3px double #9fb;
    border-top: 2px solid #9fb;
    width: 42vw;
    font-size: 0.9em;
}

div.proj-desc h2{
    color: #9fb;
    font-size: 1.4em;
    margin: 0;
}

div.proj-desc a, div.other-proj a{
    color: #8ff;
    font-size: 0.9em;
}

div.other-proj h3{
    margin: 1vh 0;
}

div.minor-proj-gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    
    text-align: center;
}

div.minor-proj-demo {
    position: relative;
    width: 40em;
    height: 22.5em;
    
    margin: 1.3em;
    
    background-size: cover;
    background-position: center;
    border: 2px inset #9fb;
}

div.minor-proj-demo div.minor-titl {
    text-align: center;
    background-color: #181818af;
    font-size: 135%;
    position: relative;
    top: calc(80% - 2em);
    height: 15%;
    padding: 0.6em 0;
    
    transition: 0.5s ease;
    
    border-top: 2px solid white;
}

div.minor-desc {
    display: none;
    font-size: 75%;
    opacity: 0;
    transition: 0.5s ease;
}

div.minor-proj-demo:hover div.minor-titl, div.minor-proj-demo:active div.minor-titl {
    height: 55%;
    top: calc(42% - 2em);
    background-color: #181818f8;
}
div.minor-proj-demo:hover div.minor-titl div.minor-desc, div.minor-proj-demo:active div.minor-titl div.minor-desc {
    display: block;
    opacity: 1;
    padding-top: 1.3em;
}

div.foote{
    text-align: center;
}

div.words {
    font-size: 1.15em;
}

img.art-section-imgs {
    height: 83vh;
    margin: 0.8em;
    float: left;
}

/* for the mobile */
@media only screen and (max-width: 1250px), screen and (orientation: portrait)
{
    div.desc-pics{
        width: 100vw;
        height: 100vh;
    }

    div.desc-pics h1 {
        padding-top: 4vh;
    }
    div.desc-pics h2 {
        font-size: 7.9vmin;
        bottom: 2vh;
        right: 5vw;
        top: auto;
        
        z-index: 3;
    }
    
    div.desc-flex{
        left: 0;
    }
    div.desc-pic{
        width: calc(92vh / 9 * 16);
        height: 92vh;
        
        left: calc(5vw - 12vh);
    }
    
    div.desc-pic .canvas-3js-sprite {
        width: calc(92vh / 9 * 16);
        height: 92vh;
    }
    
    #play-mus {
        display: none;
    }
    
    .gradi-box {
        height: 25%;
    }
    
    div.kevvol-ring-bg{
        width: 80vh;
        height: 80vh;
    }
    canvas.spr{
        width: 80vmin;
        height: 80vmin;
    }
    img.code-txt{
        width: 47vmin;
        top: 7vmin;
    }
    div.desc-words{
        float: none;
        position: relative;
        top: 63vmax;
    }
    
    
    div.section {
        padding: 2em;
    }
    
    .lef, .rig{
        float: none;
    }
    div.boxxx{
        float: none;
        width: 80vw;
    }
    div.pac{
        width: 80vw;
        height: 40vw;
    }
    div.proj-desc{
        width: 76vw;
        float: none;
        margin-left: 0;
    }
    
    img.art-section-imgs {
        height: 86vmin;
        margin: 0.8em;
        float: left;
    }
}