/*
  The main style for all links, making them look like buttons
*/
a {
  background-color: white; /* Make "button" background white */
  font-size: 20px;  /* Make font size 20px */
  border-radius: 10px; /* Add a 10px border to them */
  padding: 10px;/* 10px of padding, keeps 10px above and below text. */
  display: block; /* Fit to width of parent element */
  text-align: center; /* Center text on element */
  margin: 10px; /* Add 10px Margin, maintains 10px on all sides. */
  color: slateblue; /* Text color slateblue */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 5px Horizontal offset, 5px vertical offset, 10px blur, color rgba(0, 0, 0, 0.3) (gray) with opacity */
  cursor: pointer; /* Moved From fading-link to apply same pointer to all a elements. fading-link will inherit.*/
}



/* 
  Specific styles needed for the fading link effect.
  It inherits the main 'a' styles but adds transition properties.
*/
#fading-link {
  /* Smooth transition for opacity changes over 1 second */
  transition: opacity 0.5s ease-in-out;
  opacity: 1; /* Initial state: visible */
  text-decoration: none;
  /* Moved cursor: pointer; to default a styling, fading-link will inherit. */
  /* Removed display: inline-block; */
  /* Kept display: block; in main a style, fading-link will inherit*/
  /* The color property is already defined in the main 'a' selector (color: slateblue;) */
}

/* Class to apply for fading out (and fading in from 0) */
#fading-link.fade-out {
  opacity: 0;
}




img {
  border-radius: 75px; 
  /* For image on index.html */
  /* Makes image circular. */
}
h2 {
  font-size: 18px; /* Reset default font size for h2 elements */
}
.monospace {
  font-family: 'Courier New', Courier, monospace;
  /* Create monospace class, can be applied to switch from Nunito to Courier New Monospace */
}
body {
  /* Style for entire page */
  background-color: slateblue; /* Make background slateblue */
  font-family: "Nunito"; /* Use Google Font Nunito */
  color: white; /* Text Color White */
  text-align: center; /* Center text elements on page */
}

/* For future use? */
.animated-text {
  font-family: sans-serif; /* Sans Serif Text */
  font-size: 3em; /* 3em of normal font size */
  animation: color-change 4s infinite alternate; /* Apply the animation */
}

@keyframes color-change {
  0% {
    color: red; /* Starting color ~red~ */
  }
  25% {
    color: blue; /* First intermediate color ~blue~ */
  }
  50% {
    color: green; /* Second intermediate color ~green~ */
  }
  75% {
    color: purple; /* Third intermediate color ~purple~ */
  }
  100% {
    color: red; /* Ending color (can be the same as starting for a loop) */
  }
}