html {
  height: -webkit-fill-available;
}

body {
  height: -webkit-fill-available; /* for Chrome viewport 100vh bug fix*/
}

/* 100% viewport */
header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
  /*min-height: 100vh;
  min-height: -webkit-fill-available;*/  /* mobile viewport bug fix */
}


/* Tachyons overrides */
.sans-serif {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


a:hover {
  text-decoration: none;
}



a.black:hover,
a.p-red:hover  {
  text-decoration: none !important;
}



/* Colors ———————————————————————————————————————————————————————————
*/

.p-red {
  color: #D10018;
}

.bg-p-red {
  background-color: #D10018;
}

.bg-p-red-light {
  background-color: #FCEFF0;
  border-top: 1px solid #D10018;
  border-bottom: 1px solid #FCF5F4;
}

.bg-p-lightest-red {
  background-color: rgba(209,0,24,0.02);
}

.bg-washed-red { /* override over tachyons */
  color: black;
  font-weight: bold;
  background-color: transparent;
}


/* Homepage ———————————————————————————————————————————————————————————
*/

h1 .text-outline {
  color: #FFF; /* #FEFAFA */
  text-shadow:
  -1px -1px 0 #D10018,
  1px -1px 0 #D10018,
  -1px 1px 0 #D10018,
  1px 1px 0 #D10018;
  -webkit-font-smoothing: antialiased;
  filter: drop-shadow(8px 6px 0 #FCEFF0) opacity(1);
}


.f45 {
  font-size: 1.125rem;
}

.social-link .social-icon {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.15em;
  vertical-align: -0.1em;
  transform-origin: center bottom;
  transition:
    /* opacity 0.15s ease, */
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-link:hover .social-icon {
  /* opacity: 0.75; */
  transform: rotate(-10deg) scale(1.5);
}

.lock_icon {
  width: 14px;
  height: auto;
  transition: transform 0.1s ease-in-out;
  transition: filter 0.1 ease-in-out;
}

.lock_icon:hover {
  transform: scale(2) rotate(2deg);
  filter: drop-shadow(0 3px 2px rgb(0 0 0 / 0.05)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.05));
  z-index: 20;
}

.logo_publico {
  transition: transform 0.15s ease-in-out;
  transform: scale(3.5) rotate(10deg);
  vertical-align: middle;
  margin-left: 3.5rem;
  margin-right: 3rem;
  /*filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.09));*/
}

.logo_publico:hover {
  transform: scale(6) rotate(-350deg);
}

.logo_numero {
  width: 40px;
  height: auto;
  transition: 
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.25s ease-out,
    translate 0.25s;
  transform-origin: center center;
  translate: 0 0;
}

.logo_numero:hover {
  transform: scale(1.5) rotate(350deg);
  filter: drop-shadow(0 3px 2px rgb(0 0 0 / 0.15)) drop-shadow(0 3px 2px rgb(0 0 0 / 0.15));
  translate: 0 -5px;
  z-index: 20;
}





/* Words ———————————————————————————————————————————————————————————
*/

.word_container {
  transition: transform 0.15s ease-out;
  padding-left: 1.75em;
  padding-right: 1.75em;
  z-index: 25;
}

.word_container:hover {
  transform: scale(1.5) rotate(0deg) !important;
  z-index: 30;
}

.word_container:hover .word_string {
  box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.075 ) !important;
}


.word_container:hover .priberam_link {
  opacity: 1;
}

.word_container:hover .priberam_link:hover .priberam_icon {
  transform: scale(1.5) rotate(4deg) !important;
}

.word_container:hover .word_excerpt {
  opacity: 1; /* place to 0, so excerpt doesn't show up */
  /* Match Instagram card quote: border + top-lit elevation */
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 16px 32px -6px rgba(0, 0, 0, 0.12);
  top: 1.2rem;
}

.word_excerpt {
  transition: opacity 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out, top 0.15s ease-out;
  font-size: 0.65rem;
  opacity: 0;
  pointer-events: none;
  margin-left: -5rem;
  margin-right: -5rem;
  top: -0.4rem;
  left: 0;
  z-index: -1;
  color: black;
  border: 1px solid transparent; /* reserve layout; visible on hover */
}

.priberam_link {
  position: absolute;
/*  display: none;*/
  opacity: 0;
  left: 100%;
  top: 45%;
  transform: translate(-24px, -50%);
  transition: opacity 0.15s ease-in-out;
  z-index: 30;
}


.priberam_icon {
  height: 14px;
  width: 14px;
  border-radius: 3px;
  margin-right: 14px;
  transition: transform 0.1s ease;
}


.date_divider {
  z-index: 20;
}

.date_divider.sticky {
  position: sticky;
  top: 0;
  background-color: transparent;
  z-index: 10;
  padding-top: 10px;
}

.date_divider.sticky span.line {
  border-bottom: 0px solid transparent !important;
}


.date_divider:not(.sticky) {
  position: static;
}

a.email {
  color: #999;
  padding-bottom: 1px;
  border-bottom: 1px solid #bbb;
  text-decoration: none;
}

a.email:hover {
  border-bottom: 0;
}




/* Mobile —————————————————————————————————————————————————————————
*/

/* Detects if device is touchscreen */
@media (hover: none) and (pointer: coarse)  {

  .priberam_link {
    opacity: 0.7;
  }

}


/* Responsive ———————————————————————————————————————————————————————
*/

/* Small */
@media screen and (max-width: 30em) {



  h1 .text-outline {
    filter: drop-shadow(4px 3px 0 #FCEFF0);
  }

  .f0 {
    font-size: 4rem;
  }

  .f45 {
    font-size: 1rem;
  }

  .logo_publico {
    transform: scale(2.4) rotate(10deg);
    margin-left: 1.8rem;
    margin-right: 1.8rem;
  }

  .logo_publico:hover {
    transform: scale(2.4) rotate(10deg);
  }

  /* Disable excerpt on hover in mobile */
  .word_container:hover .word_string {
    border-bottom-left-radius: 1rem; /* 1rem for .br4 */
    border-bottom-right-radius: 1rem;
  }

  .word_excerpt,
  .word_container:hover .word_excerpt {
    opacity: 0; /* place to 0, so excerpt doesn't show up */
    display: none;
  }


}

/* Medium */
@media screen and (min-width: 30em) and (max-width: 60em) {

}

/* Large */
@media screen and (min-width: 60em) {

}