/*
    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;
}

.div-padding-fix {
    padding-bottom: 2em;
}


/* Adding  background color */

.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;
}