/* Stylesheet used for portfolio website! */
/* COLOURS: */
/*
Analagous: #F3F7D4 #CBE432 #7FBD32 #448D76 #093426 USE THIS!
Complementary: #F7D4D6 #EA202C #7FBD32 #6EB814 #213409
Compound: #F6DAED #A7177A #7FB73B #EE551E #32160C
Monochromatic: #C6E69F #9AD256 #689B29 #314913 #1B2B08
*/
body {
    margin: 0;
    padding: 0;
    background-color: #7FBD32;  /* Default background colour */
    color: #093426;             /* Default colour for text */
}

header { /* Used for universal headers */
         /* HEADER goes at the TOP! */
    background-color: #448D76;
    padding: 12px;
    text-align: center;
    color: #093426;
}

.Horz { /* Horizontal classifier */
    float: left; /* Aligns the elements to the left */
}

.navBar {
    list-style-type: none;  /* None of the entries require a bullet point */
    margin: 0;              /* Sets the navigation bar to the top left of the page */
    padding: 0;
    overflow: hidden;
    background-color: #448D76;


    position: sticky; /* Position is fixed thoroughout page */
    top: 0;
    
    border-color: #093426; /* Setting standard border definitions */
    border-radius: 1px;
    border-bottom-style: solid;
}

.navBar a { /* Applies to each navbar section AND the dropdown parts */
    display: inline-block;   
    text-align: center;
    padding: 20px 40px;
    text-decoration: none;
    color: #093426;
    
    border-right-style: solid; /* Inherits boarder size and colour fron NAVBAR */
}

.navBar a:hover, .dropDown:hover { /* ':hover' is a pseudo class! */
    background-color: #F3F7D4;
}

.dropDownCont {         /* dropDown Content Class */ 
    display: none;      /* Hides the dropdown box until hovered over */
    position: fixed;    /* Fixes the dropdown menu directly below the button */
    background-color: #F3F7D4;
    z-index: 1;
    left: 0;
    width: 100%;
    overflow: auto;
    min-width: none; /* Specifies minimum width of dropdown container */
}

.dropDownCont a { /* Any hyperlinks inside the dropdown content */
    color: #093426;
    padding: 20px 40px; /*  */
    text-decoration: none;
    display: block;
    text-align: left;
    
    border-top-style: solid; /* Inherits boarder style from NAVBAR! */
    border-right-style: none;    
}

.dropDownCont a:hover { /* Any hyperlinks inside the dropdown content, WHEN hovered over */
    background-color: #CBE432;
}

.dropDown:hover .dropDownCont{  /* Any dropdown CONTENT, WHEN the dropdown bar is hovered over */
    display: block;             /* Displays the dropdown bar when hovered over! */
}

.mainBody { /* Grid layout for elements on a page. Useful for displaying side-to-side! */
    padding: 12px;
    display: grid;
    /* 'grid-template' can be used as a short-hand version of the three indentifiers below! */
    
    grid-template-columns: repeat(12, [col-start] 1fr); /* '1fr' is a fractional unit, so each width remains equal relative to eachother! */
    /* format: grid-row-start, grid-column-start, grid-row-end, grid-column-end */



    gap: 12px;
    
    background-color: #7FBD32;
}

.projectDesc {
    padding: 12px;
    margin: 0px;  
    background-color: #CBE432;
    /* overflow: auto;   Might be useful for aligning text with images! */

    
}

/* TODO: Add grid starting/ending columns here!!
Notes: ideally use these as default left/right edges, but perhaps use unique locations for each project section ??? */
.leftEdge { 
    grid-column: col-start / span 5 ;
}

.rightEdge {
    grid-column: col-start 6 / span 7;
}

.p_macropad {
    grid-row: 1;
    
}

.p_sudoku {
    grid-row: 2;
}

.projectGallery {
    padding: 12px;
    margin: 0px;
  
    background-color: #CBE432;

}


.projectGallery img {
    width: 100%;
    
    /* TODO: adjust project description heights to match height of picture, with auto scrolling, if needed! */

   /* No need to do 100% height: scales image way too much! */
}