/* MAIN ***************************************/
:root {
  --bg:  #ececec; /* BackGround */
  --bgd: #d5d5d5; /* BackGround Darker */
  --fg:  #252529; /* ForeGround */
  --fgb: #767684; /* ForeGround Brighter */
  --acc: #635fe9; /* ACCent blue */
  --fgh: #818192; /* ForeGround Hover */
  --font-fallback: "Outfit-TODO", "Puk", "Ubuntu", sans-sans;
}


/* Animation */
.grid.page {
  opacity: 0;
  animation: fadeSlideIn 0.4s ease-out forwards;
}

@keyframes fadeSlideIn {
  to {opacity: 1;}
}


@font-face {
  font-family: "Outfit-TODO";
  src: url("/fonts/Outfit-wght.woff2") format(‘woff2 supports variations’),
       url('/fonts/Outfit-wght.woff2') format('woff2-variations');
  font-weight: 100 900;
}

* { margin: 0; padding: 0; border: none; font-size: 30rem;}
a { text-decoration: none; color: var(--fg);}
p { margin-bottom: 20rem;}

html {
  font-size: 0.8px;
}

body {
  font-family: var(--font-fallback);
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  color: var(--fg);
  line-height: 1.33;
  align-items: center;
  overflow-x: hidden;
}

h1 {
  font: 600 normal 40rem var(--font-fallback);
  margin-bottom: 40rem;
}

h1 em {
  font: 300 normal 40rem var(--font-fallback);
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 40rem;
  width: 100%;
}

.grid123, .grid12, .grid23, .grid1, .grid2, .grid3, .grid0 {
  width: 100%;
  margin-bottom: 80rem;
}

.grid0,
.grid123 {grid-column: 1/-1;}
.grid12  {grid-column: 1/3;}
.grid23  {grid-column: 2/4;}
.grid1  {grid-column: 1/2;}
.grid2  {grid-column: 2/3;}
.grid3  {grid-column: 3/4;}

.grid0 {
  max-width: 920rem;
  margin-left: auto;
  margin-right: auto;
}

.full-bleed {
  grid-column: 1/-1;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin: 0 -50vw;
  margin-bottom: 80rem;
}

h2 {
  margin: -8rem 0 8rem;
  padding-bottom: 8rem;
}

.text {
  font-weight: 300;
  margin-top: -8rem;
}

.text a {
  text-decoration: underline 1rem var(--fgh);
  transition: all .08s ease-out;
  font-size: inherit;
  padding: 0 6rem;
  margin: 0 -6rem;
}

.text a:hover, .text a:focus {
  text-decoration: underline 2rem;
  animation: anim-color .25s ease-in-out;
}

.logo img:hover {
  animation: anim-fcolor .25s ease-in-out;
}

.container {
  padding: 80rem 40rem 0;
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: 1520rem;
}

@keyframes anim-fcolor {
  20% {filter: saturate(1150%) brightness(2.9);}
  40% {filter: saturate(1150%) brightness(2.9);}
}

@keyframes anim-color {
  20% {color: var(--acc); text-decoration-color: var(--acc); fill: var(--acc)}
  40% {color: var(--acc); text-decoration-color: var(--acc); fill: var(--acc)}
}

@media screen and (max-width: 1600px) {
  .container {padding-top: 40rem;}
}

@media screen and (max-width: 1200px) {
  .grid {grid-template-columns: 1fr 1fr;}
  .grid12, .grid1 {grid-column: 1/2;}
  .grid23, .grid3 {grid-column: 2/3;}
  .grid2 {grid-column: 1/-1;}
}

@media screen and (max-width: 700px) {
  .grid {grid-template-columns: 1fr;}
  .grid12, .grid23, .grid1, .grid2, .grid3 {grid-column: 1/-1;}
  /* .full-bleed {height: 50vh;} */
}

/* HEAD *******************************************************************/

.head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 80rem;
}

.head .logo img {
  height: 43rem;
}
dd) img:nth-child(1),
#work .card:nth-child(even) img:nth-child(2) {
  display: none;
}

@media screen and (max-width: 1200px) and (min-width: 700px){
  #work .card:nth-child(4n -1) img:nth-child(1),
  #work .card:nth-child(4n) img:nth-child(2) {display: block;}
  #work .card:nth-child(4n -1) img:nth-child(2),
  #work .card:nth-child(4n) img:nth-child(1) {display: none;}
}

/* FOOTER *******************************************************************/

.head nav {
  font-weight: 600;
  display: flex;
}

.head nav a {
  letter-spacing: 1rem;
  padding: 0 25rem;
  color: var(--fg);
  text-decoration: 3rem underline transparent;
}

.head nav a:hover,
.head nav a:focus {
  animation: anim-color .25s ease-in-out;
}

@media screen and (max-width: 550px) {
  .head {flex-direction: column; row-gap: 40rem; margin-bottom: 80rem;}
  .head nav {margin-left: -25rem;}
  .head nav {flex-direction: column; row-gap: 16rem;}
}

/* LANDING *******************************************************************/

.landing-page {
  margin-bottom: 80rem;
}

.landing-page b {
  font-weight: 300;
}

.landing-page .slogan {
  font-weight: 700;
  margin-bottom: 60rem;
}

