@import url('https://fonts.googleapis.com/css?family=Cinzel');

@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Major+Mono+Display');
@import url('https://fonts.googleapis.com/css?family=Changa+One');
@import url('https://fonts.googleapis.com/css?family=Shrikhand');

/*Best fonts for title*/
@import url('https://fonts.googleapis.com/css?family=Patua+One');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');

/*
Less professional fons
*/
@import url('https://fonts.googleapis.com/css?family=Righteous');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');


/* meh fonts
@import url('https://fonts.googleapis.com/css?family=Baloo');
@import url('https://fonts.googleapis.com/css?family=Carter+One');

*/

/*
GAME FONTS
@import url('https://fonts.googleapis.com/css?family=Orbitron');
@import url('https://fonts.googleapis.com/css?family=Audiowide');
@import url('https://fonts.googleapis.com/css?family=VT323');
*/

@font-face {
    font-family: 'robotothin';
    src: url('fonts/roboto-thin-webfont.woff2') format('woff2'),
         url('fonts/roboto-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html,
body {
    height: 100%;
}


h1, h2, h3, h4, h5, h6, p, i {
    text-align: center;
    font-family: 'robotothin';
    color: whitesmoke;
}

p, i {
    text-align: left;
}

body {
/*    background-image: url(IMG/backgroundTesselate2.jpg);*/
    background-blend-mode: darken; /*use lighten to test see grey */
    background-size: cover;  /*makes sure content doesn't overflow image */
    background-color: black; /*rgba(99,22,39,0.8);*/ /* rgba(22,22,39,0.8);*/
}

.introDiv{
    position: relative;
}

#horizon {
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 1;
    padding: 0;
    margin: 0;
}


.nameDiv {
    position: absolute;
    z-index: 10;
    background-color: rgba(80,13,14,0);
    width: 100%;
    top: 10vw;
}

#aboveNameTitle, #nameTitle {
    font-weight: normal;
    text-align: center;
    color: whitesmoke;
    white-space: pre;
}

#aboveNameTitle {
    font-family: Cinzel;
    font-style: italic;
    font-size: 35px;
}


#nameTitle {
    font-family: Righteous;
/*    font-family: brandon-grotesque, sans-serif;*/
/*    font-family: Permanent Marker;*/
    font-size: 12vw;
    margin-top: 0px;
    margin-bottom: 0px;
/*    text-decoration: overline underline;*/
}


/* These are Tech, Science, Design ect */
.subTitle {
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Cinzel;
/*    font-style: italic;*/
    font-size: 5vw;
    margin-top: 5vw; 
    cursor: pointer;

}

/* Rects either side of sub titles */
#leftRect, #rightRect {
    cursor: default;
    vertical-align: middle;
    height: 0.3vw;
    width: 7vw;
    z-index: 1000;
    background-color: white;
    overflow: hidden;
}


#TechLink:hover, #SciLink:hover , #DesignLink:hover {
    cursor: pointer;
/*    color: yellow;*/
/*    color: rgb(94.9,59.6,22,0)*/
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: orange;
    -webkit-text-fill-color: orange;
}





#blankDiv {
    height: 1vh;
}
/*HiddenDiv that changes based on clicked content*/
#hiddenDiv .title {
    color: orange;
    margin-bottom: 3vh;
}


.ScrollToProjects {
    color: orange;
    text-align: center;
    
    -webkit-text-decoration: underline;
    -webkit-text-decoration-color: orange;
    
    text-decoration-color: orange;
    text-decoration: underline;
}

.ScrollToProjects:hover {
    -webkit-text-decoration: underline;
    -webkit-text-decoration-color: gray;

    text-decoration: underline;
    text-decoration-color: gray;
    cursor: pointer;
}


#hiddenDiv {
    margin-bottom: 55vh;
    display: none;
}


#hiddenDivParagraph, #hiddenDivParagraph {
    text-align: left;
}

/* Div below intro (first div) */
.meDiv {
    background-color: black;
}

.meDiv a {
    color: orange;
    text-decoration: underline;
}

h3 {
    font-family: 'Cinzel';
    font-size: 7vw;
}


.projectMasterTitle {
    margin-bottom: 1vw;
    text-decoration: underline;
    text-decoration-color: gray;
}



h4 {
    font-family: 'Cinzel';
}

.projectDiv {
    margin-bottom: 10vh;
}

