/*****************************************

          CRUMBS HOME PAGE CSS


The colours used on the social media links are the same as defined for
the colour bar used as a divider between article bodies and the nav.

*****************************************/


/* Use different paddings for titles */
.title {
    padding: 1em 0;
    font-size: 2.5em;
    font-weight: 500;
}

.footer { padding: 1em 2em; }

/* Use a white navigation divider */
.nav { border-bottom: 1px solid white; }

/* Use a larger text on the front page */
p { font-size: 1.1em; }


/* Colour blocks are bigger on the front page */
.colour { height: calc((100vw - 2rem) / 15); }

/* Override link behaviour differently */
a, a:visited a:hover, a:active, a:link {
    color: #BEBEBE;
    text-decoration: none;
    outline: 0;
}

.home-content {
    display: flex;
    flex-direction: column;
}

/*** Social media definitions ***/

.icons { 
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-self: center;
    flex-wrap: wrap;
}


.icons h1 {
    font-family: Inconsolata;
    font-size: 42px;
    line-height: 42px;
    font-style: normal;
    font-variant: normal;
}

.icons > a {
    display: block;
    font-family: Inconsolata;
    font-size: 2.5em;
    line-height: 1em;
    width: 1em;
    height: 1em;
    padding: .5em;
    margin: .1em;
    box-shadow: 15px 15px 1px #111111;
    border: #999999 1px solid;
    background-color: #363636;
}

.icons > a > img { max-width: 1em; }

#wiggle:hover > .filter-brown { filter: brightness(0) saturate(100%) invert(49%) sepia(81%) saturate(350%) hue-rotate(332deg) brightness(83%) contrast(90%); }
#wiggle:hover > .filter-lila { filter: brightness(0) saturate(100%) invert(90%) sepia(83%) saturate(5521%) hue-rotate(209deg) brightness(84%) contrast(84%); }
#wiggle:hover > .filter-yellow { filter: brightness(0) saturate(100%) invert(98%) sepia(40%) saturate(2156%) hue-rotate(325deg) brightness(92%) contrast(97%); }

.hblue:hover { color: #6997c8; }
.hbrown:hover { color: #be6b49; }
.hgreen:hover { color: #99cb9b; }
.hlila:hover { color: #ca98c9; }
.horange:hover { color: #f6915f; }
.hred:hover { color: #ef787b; }
.hteal:hover { color: #6ccaca; }
.hyellow:hover { color: #e7d853; }

#wiggle { font-family: 'spacekookie'; }

#wiggle:hover {
    animation: .15s wiggle ease infinite;
    box-shadow: none;
}

/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */
@media (prefers-reduced-motion) {
  #wiggle:hover { animation: none; }
}


#email:hover, #email:focus { color: #6ccaca; }

@keyframes wiggle {
    0%  { transform: translate(0em, 0em); }
    12.5% { transform: translate(.025em, -.0525em) rotateZ(2deg); }
    25% { transform: translate(.125em, 0em) rotateZ(2deg); }
    37.5% { transform: translate(.025em, .025em) rotateZ(-2deg); }
    50% { transform: translate(0em, 0em) rotateZ(-2deg); }
    62.5% { transform: translate(-.025em, -.0525em) rotateZ(-2deg); }
    75% { transform: translate(-.125em, 0em) rotateZ(-2deg); }
    87.5% { transform: translate(-.1em, .1em) rotateZ(2deg); }
    100% { transform: translate(0em, 0em) rotateZ(2deg); }
  }