.landing-page .text.grid123{
  max-width: 777rem;
}

/* WORK *******************************************************************/

@keyframes anim-card {
   20% {opacity:  70%; border-bottom-color: var(--acc);}
   40% {opacity:  70%; border-bottom-color: var(--acc);}
}

#work .card img {
  display: block;
  width: 100%;
  border-bottom: 2rem solid transparent;
  border-radius: 3rem;
}

#work .card:hover img, #work .card:focus img {
  animation: anim-card .25s ease-in-out;
}

#work .card em {
  font: 500 normal 20rem var(--font-fallback);
}

#work .selected .description {
  color: var(--acc);
  opacity: 1;
}

#work .selected img {
 border-bottom-color: var(--acc);
}

#work .description {
  opacity: 0.8;
  position: relative;
  color: var(--fg);
  font-size: 20rem;
  font-weight: 300;
  height: 80rem;
  padding-top: 6rem;
  top: 0;
}

#work .card:hover .description, #work .card:focus .description {
  animation: anim-color .25s ease-in-out;
}

#work .card:nth-child(odd) img:nth-child(1),
#work .card:nth-child(even) img:nth-child(2) {
  display: none;
}

@media screen and (max-width: 1200px) and (min-width: 700px){
  #work .card:nth-child(4n -1) img:nth-child(1),
  #work .card:nth-child(4n) img:nth-child(2) {display: block;}
  #work .card:nth-child(4n -1) img:nth-child(2),
  #work .card:nth-child(4n) img:nth-child(1) {display: none;}
}

/* FOOTER ************************************************/

@keyframes anim-wave {
    0% {background-position: calc(200rem - 100vw), 0;}
   50% {background-position: calc(200rem + 100vw), 0;}
  100% {background-position: calc(200rem + 100vw), 0;}
}

.wave {
  animation: anim-wave 15s ease-out infinite;
  background: url(images/wave.svg) no-repeat;
  height: 40rem;
  width: 100%;
  z-index: 2;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: var(--bgd);
  overflow-x: hidden;
}

footer .footer-container {
  grid-template-columns: auto auto auto auto;
  display: grid;
  column-gap: 80rem;
  row-gap: 80rem;
  padding: 120rem 40rem 200rem 40rem;
  max-width: 1520rem;
}

footer .logo {
  width: 250rem;
  justify-self: center;
}

footer .navigation a,
footer .thanks a  {
  text-decoration: underline 3rem transparent;
}

footer h1 {
  font-size: 30rem;
  margin-bottom: 0;
}

footer .navigation a:hover, footer .navigation a:focus,
footer .thanks a:hover, footer .thanks a:focus {
  color: var(--fg);
  animation: anim-color .25s ease-in-out;
}

footer nav {
  display: flex;
  flex-direction: column;
  min-width: 100rem;
  row-gap: 20rem;
}

footer .navigation a {
  font-weight: 600;
  letter-spacing: 1rem;
}

footer .use p {
  max-width: 430rem;
}

footer .socials a img {
  margin-right: 15rem;
}

footer .socials a:hover img {
  animation: anim-fcolor .25s ease-in-out;
}

@media screen and (max-width: 1200px) and (min-width: 700px) {
  footer .logo {grid-column-start: 1; grid-column-end: 6;justify-self: center; }
  footer .navigation {grid-column-start: 2; grid-row-start: 2; }
  footer .thanks {grid-row-start: 2; grid-column-start: 3; }
  footer .use {grid-row-start: 2; grid-column-start: 4; grid-column-end: 6; }
  .wave {height: 35rem;}
}

@media screen and (max-width: 700px) {
  footer .footer-container {grid-template-columns: 1fr; text-align: center;}
  footer .logo img { min-width: 250rem; }
  footer .use p {min-width: 80%;}
  .wave {display: none;}
}

/* WORKPAGE *************************************************/

.work-page, .page {
  margin-bottom: 80rem;
}

.work-page .title {
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.work-page time {
  align-self: end;
  font-size: 30rem;
  font-weight: 300;
  letter-spacing: 1rem;
  color: var(--fgb);
  padding: 0 25rem;
  text-align: center;
  margin-bottom: 40rem;
}

.work-page .run {
  text-align: center;
}

.work-page .run a {
  transition: all .05s ease-in;
  position: relative;
  color: white;
  background: var(--acc);
  border-radius: 100rem;
  padding: 9rem 25rem 10rem;
  box-shadow: 0rem 0rem 10rem rgba(0,0,0,0);
  top: 0rem;
  left: 0rem;
}

.work-page .run a:hover {
  transition: all .05s ease-out;
  box-shadow: 6rem 10rem 15rem rgba(0,0,0,0.2);
  top: -2rem;
  left: -2rem;
}

@media screen and (max-width: 700px) {
  .work-page .title { display: block;}
  .work-page time { display: block; text-align: right; padding: 0rem;}
}

/* ABOUT *************************************************/

/* rainbow */
.css-rainbow-text {
    background: linear-gradient(90deg, #e60003, #e60003, #ff8f03, #ff8f03, #ffef03, #ffef03, #01812a, #01812a, #0259ff, #0259ff, #770092,  #770092);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 400;
    font-style: normal;
}