.projectTitle {
    font-family: 'Cinzel';
    text-align: center;
/*    margin-left: 7vw;*/
    font-size: 9vw;

}

.projectIconImg {
    width: 50vw;
    height: 50vw;
}

.projectIconDiv {
/*    margin-bottom: 4vh;*/
/*    border-radius: 50%;*/
    margin-bottom: 5vh;
}

.projectDescription {
    font-family: 'robotothin';
/*    font-family: 'Helvetica';*/
    text-align: left;
    margin-left: 3vw;
}

#DS {
    filter: brightness(1.3);
}

a .link, a, .worksample  {
    
    margin-bottom: 7vh;
    font-family: 'robotothin';
    
    color: orange;
    -webkit-text-decoration: underline;
    -webkit-text-decoration-color: orange;
    text-decoration: underline;
    text-decoration-color: orange;
}


a .link:hover, a:hover, .worksample:hover {
    cursor: pointer;
    
    -webkit-text-decoration: underline;
    -webkit-text-decoration-color: gray;
    text-decoration: underline;
    text-decoration-color: gray;
}




.ScrollToProjects, #hiddenDivParagraph, #hiddenDivParagraph {
    font-size: 1.5vw;
}

 #hiddenDivParagraph, .ScrollToProjects, .worksample, .projectDescription {
        font-size: 6vw;
}

/*
a .link, a, .worksample  {
        font-size: 5vw;
}
*/




/* BREAKPOINT & UP */
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
    
    .projectTitle {
        font-size: 13vw;
    }
    
     #hiddenDivParagraph, .ScrollToProjects, .worksample, .projectDescription {
        font-size: 6vw;
    }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
    
    .projectTitle {
        font-size: 6vw;
    }
    
    .projectIconImg {
        width: 25vw;
        height: 25vw;
    }
    .projectTitle {
        text-align: left;
        margin-left: 7vw;
    }
    
    #hiddenDivParagraph, .ScrollToProjects, .worksample, .projectDescription, a .link {
        font-size: 3vw;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
    .projectTitle {
        font-size: 5vw;
    }
    
     #hiddenDivParagraph, .ScrollToProjects, .worksample, .projectDescription {
        font-size: 2vw;
    }
    
     .projectIconImg {
        width: 18vw;
        height: 18vw;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
    .projectTitle {
        font-size: 3.5vw;
    }
    
     #hiddenDivParagraph, .ScrollToProjects, .worksample, .projectDescription {
        font-size: 1.6vw;
    }
    
    .projectIconImg {
        width: 15vw;
        height: 15vw;
    }
}





/* BREAKPOINT & DOWN */
/* Extra small devices (portrait phones, less than 576px) XS*/
@media (max-width: 575px) { 
    
    /*Make sure subTitles are stacked*/
    #horizon {
        height: 100vw;
    }
    
    .subTitle #nameTitle {
        text-align: center;
    }
}




/* Small devices (landscape phones, less than 768px)  SM */
@media (max-width: 767px) { 
    .subTitleRect {
        display: none;
    }
    
    .subTitle {
        align-items: center;
        text-align: center;
    }
        
}

/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991px) { 

}

/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199px) { 

}

/* Extra large devices (large desktops)*/
/* No media query since the extra-large breakpoint has no upper bound on its width*/





















/* ------------------------------------------------------------------------
   HOLDING PAGE
   Active only while <body> carries class="wip" in index.html.
   Remove that one class to restore the full site - nothing here deletes
   content, it only hides it.
   ------------------------------------------------------------------------ */

#wipDiv {
    display: none;
}

body.wip #subTitlesDiv,
body.wip #blankDiv,
body.wip #hiddenDiv,
body.wip #meDiv {
    display: none;
}

body.wip #wipDiv {
    display: block;
    margin-top: 5vw;
}

#wipTitle {
    font-family: Cinzel;
    font-size: 4vw;
    letter-spacing: 0.15em;
    color: orange;
    margin-bottom: 1.5vw;
}

#wipText {
    font-family: Cinzel;
    font-size: 1.8vw;
    text-align: center;
    color: whitesmoke;
    opacity: 0.85;
}

/* vw sizing goes unreadable on phones */
@media (max-width: 767px) {
    #wipTitle {
        font-size: 7vw;
    }

    #wipText {
        font-size: 4vw;
    }
}