/*
    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: Feb 6th, 2018.

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

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

.text-italic {
  font-style: italic;
}

/* Making the "text-muted" class smaller, seems a bit too large. */
.text-muted {
  font-size: 97%;
}

/* Removing the bottom margin in the Languages and Skills area */
#about > div > div:nth-child(2) > div:nth-child(3) > p.text-faded.no-margin {
    margin-bottom: 0;
}
#about > div > div:nth-child(2) > div:nth-child(4) > p.text-faded.no-margin {
  margin-bottom: 0;
}

/*  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;
}
  /* 6/15/2018: Renamed because Creative Bootstrap ALSO has a text-white class,
                and my own text-white class was adding a border on the H2 'Education'
                header text. */
.text-white-link {
  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: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-link: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-link: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-link: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;
}

/* Adding some background color options */
.bg-green {
	/* Spotify Green - hex code from: https://brandpalettes.com/spotify-color-codes/ */
	background-color: #1DB954 !important;
}

/* Black button to go with the Spotify Green. The active/focus/etc stuff is for when you
   hover / click on the button. */
.btn-black {
	color: #fff;
	background-color: #000000 !important;
}
.btn-black:active, .btn-black:focus, .btn-black:hover {
	color: #fff;
	background-color: #262626 !important;
}
.btn-black:active, .btn-black:focus {
	box-shadow:0 0 0 .2rem rgba(240,95,64,.5)!important;
}

/* Black hrefs & hrs too */
.href-black {
	color: #000000;
}
.hr-black {
	border-color: #000000;
	color: #000000;
}

/* 	Vertically center the images on the "Fun Stuff" section
		https://stackoverflow.com/a/37163431
*/
.images-vcenter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

/* 	Add border to the images on the "Fun Stuff" section 
		https://www.w3schools.com/csS/css3_images.asp
*/
.images-border {
	border: .5em solid #000000;
	border-radius: 3em;
}

.images-border-skiing {
	border: .5em solid #000000;
	border-radius: 50%;
}

/* Rtn Red Color */
.RtnRed {
	color: #E61231 !important;
	font-weight: bold;
}