/*
    File: index.css
    Jason Downing
    Contact: jason@downing.io
    MIT Licensed - see http://opensource.org/licenses/MIT for details.
    Anyone may freely use this code. Just don't sue me if it breaks stuff.
    Created: September 3rd, 2015
    Last Updated: February 21st, 2021

    This file contains CSS classes / IDs used to override the Creative Bootstrap Theme
*/

/*
    Tweaking the header image, it's being set to "Center" but I'd rather it
    show the top of the image instead ("Top")
	  
		I sometimes tweak this value across my index.css files, but for the
		current (11/15/2020) header pic background-position: top actually makes
		the photo look better and align nicely with the text.
*/
#page-top > header {
  background-position: bottom;
}

header .header-content-pos {
	/*
			DISABLING THIS UNTIL I FIND A BETTER BACKGROUND OR SOLUTION
	*/
	/*
	transform: translateY(-90%)
	*/
}

.text-small {
  font-size: 100%;
}

/* Better colors for the header text */
.text-header {
  color: white;
  text-shadow: 4px 4px 4px #000000;
}
/* Niffy trick: https://stackoverflow.com/a/14310180 */
.text-header span {
	background-color: black;
	padding-left: 10px;
	padding-right: 10px;
}

.text-header-p {
  color: white;
  background-color: black;
}

/* For the new header, all text shall be black around the intro section 
	 Will hopefully be easier to read.
*/
.text-black {
	color: black;
}

/*  For the GitHub Section link
    These styles make the GitHub Section header appear white all the time,
    unless hovered on, in which case they turn blue. I like this style better.

    I also decided to use borders instead of underlines since the J in Jason gets cut
    off by an underline, but not by a border (which looks exactly like an underline only
    I can control it better). This resulted in a MUCH nicer looking underline!
    I used this link from Stackoverflow for this:
    https://stackoverflow.com/questions/9586596/control-underline-position-on-text-decoration-underline

    These links were also helpful:
    https://www.w3schools.com/css/css_link.asp
    https://www.w3schools.com/css/tryit.asp?filename=trycss_link2
*/
.text-blue {
  color: blue;
  border-bottom: 1px solid currentColor;
}
.text-white {
  color: white;
  border-bottom: 1px solid currentColor;
}

/* Link color when it is unvisited */
a.text-blue:link  {
  color: blue;
  border-bottom: 1px solid currentColor;
}
a.text-white:link  {
  color: white;
  border-bottom: 1px solid currentColor;
}

/* Link color after being clicked on and visited */
a.text-blue:visited {
  color: blue;
  border-bottom: 1px solid currentColor;
}
a.text-white:visited {
  color: white;
  border-bottom: 1px solid currentColor;
}

/* Link color while being hovered on */
a.text-blue:hover {
  color: blue;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}
a.text-white:hover {
  color: blue;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

/* Link color the moment it is clicked */
a.text-blue:active {
  color: blue;
  border-bottom: 1px solid currentColor;
}
a.text-white:active {
  color: white;
  border-bottom: 1px solid currentColor;
}

.min-padding {
  padding-top: 2em;
  padding-bottom: 2em;
}

.min-padding-top {
  padding-top: 2em;
  padding-bottom: 0em;
}

/*
    This class is a fix for a bug I noticed on certain screen resolutions.
    When the width was between ~768px and ~991px (small devices) I noticed that
    the 2x2 rows were not looking right - the first row of 2 squares looked fine
    but the the next row was all messed up, one square was higher than the other.

    It turns out if 2 or 3 squares share the same height but one square doesn't,
    then the alignment is thrown off on the grid.

    This small padding increase fixes the issue by making all 4 squares the same
    height.
*/
.div-padding-fix {
  padding-bottom: 2em;
}