/* top-level rules */

* { box-sizing: border-box }

html, body {
  margin: 0;
  height: 100%;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 400;

  /* default */
  background-color: lightgrey;
  color: white;
}

body {
  text-align: center;
  overflow-x: hidden;
}

header {
  position: inherit;
}

p, a, span {
  font-size: 1.4em;
  margin: 0;
}

body:not(.portfolio-page) a,
body.portfolio-page footer a {
  display: inline-block;
  width: 100%;
  text-decoration: none;
  border: 3px solid transparent;

  /* THE COLOUR OF THE LINKS */
  color: white;

  /* HOW ROUNDED THE CORNERS OF THE OUTLINE RECTANGLE ARE */
  border-radius: 2px;

  /* HOW MUCH SPACE BETWEEN THE LINK TEXT AND THE OUTLINE */
  padding: 12px;
}

/* THE COLOUR OF LINKS WHEN HOVERED WITH A MOUSE OR FOCUSED WITH A KEYBOARD */
a:hover,
a:focus {
  border-color: white;
  outline: 0;
}

/* utility classes */

.overflow-hidden {
  overflow: hidden;
}

.position-relative {
  position: relative;
}

.centered {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* PULSING BACKGROUND COLOUR */
.pulse {
background: linear-gradient(124deg, #FF0000, #D43B1D, #E8B71D);
background-size: 100% 1800%;

-webkit-animation: rainbow 6s ease infinite;
animation: rainbow 6s ease infinite;
}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

/*
  Hide, but not for screenreaders
  Source: https://github.com/alphagov/govuk_elements/blob/0fcc6998aea888586d4c94a54a18c61390ae73a1/public/sass/elements/_helpers.scss#L25
*/
.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.hover-container > .invisible-on-hover {
  visibility: visible;
}

.hover-container:hover > .invisible-on-hover {
  visibility: hidden;
}

.hover-container > .visible-on-hover {
  visibility: hidden;
}

.hover-container:hover > .visible-on-hover {
  visibility: visible;
}

/* content + footer */

.content--full-width, footer {
  width: 100%;
  display: inline-block;
}

[class*="--absolute"] {
  position: absolute;
}

/* name */
.page-name {
  display: inline-block;
  z-index: 10;
  cursor: default;
  width: 100%;

  /* THE SIZE OF THE BIG PAGE TITLES */
  font-size: 4em;
  font-weight: 600;
  line-height: 1;

  text-transform: uppercase;

  /* THE COLOUR OF THE BIG PAGE TITLES */
  color: #FFFFFF;
  /* THE COLOUR OF THE TEXT SHADOW */
  text-shadow: .04em .04em 0 hotpink;
}

.page-name--top {
  /* THE AMOUNT OF THE TOP WORD TO CUT OFF */
  transform: translateY(-44%);
}

.page-name--top span,
.page-name--top a {
  position: absolute;
  left: 50%;
  top: 0;
  /* THE AMOUNT OF THE TOP WORD TO CUT OFF */
  transform: translateX(-50%) translateY(-44%);
}

.page-name--top a {
  border: none;
}

.page-name--top:hover,
.page-name--top:hover > *,
.page-name--top:hover + .page-name--bottom {
  color: transparent;
  text-shadow: .04em .04em 0 #FFFFFF;
  -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: hotpink;
}

.page-name--bottom {
  position: fixed;
  bottom: 0;

  left: 50%;
  /* translateY: THE AMOUNT OF THE BOTTOM WORD TO CUT OFF */
  transform: translateX(-50%) translateY(35%);
}

/* content */

.content {
  z-index: 0;
}

.content--block {
  margin-top: 30vh;
}

.content--absolute {
  top: 0;
  left: 0;
  height: 100vh;
}

.content--show-on-hover {
  display: none;
  background-color: #D43B1D;
  z-index: 5;
}

.page-name--top:hover ~ main .content--show-on-hover {
  display: inherit;
}

.content--show-on-hover p {
  margin: 0;
}

/* footer link */

footer {
  bottom: 0;
  left: 0;
  padding-bottom: 2em;
}

footer a {
  width: 33%;
}

/* page-specific styles */

.index-page {
  /* THE BACKGROUND COLOR OF THE HOME PAGE */
  background-color: #76B887;
}

.index-page .page-name--top:hover {
  cursor: help;
}

.contact-page {
  /* THE BACKGROUND COLOR OF THE CONTACT PAGE */
  background-color: #7CB2C2;
}

/* media queries */
/* breakpoints cribbed from http://purecss.io/grids */

/* SCREENS BIGGER THAN 568px (bigger than an iphone), WHEN IN LANDSCAPE MODE */
/* ≥ 568px */
@media screen and (max-width: 35.5em) and (orientation: landscape) {
  .page-name--top {
    transform: translateY(-65%);
  }

  .page-name--bottom {
    transform: translateY(60%);
  }
}

/* SCREENS SMALLER THAN 400px (bigger than an iphone) */
/* < 400px */
@media screen and (max-width: 25em) {
  .portfolio-page .page-name {
    font-size: 3.3em;
  }
}

/* SCREENS BIGGER THAN 568px (bigger than an iphone) */
/* ≥ 568px */
@media screen and (min-width: 35.5em) {
  .page-name {
    font-size: 7em;
  }

  .content--block {
    margin-top: 40vh;
  }

  .content .container {
    width: 75%;
  }

  body:not(.portfolio-page) .content a {
    width: 31%;
    margin: 0 1%;
  }
}

/* SCREENS BIGGER THAN 768px (bigger than an mom's tablet) */
/* ≥ 768px */
@media screen and (min-width: 48em) {
  .page-name {
    font-size: 9em;
  }

  .content .container {
    width: 45%;
  }
}

/* SCREENS BIGGER THAN 1024px (usually, laptops and desktops) */
/* ≥ 1024px */
@media screen and (min-width: 64em) {
  .page-name {
    font-size: 10em;
  }
}

/* SCREENS BIGGER THAN 1280px (really super high definition monitors) */
/* 1280px */
@media screen and (min-width: 80em) {}