/*------------------------------
  ------------------------------
      Eden Pound's Portfolio
  ------------------------------
  ----------------------------*/

/*-----------------------------------------
  Global Variables
  -----------------------------------------*/

/* Cover the entire Doc */
:root
{
    /* Background */
    --NavBar-Background-Colour: #101010;
    --Main-Background-Colour: #171717;
    --Seperator-Colour: #383838;
    --Border-Box-Colour: #BBBB;
    
    /* Neon Colours */
    --Inner-Neon-Colour: #BCFFFF;
    --Outline-Neon-Colour: #59FFDC;
    --Inner-Hot-Colour: #FF007E;
    --Outline-Hot-Colour: #FF007E;
    
    /* Text */
    --Title-Text-Colour: #fff;
    --Content-Text-Colour: #DCDDDE;
    --LinkHovered-Text-Colour: #BCFFFF;
    --Content-Text-Margin: 20px;
}

/*--------FONT STYLES--------*/

/* These are the fonts we wanna use */
body 
{
    /* Font Stuff */
    font-family: 'Open Sans', 'Roboto', serif;
    /* Don't allow browser defaults to override us */
    margin: 0;
    background-color: var(--Main-Background-Colour); 
/*
    background: url(Images/Background/LoopingBackground.svg);
    background-size: 20px;
*/
}

/*--------NAVIGATION BAR--------*/

/* Make sure the NavBar Icon doesn't stretch */
* 
{
    box-sizing: border-box;
}


a:hover
{
    color: var(--LinkHovered-Text-Colour);
    text-shadow: 0 0 5px var(--Outline-Neon-Colour);
}

.navbar
{
    background-color: var(--NavBar-Background-Colour);
    color: var(--Content-Text-Colour);
    position: fixed;
    min-height:50px;
    width:100%;
    font-size: large;
}


#NavName
{
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 2px;
}

/* Change Padding-Top for NavBar Text Alignment */
.navbar-menu
{
  padding-top: 5px;
  padding-bottom: 5px;
}

#navbar-menu-link
{
    display: inline-block;
}

/* Auto Generated Nonsense */

.navbar-items-c
{
  display:inline-block;
  float:right;
}

.navbar-container
{
  max-width:1100px;
  margin-top:0px;
  margin-right:auto;
  margin-bottom:0px;
  margin-left:auto;
  width:95%;
}
.navbar-container::after{
  content:"";
  clear:both;
  display:block;
}
.navbar-brand{
  vertical-align:top;
  display:inline-block;
  padding-top:5px;
  padding-right:5px;
  padding-bottom:5px;
  padding-left:5px;
  min-height:50px;
  min-width:50px;
  color:inherit;
  text-decoration-line:none;
  text-decoration-style:initial;
  text-decoration-color:initial;
}
.navbar-menu-link
{
  color:inherit;
  text-decoration-line: none;
  display:inline-block;
  padding-top:10px;
  padding-right:15px;
  padding-bottom:10px;
  padding-left:15px;
}
.navbar-burger{
  margin-top:10px;
  margin-right:0px;
  margin-bottom:10px;
  margin-left:0px;
  width:45px;
  padding-top:5px;
  padding-right:10px;
  padding-bottom:5px;
  padding-left:10px;
  display:none;
  float:right;
  cursor:pointer;
  padding:5px 10px 5px 10px;
}
.navbar-burger-line{
  padding-top:1px;
  padding-right:1px;
  padding-bottom:1px;
  padding-left:1px;
  background-color:white;
  margin-top:5px;
  margin-right:0px;
  margin-bottom:5px;
  margin-left:0px;
}


/*--------BANNER--------*/

/* Image Boi */
.banner
{
    padding-top: 55px;
    width: 100%;
}

#Banner2
{
    display: none;
}

#Banner1
{
    display: block;
}

/*--------CONTENT--------*/

/* Content Padding */
.Container
{
    padding-right: 10px;
    padding-left: 10px;
}

/* How should the Text Content be positioned? */
.row
{
/*    display:table;*/
}

/* Text Containers */
#Text-Container
{
    /* Bottom Borders */
    border-bottom: solid 0.0625rem;
    border-color: var(--Seperator-Colour);
}

