/* This is the main CSS for my website */
/*<-------------- VARIABLES -------------->*/
:root
{
    --hamburgerAnimationTime: .45s;
}

/* <-------------- MEDIA QUERIES --------------> */

/* If the page is visited on a small (phone etc.) screen, all navigation bar elements will be disabled EXEPT the first one (home button). In the same time, the hamburger icon will be enabled*/
@media screen and (max-width: 600px)
{
    .navigationBar a:not(:first-child) { display:none; }
    .navigationBar a.icon {
        float: left;
        display: block;
    }
    
    .navigationBar
    {
        opacity: 1;
    }
}

/* If the page gets bigger, the open Hamburger Menu should be closed */
@media screen and (min-width: 601px)
{
    .hamburgerMenuOpen
    {
        display: none;
    }
}

/* Printable version */
@media print
{
    /* Hide everything seperately */
    header, #firstGlance, #projects, #contact
    { display: none; }
}

/* Hide specialised printed content */
@media screen
{
    .printSee {display: none;}
}

/*<-------------- FONT -------------->*/
/* Here we add a cool font. We replace the Bootstrap font with addressing these */
*, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    font: bold 14em 'Source Sans Pro' sans-serif;
    /*font-family: 'Source Sans Pro' sans-serif;*/
    font-family: 'Raleway', sans-serif;
}

/*<--------------  Sizing --------------*/
/* Basially just quickfixing of some sizings */

.col-md-1, h1 {
    font-size: 66px;
    text-align: right:
}

.h3 {
    font-size: 42;
}

/*<-------------- NAVIGATION BAR -------------->*/
.navigationBar
{
    /* So there are no scrolling bars (Just in case!) */
    overflow: hidden;
    
    /* The general appearance of the navigation Bar */
    background-color: white;
    opacity: .9;
    transition: opacity 1s;
    
    /* To keep it always in the front */
    z-index: 1001;
    position: fixed;
    width: 100vW;
    
    /* Align the elements into the middle*/
    text-align: center;
}

/* If you hover over the navigation Bar, the colour becomes fully white */
.navigationBar:hover
{
    opacity: 1;
}

/* The content (Anchor-Links) of the navigation Bar */
.navigationBar a
{
    /* Outer appearance */
    font-size: 18px;
    color: black;
    outline: 0; /* This hides the already-clicked-rectangle */
    
    /* Relative alignment */
    display: inline-block; /* Because we want to use our size settings and still keep the size relative to the text content*/
    padding: 2vH 5vW;
    position: relative; /* Relative to the parent */
}

/* Making a good-looking feedback if you highlight an anchor-link */
.navigationBar a:hover
{
    color: darkgrey;
    background-color: floralwhite;
    opacity: 0.6;
}

/* The hamburger menu should be invisible by default (non-mobile usage) */
.navigationBar .icon
{
    display: none;
}

/*<-------------- HAMBURGER MENU -------------->*/


/* This will define the style of the Hamburger-side-menu */
.hamburgerMenu
{
    /* Outer apperance */
    background-color: white;
    
    /* Sizing */
    height: 100%; /* To make it fill the whole height of the page (looks better) */
    width: 0;
    padding-top: 10vH;
    
     /*To always keep it on top*/
    z-index: 1000; /* One hierachy under the top navigation bar */
    position: fixed;
    
    /* Optimizations */
    overflow-x: hidden; /* So that the text stays with the container size*/
    
    /* Animation */
    transition: width 0.4s;
}

/* This defines how the links should look like in the hamburger menu */
.hamburgerMenu a
{
    /* Outer appearance */
    color: black;
    outline: 0; /* This hides the already-clicked-rectangle */
    
    /* Sizing */
    padding: 2vH 10vW;
    display: inline-block;
    font-size: 20px;
}

/* This class will be enabled with JavaScript */
.hamburgerMenuOpen
{
    width: 50vW;
}

/* We are creating our own custom icon */
.hamburgerIconUp, .hamburgerIconMiddle, .hamburgerIconDown
{
  /* We do not need width, since it is specified in (.icon > div) */
  height: 3px;
  margin: 5px 0;
  background-color: black;
}


