/********* NAVIGATION LINKS *********/

#hello-my-name-is{
    position: fixed;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 1px rgb(59, 6, 39);
    /* text-shadow: 1px -1px 1px rgb(0, 0,255), -1px 1px 1px rgb(0, 255, 0), -1px -1px 1px rgb(255,0,0); */
    /* left: 100px;
    top: 200px; */
    top: 40vh;
    left: 10vw;
    font-size: 80px;
    font-family:'Kavivanar';
    text-align: left
}  

#what-i-do{
    position: fixed;
    color: white;
    text-shadow: 1px 1px 1px rgb(59, 6, 39);
    /* left: 105px;
    top: 300px; */
    top: 57vh;
    left: 10vw;
    font-size: 23px;
    font-family:'Inconsolata';
    text-align: left;
}

#nitty-gritty{
    position: fixed;
    color: white;
    right: 10px;
    top: 10px;
    font-size: 18px;
    font-family:'Inconsolata';
    text-align: left;
}

#ng-link:link{
    color: white;
    opacity: .7;
    text-decoration: none;
}

#ng-link:visited{
    color: white;
    opacity: .7;
    text-decoration: none;
}

#ng-link:hover{
    color: white;
    opacity: 1;
    font-style: italic;
    text-shadow: 1px -1px 1px rgb(0, 0,255), -1px 1px 1px rgb(0, 255, 0), -1px -1px 1px rgb(255,0,255);
}

#ng-link:active{
    color: white;
    opacity: 1;
    font-style: italic;
    text-shadow: 1px -1px 1px rgb(0, 0,255), -1px 1px 1px rgb(0, 255, 0), -1px -1px 1px rgb(255,0,255);
}

#ng-link-active {
    color: white;
    text-decoration: none;
    opacity: 1;
    font-style: italic;
    text-shadow: 1px -1px 1px rgb(0, 0,255), -1px 1px 1px rgb(0, 255, 0), -1px -1px 1px rgb(255,0,255);
}

/* test class for dynamic link positioning >> dummy values to be overwritten by JS */
.test-node{
    top: 10vh;
    left: 10vw;
}

.wid-link:link{
    color: white;
    text-decoration: none;
}

.wid-link:visited{
    color: white;
    text-decoration: none;
}

.wid-link:hover{
    /* color: white; */
    font-style: italic;
    text-shadow: 1px -1px 1px rgb(0, 0,255), -1px 1px 1px rgb(0, 255, 0), -1px -1px 1px rgb(255,0,255)
    /* addtl text shadow: 5px 10px 1px rgb(28, 30, 31); */
}

.wid-link:active{
    font-style: italic;
    text-shadow: 1px -1px 1px rgb(0, 0,255), -1px 1px 1px rgb(0, 255, 0), -1px -1px 1px rgb(255,0,255);
    /* addtl text-shadow: 5px 10px 1px rgb(28, 30, 31); */
}

/********* PROJECT TYPE-SPECIFIC STYLING *********/
.audio-proj{
    color: white;
    /* visibility: hidden; */
}

.text-proj{
    color: white;
    /* visibility: hidden; */
}

.play-proj{
    color: white;
    /* visibility: hidden; */
}

.space-proj{
    color: white;
    /* visibility: hidden; */
}


/********* ANCHOR PAGE DEFAULTS **********/

/* text block default */
.info {
    position: absolute;
    font-family:'Inconsolata';
    text-align: left;
    font-size: 15px;
    color: white;
    opacity: .7;
}

/* mobile text default >> not in use, can't hook up to mobile.html for some reason?) */
/*.infomobile {*/
/*    position: absolute;*/
/*    font-family:'Inconsolata';*/
/*    text-align: left;*/
/*    font-size: 40px;*/
/*    color: white;*/
/*    opacity: .7;*/
/*}*/

.caption {
    position: fixed;
    font-family:'Inconsolata';
    text-align: left;
    font-size: 10px;
    color: white;
    opacity: .6;
}

/********* PROJECT "POP-UPs" **********/

.popup {
    display: none;
    position: fixed;
    z-index: 1;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 0, 0, .7); /* actually "fade-out" background */
    justify-content: center;
    align-items: center;
}

.popup-content{
    background: white; /* should randomize also a la hightlights?? tbd, white as default for now */
    z-index: 1;
    opacity: .9;
    padding: 12px;
    width: 65%; 
    /* height: 90%; */
    border-radius: 2px;

}

.popup:target {
    display: flex;
}

.popup-heading {
    /* position: relative; */
    font-family:'Kavivanar';
    top: 10px;
    text-align: left;
    font-size: 25px;
    color: black;
}

.popup-details {
    /* position: relative; */
    font-family:'Inconsolata';
    text-align: left;
    font-size: 10px;
    font-style: italic;
    color: black;
}

.popup-text {
    position: relative;
    font-family:'Inconsolata';
    text-align: left;
    font-size: 14px;
    color: black;
}

.popup-text:link {
    color: black;
}

.popup-close{
        position: relative;
        padding: 5px;
        font-family:'Inconsolata';
        text-align: left;
        font-style: italic;
        /* text-decoration: none; */
        top: 10px;
        font-size: 11px;
        color: black;
}

.popup-close:hover {
    letter-spacing: 4px;
}

.popup-hero {
    position: relative;
    opacity: 1;
    padding: 5px;
    float: left;
    width: 33%;
}

.popup-ancillary{
    position: relative;
    float:right;
    opacity: 1;
    padding: 5px;
    width: 15%;
}


/********* PROJECT NODE STYLING **********/

/* for "idle" state project info */
.sleepy-node {
    position: fixed;
    font-family:'Inconsolata';
    text-align: left;
    font-size: 15px;
    /* color: white; */
    opacity: .7;
    /* transition: letter-spacing 1s ease-in; */
}

.sleepy-node:hover{
    color: white;
    opacity: 1;
    /* font-style: italic; */
    /* font-size: 15px; */
    letter-spacing: 4px;
    text-shadow: -10px 5px 1px rgb(25, 27, 28);
}

.sleepy-node:link{
    text-decoration: none;
}

/********* BACKGROUND IMAGES STYLING *********/

/* bg gobo */
#leafs {
    position: fixed; /* = unscrollable! */
    z-index: -1;
    opacity: .7;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100vh;
    /* defining only width or only height preserves ratio */

}

/* single hero images */
.hero-preview {
    position: absolute;
    z-index: -2;
    top: -10vh;
    /* height: 200vh; */
    width: 100vw;
    /* width: auto; */
    /* border-radius: 2%; */
}

/* multiple hero images */
.collage-preview {
    z-index: -2;
    opacity: .7;
}


/********* ADJUSTMENTS TO CSS DEFAULT *********/

body {
    background-color: black;
}


/********* DIV IDs FOR HERO IMAGES lol *********/
#headshot{
    z-index: -1;
    opacity: .7;
    position: absolute;
}

#collab-collage{
    visibility: hidden;
}

#memoradio-hero{
    visibility: hidden;
}

#eea-hero{
    visibility: hidden;
}

#bikiia-hero{
    visibility: hidden;
}

#twoone-hero{
    visibility: hidden;
}

#riyhfm-hero{
    visibility: hidden;
}

#uis-hero{
    visibility: hidden;
}

#fftt-hero{
    visibility: hidden;
}

#eslas-hero{
    visibility: hidden;
}

#cwyl-hero{
    visibility: hidden;
}

#laundry-hero{
    visibility: hidden;
}

#holddear-hero{
    visibility: hidden;
}

#ppals-hero{
    visibility: hidden;
}

#ymlaha-hero{
    visibility: hidden;
}