@keyframes color-change {
  0% { background-color: pink; }
  50% { background-color: blue; }
  100% { background-color: pink; }
}

    /* animation-name: color-change;
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; */

a:hover {
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-color: #fff;
    background-image: repeating-linear-gradient(-22deg, hsla(283, 49%, 60%, 0.5), hsla(2, 74%, 59%, 0.5), hsla(53, 67%, 53%, 0.5), hsla(93, 56%, 52%, 0.5), hsla(176, 38%, 50%, 0.5), hsla(228, 100%, 77%, 0.5), hsla(283, 49%, 61%, 0.5)) !important;
    text-shadow: 0px 0px 2px #fff9;
}

img:hover {
    animation: float 1500ms linear infinite;
}

@keyframes float {
    0% {
        transform: scale(3, 3) rotate3d(1, 3, 1, 0deg);
    }
    100% {
        transform: scale(3, 3) rotate3d(1, 2, 1, 360deg);
    }
}

div#ai-hype {
    font-style: oblique;
    font-weight: 999;
}
    
/* change the colors of the page */
body {
    color: rgb(255, 255, 255);
    background-color: rgb(255, 0, 204);
    font-weight: 999;
}

/* change the underline for hovered links */
a:hover {
    text-decoration: wavy underline;
}

span img { 
    height: 1.5em;
    vertical-align: middle; 
}

h1 {
    color: rgb(66,69,42);
    font-weight: 999;
}

h2 {
    color: rgb(42.0, 66,69);
}

.navbar-brand::after {
  font-family: monospace;
  content: "('-')";
  animation: face 17.4s infinite;
}

@keyframes face {
  00% { content: "('-')"; }
  02% { content: "('-')"; }
  04% { content: "('-')"; }
  06% { content: "('-')"; }
  08% { content: "('-')"; }
  10% { content: "(^-^)"; } /* blink */
  12% { content: "('-')"; }
  14% { content: "('-')"; }
  16% { content: "('-')"; }
  18% { content: "('-')"; }
  20% { content: "(`-`)"; } /* start look */
  22% { content: "(`-`)"; }
  24% { content: "(`-`)"; }
  26% { content: "(`-`)"; }
  28% { content: "(`-`)"; }
  30% { content: "(^-^)"; } /* blink */
  32% { content: "(`-`)"; }
  34% { content: "(`-`)"; }
  36% { content: "(`-`)"; }
  38% { content: "(`-`)"; }
  40% { content: "(`-`)"; } /* end look */
  42% { content: "('-')"; }
  44% { content: "('-')"; }
  46% { content: "('-')"; }
  48% { content: "('-')"; }
  50% { content: "(^-^)"; } /* blink */
  52% { content: "('-')"; }
  54% { content: "('-')"; }
  56% { content: "('-')"; }
  58% { content: "('-')"; }
  60% { content: "('-')"; }
  62% { content: "('-')"; }
  64% { content: "('-')"; }
  66% { content: "('-')"; }
  68% { content: "('~')"; } /* start yawn */
  70% { content: "(>~<)"; } /* blink */
  72% { content: "(>o<)"; }
  74% { content: "(>o<)"; }
  76% { content: "(>o<)"; }
  78% { content: "(>o<)"; }
  80% { content: "(>~<)"; }
  82% { content: "(>-<)"; } /* end yawn */
  84% { content: "('-')"; }
  86% { content: "('-')"; }
  88% { content: "('-')"; }
  90% { content: "(^-^)"; } /* blink */
  92% { content: "('-')"; }
  94% { content: "('-')"; }
  96% { content: "('-')"; }
  98% { content: "('-')"; }
  100% { content: "('-')"; }
}


/* common properties

color: red                          color of contents
background-color: white             background color of an element
font-size: 12pt                     size of text
font-family: Times                  font of text

width: 100px                        width of an element
height: 100px                       height of an element

margin: 10px                        space around an element
padding: 10px                       space inside an element

*/

/* selectors
p                                   selects all <p> elements

a:hover                             selects <a> elements being hovered over

#id                                 selects the element with id="id"
                                    id has to be unique, so this will only select one element

.class                              selects all elements with class="class"
                                    class can be shared by multiple elements, so this can select multiple elements

taco, bell, ...                     selects all taco, bell, etc. elements

taco bell                           selects all bell inside taco

taco > bell                         selects all bell that are direct children of taco
*/