/* main */
:root {
  --blue1: rgb(153,193,241);
  --blue2: rgb(98,160,234);
  --blue3: rgb(53,132,228);
  --blue4: rgb(28,113,216);
  --blue5: rgb(26,95,180);
  --green1: rgb(143,240,164);
  --green2: rgb(87,227,137);
  --green3: rgb(51,209,122);
  --green4: rgb(46,194,126);
  --green5: rgb(38,162,105);
  --yellow1: rgb(249,240,107);
  --yellow2: rgb(248,228,92);
  --yellow3: rgb(246,211,45);
  --yellow4: rgb(245,194,17);
  --yellow5: rgb(229,165,10);
  --orange1: rgb(255,190,111);
  --orange2: rgb(255,163,72);
  --orange3: rgb(255,120,0);
  --orange4: rgb(230,97,0);
  --orange5: rgb(198,70,0);
  --red1: rgb(246,97,81);
  --red2: rgb(237,51,59);
  --red3: rgb(224,27,36);
  --red4: rgb(192,28,40);
  --red5: rgb(165,29,45);
  --purple1: rgb(220,138,221);
  --purple2: rgb(192,97,203);
  --purple3: rgb(145,65,172);
  --purple4: rgb(129,61,156);
  --purple5: rgb(97,53,131);
  --brown1: rgb(205,171,143);
  --brown2: rgb(181,131,90);
  --brown3: rgb(152,106,68);
  --brown4: rgb(134,94,60);
  --brown5: rgb(99,69,44);
  --light1: rgb(255,255,255);
  --light2: rgb(246,245,244);
  --light3: rgb(222,221,218);
  --light4: rgb(192,191,188);
  --light5: rgb(154,153,150);
  --dark1: rgb(119,118,123);
  --dark2: rgb(94,92,100);
  --dark3: rgb(61,56,70);
  --dark4: rgb(36,31,49);
  --dark5: rgb(0,0,0);
  --text: var(--dark4);
  --bg: var(--light1);
  scroll-behavior: auto;
  scroll-behavior: smooth;
}

/* FONTS */
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("../fonts/Inter-roman.var.woff2?v=3.18") format("woff2");
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}

html, body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  word-spacing: -0.01em;
}

@media (min-width: 700px) {
  html, body {
    font-size: 18px;
  }
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 3rem;
  font-weight: 800;
  line-height: 1.25;
  font-variation-settings: "wght" 800; /* needed for webkit */
}
a {
  color: var(--green1);
}

  a.splash {
    text-decoration: none;
    color: inherit;
  }
  
  .hide {
    display: none;
  }

body {
  /*temporary centering before I get the grid */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: 1600px;
  margin: 0 auto;
  color: var(--text);
  background: var(--bg);
}

.splash, .footer {
  max-width: 600px;
  margin: 3rem auto;
  text-align: center;
}

  .splash img {
    display: inline-block;
    width: 256px;
    height: 256px;
    border-radius: 50%;
    border-style:solid;
    border-color: var(--light3);
    border-width: 16px;
    transition: transform 300ms ease-out,
                border-width 300ms ease-out;
  }
    .splash img:hover {
      border-width: 2px;
      transform: scale(1.1);
    }
  .splash h1 {
    text-transform: uppercase;
    margin-top: 6px;
  }
  .splash .title {
    font-weight: 600;
    font-variation-settings: "wght" 600; /* needed for webkit */
  }

#socialicons {
  margin: 5rem auto 10rem;
  max-width: 50vw;
  display: grid;
  /* grid-template-columns: repeat(4, 1fr); */
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 16px;
  }

  #socialicons a.socials {
    display: inline-block;
    width: 32px; height: 32px;
    transition: transform 300ms ease-out;
    margin: 1rem;
  }
    .socials path {
      fill: var(--dark3);
    }
      #socialicons a.socials:hover {
        cursor: pointer;
        transform: scale(2);
      }
      .socials:hover path {
        fill: var(--dark3);
      }
      .socials:active path {
        fill: var(--dark5);
      }

section.intro {
  margin: 2rem auto 3rem;
  padding: 0 2rem;
}
  section.intro h2 { display: none;  }
  section.intro h3 {
    
  }

  @media (min-width: 800px) { /* desktop */
    section.intro {
      width: 50vw;
    }
  }



.thegrid {
  width: 100%;
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 0;
  justify-content: stretch;
  align-items: center;
  /* grid-column-end: span 2;
  grid-row-end: span 2; */
}

  @media (min-width: 800px) { /* desktop */
    .thegrid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .thegrid img,
  .thegrid video {
    display: block;
    width: 100%;
    height: auto;
    background-color: #282828;
  }
  .thegrid img::before {
    content: '';
    background-color: red;
  }
  .thegrid img:nth-child(odd) {
    background-color: #1e1e1e;
  }

  .thegrid .grey {
    /* background-color: var(--dark4); */
  }
  .thegrid .big {
    background-color: transparent;
  }

  .thegrid .whitespaced  {
    padding: 20%;
  }
    @media (min-width: 800px) { /* desktop */
      .thegrid .four  {
        grid-column: span 4;
        background-color: transparent;
      }
      .thegrid .two  {
        grid-column: span 2;
        background-color: transparent;
      }

    }