/* What should happen when it's turned ON (Took some while to figure this out)*/
.hamburgerAnimation .hamburgerIconUp
{
    transform: rotate(-55deg) translate(-5.7px,16.9px);
    width: 20px;
    transition: transform var(--hamburgerAnimationTime), width var(--hamburgerAnimationTime);
}

.hamburgerAnimation .hamburgerIconDown
{
    transform: rotate(55deg) translate(-2px,-0.4px);
    width: 20px;
    transition: transform var(--hamburgerAnimationTime), width var(--hamburgerAnimationTime);
}

.hamburgerAnimation .hamburgerIconMiddle
{
    transform: rotate(90deg);
    transition: transform var(--hamburgerAnimationTime);
}

/* What should happen when it's turned OFF (Reset position & rotation)*/
.icon > div
{
    transform: rotate(0);
    width: 30px;
    transition: transform var(--hamburgerAnimationTime), width var(--hamburgerAnimationTime);
}

/*<-------------- SECTIONS -------------->*/

/* Here I start to define the various sections */
section {
    
}

#firstGlance {

}

#aboutMe {
    color: black;
    background-color: white;
    text-align: center;
    padding: 5vH 8vH;
    font-size: 36px;
}

#projects {
    color: white;
    background-color: black;
    text-align: center;
    padding: 5vH 0 0 0;
}

#contact {
    color: #777;
    background-color: white;
    text-align: center;
    padding: 5vH 8vH;
    text-align: center;
}

/*<-------------- PARALLAX --------------*/

.parallax_firstGlance, .parallax_projectParasiteParadise, .parallax_projectBlockyZombieBabies {
    /* This is where the magic of the parallax happens */
    background-attachment: fixed;
    
    /* The others are more of optimizations */
    background-position: center;
    background-size: cover;
}
.parallax_firstGlance {
    /* Image to be used */
    background-image: url("../pictures/low_amtsgericht_jump.jpg");
    
    /* Height Settings */ 
    height: 50vH;
}
.parallax_projectParasiteParadise {
    /* Image to be used */
    background-image: url("../pictures/portfolio/ParasiteParadise/ingame.gif");
    
    /* Height Settings */
    height: 25vH;
}

.parallax_projectBlockyZombieBabies {
    /* Image to be used */
    background-image: url("../pictures/portfolio/BlockyZombieBabies/ingame.gif");
    
    /* Height Settings */
    height: 25vH;
}

/*<-------------- HiddenContainer -------------->*/
/* This disables the detailed text in the featured section at the beginning */

/* All infos will be hidden and greyed out exept the first one */
.hiddenContainer
{
    display: none;
}

.hiddenContainer:first-of-type
{
    display: block;
}

.toggleButton
{
    opacity: 0.6;
}


.toggleButton:first-of-type
{
    opacity: 1;
}

/*<-------------- Various -------------->*/

/* This script enables the pointer mode for certain objects in order to create a better user experience*/
#pointerElement, .toggleButton{
    cursor: pointer
}

/* Shenenigans with the marking selection :P */
.navigationBar a::selection
{
    background: white;
}
.navigationBar::selection
{
    background: black;
}
.navigationBar img::selection
{
    background: white;
}

/*<-------------- Check this out!  --------------*/
.caption {
  position: absolute;
  text-align: center;
  width: 100%; /* Because text-align is not enough to keep it centered  */
}

#mainCaption
{
    top: 44%;
}

.caption span.mainQuote {
  /* Colours */
  background-color: black;
  color: white;
  
  /* Sizing */
  padding: 8px; /* Thickness of the black bars */
  font-size: 30px;
  letter-spacing: 14px; /* Makes the letters be more apart */
  line-height: 58px; /* The amount of space between the lines */
}

.caption span.projectParasiteParadise, .caption span.projectBlockyZombieBabies {
  /* Sizing */
  padding: 5px; /* Thickness of the black bars */
  font-size: 30px;
  letter-spacing: 14px; /* Makes the letters be more apart */
  line-height: 53px; /* The amount of space between the lines */
}

/* Link colour of the captions */
.caption span a
{
    color: inherit;
}

.caption span.projectParasiteParadise {
  /* Colours */
  background-color: darkseagreen;
  color: forestgreen;
}

.caption span.projectBlockyZombieBabies {
  /* Colours */
  background-color: red;
  color: darkgreen;
}