/*
background color sets the colour of the page itself.

color sets the colour of the text on the page.
 */

html, body{
  background-color: #FFFFFF;
  color: #111111;
}


/*
h1 is the bold "Your Name" at the top of the page.
 */

h1{
font-family: 'Roboto Mono', monospace;
color: #111111;
}

/*
h3 is used for the subheadings, like "full-length"
 */

h3{
  font-family: 'Roboto Mono', monospace;
  color: #111111;
}

/*
h4 is used for the dates in this template
 */

h4{
  font-family: 'Roboto Mono', monospace;
  color: #111111;
}

/*a {
    background: linear-gradient(0deg, #4F7942, #4F7942) no-repeat right bottom / 0 var(--bg-h);
  transition: background-size 350ms;
  --bg-h: 100%;
}
a:where(:hover, :focus-visible) {
  background-size: 100% var(--bg-h);
  background-position-x: left;
}

.underline {
  padding-bottom: 2px;
  --bg-h: 2px;
}

a {
  text-decoration: none;
  color: inherit;
  line-height: 1;
}

a {
  color: inherit;
  text-decoration: none;
}*/

a {
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 100%, 0 100%;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

a:hover {
  background-size: 0 100%, 100% 100%;
}



/*
This sets the colour of the links on your page
 */
/*
a, a:visited {
  color: #000000;
}
*/
/*
This sets the colour of the link when you hover over it
 */
/*
a:hover {
  color: green;
}
*/
/*
This sets the colour of the circle around each of the contact icons
 */

.fab, .fas{
  background-color: black;
}

/*
This sets the colour of icon itself
 */

a > .fab, a > .fas{
  color: #eeeeee;
}

/*
This sets the colour of the circle around the icon when you hover over it
 */

.fab:hover, .fas:hover{
  background-color: red;
}

/*
This sets the colour of icon itself when you hover over it
 */

a > .fab:hover, a > .fas:hover{
  color: #eeeeee;
}