/* How should Title Text look? */
.heading
{
    color: var(--Title-Text-Colour); 
    text-shadow: 0 0 5px var(--Outline-Neon-Colour);
}

/* How should content text look? */
.paragraph , .borders
{
    margin: 0 0 0 0;
    margin-bottom: var(--Content-Text-Margin);
    color: var(--Content-Text-Colour);
}

.Border-Container
{
    margin-bottom: var(--Content-Text-Margin);
}

/* Border Boxes Formatting */
.borders
{
    /* Text Stuffs */
    text-decoration-line: none;
    display: inline-block;
    /* Border Crap */
    border: 2px solid;
/*    border-color: var(--Border-Box-Colour);*/
    border-color: var(--Inner-Neon-Colour);
    box-shadow: 0 0 5px var(--Outline-Neon-Colour);
    border-radius: 5px;
    /* Padding */
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 7px;
    padding-left: 7px;
    /* Margin Border Positioning */
    margin-right: 5px;
    margin-left: 0px;
    margin-bottom: 15px;
}

/* Portfolio Boxes */
.portfolioBoxes
{
    margin-bottom: 0px;

    display: flex;
    flex-wrap: wrap;
}

.portfolioBoxes .heading
{
    width: 100%;
    margin-bottom: 0px;
}

.portfolioBoxes p
{
    width: 100%;
}

#Text-Container .portfolioBoxes 
{
    border-bottom: 0px;
}

.portfolioBoxes .portfolioBoxesG1, .portfolioBoxes .portfolioBoxesG2
{
    text-align: center;
}

.portfolioBoxes .borders 
{
    margin-right: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.portfolioBoxes img
{
    width: 100%;
    height: auto;
    padding-bottom: 4px;

    margin-top: auto; /* Push image to bottom */
    /* margin-bottom: auto; */
}

/* Portfolio Box Overrides */
.portfolioBoxes #ShawTrust-Print img
{
    margin-bottom: auto;
}

/*--------COPYRIGHT FOOTER--------*/

.copyright-footer
{
    /* Div Background Stuff */
    background-color: var(--NavBar-Background-Colour);
    
    /* Font Stuff */
    text-align: center;
    font-size: large;
    color: var(--Content-Text-Colour);
    
    /* Padding for Text */
    padding-top: 10px;
    padding-bottom: 10px;;
}

/*-----------------------------------------
  RESOLUTION SCALING
  -----------------------------------------*/

/* Chromium Browsers Lowest Res */
@media (min-width: 500px)    
{
    /* Make Site Centre Now Pls */
    .Container
    {
        padding-left: 20%;
        padding-right: 20%;
    }
    
    #Banner1
    {
        display: none;
    }
    
    #Banner2
    {
        display: block;
    }
}

/* Tablets/iPad */
@media (max-width: 768px)
{
  .navbar-burger{
    display: block;
  }
  .navbar-items-c{
    display: none;
    width: 100%;
  }
  .navbar-menu{
    width: 100%;
  }
  .navbar-menu-link{
    display: block;
  }
  .cell
    {
        width:100%;
        display:block;
    }

/*
    #Banner
    {
        padding-top: 56px;
    }
*/
    
    #NavName
    {
        padding:10px;
    }
    
    /* Software Icons */
    img[width="16px"]
    {
        width: 18px;
        height: 18px;
    }  
}

/* PC Start */
@media (min-width: 768px)
{
    .Container
    {
        padding-left: 20%;
        padding-right: 20%;
    }
    
    /* Image Boi */
/*
    #Banner
    {
        padding-top: 50px;
    }
*/
    
    .borders
    {
        font-size: large;
    }  
}

/* When the NavBar becomes big */
@media (min-width: 900px) /* 769px */
{
    .portfolioBoxes .portfolioBoxesG1, .portfolioBoxes .portfolioBoxesG2
    {
        max-width: 49%;
/*
        margin-left: 2%;
        margin-right: 2%;
*/
        /* display: inline-table; */
    }
    
    .portfolioBoxes .portfolioBoxesG1
    {
        margin-right: 2%;
    }
}