:root {
  --orange-light: #FE4E00;
  --orange-dark: #C60F0F;
  --green-light: #8EA604;
  --green-dark: #19513E;
  --blue-light: #33658A;
  
  
  --highlight1: #FE4E00;
  --lowlight1: #C60F0F;
  --highlight2: #8EA604;
  --lowlight2: #19513E;
  --neutral: #33658A;
  --text-dark: #062A3B;

  --tabletCream: #ebdabe;
  --tabletRed: #db1d1d;
  --tabletDark: #1f1916;

  --desktopLight1: #E5FCC2;
  --desktopLight2: #9DE0AD;
  --desktopLight3: #45ADA8;
  --desktopDark1: #547980;
  --desktopDark2: #594F4F;

  --desktopLight1: #17BEBB;
  --desktopLight2: #CFDBD5;
  --desktopLight3: #E8175D;
  --desktopDark3: #1F2041;
  --desktopDark2: #0d171c;
  --desktopDark1: #022F40;
              
}


@media only screen and (min-width: 1201px){
  body{
    color: var(--desktopDark1);
    background-color: var(--desktopDark2);
    background-position: 0 -20px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.3vw;
    line-height: auto;
    background-image: url("/images/newGridBackground2.svg");
  }


  #holder {
    display:inline-block;  
    width: 95vw;
    height: 1000vw;
    overflow: hidden;
    position: relative;
    margin: 0;
  }

  h1, h2{
    font-family: 'Bungee', cursive;
    font-size: 5.5vw;
  }

  h3{
    font-family: 'Bungee', cursive;
    font-size: 2.5vw;
    line-height: 4.2vw;
    text-align: right;
    padding: 0.3vw 0;
    color: var(--desktopLight3);
    border-bottom: var(--desktopLight1) 2px solid;
    background-color: var(--desktopDark1);
    display: inline;
  }
  #grid1 a{
    text-decoration: none;
  }

  p{
    padding: 1vw;
    background-color: var(--desktopLight1);
    margin: 1vw 0.5vw 1vw 0;
    border-top: var(--desktopLight3) 3px solid;
  }

  #social ul {
    margin: 0;
    padding: 0;
  }
  #social li {
    float: left;
  }

  img{
    width: 100%;
    height: 100%;
    display: block;
  }

  #grid3 img{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-right: 3px solid var(--desktopLight2);
  }

  #grid3 a { 
    position: relative;
  }

  #grid3 a::before { 
    font-family: 'Bungee', cursive;
    color: var(--desktopDark1);
    background-color:  var(--desktopLight2);
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 1.8vw;
  }

  .subCss::before { content: "CSS"; }
  .subPost::before { content: "POST"; }
  .subData::before { content: "DATA VIS"; }
  .subMobile::before { content: "MOBILE"; }
  .subWeb::before { content: "WEB"; }

  svg {
    width: 3vw;
    height: 3vw;
    fill: var(--desktopLight3);
    margin: 1vw 0.9vw 0 0;
  }

  svg:hover { 
    fill: var(--desktopLight1);
  }

  a {
    color: black;
    pointer-events: auto;
  }

  .grid{
    display:grid;
    width: 100vw;
    grid-template-columns: repeat(auto-fill, 5vw);
    grid-auto-rows: 5.7735vw;
  }
  #grid1 {
    position: absolute;
    transform-origin: 0 0;
    transform: skewY(-30deg);
    pointer-events: none;
    z-index: 3;
  }
  #grid2 {
    position: absolute;
    transform-origin: 100vw 0;
    transform: skewY(30deg);
    pointer-events: none;
    z-index: 2;
  }
  #grid3 {
    position: absolute;
    width: 800vw;
    transform-origin: 700vw 0;
    transform: translatex(-700vw) rotatez(-60deg) skewY(30deg);
    z-index: 1;
  }
  
  #grid1 > a, #grid1 > div{
    grid-column-end: span 4;  
    grid-row-end: span 4;  
    margin: 1vw 0 0 1vw;
  }
  #grid2 > div{
    grid-column-end: span 4;  
  }
  #grid3 > a{
    grid-column-end: span 4;  
    grid-row-end: span 4;
   }


  #grid2 > div:nth-child(1){
    padding: 1.5vw;
    color: var(--desktopLight2);
    background-color: var(--desktopDark1);
    border-top: none;
    border-left: var(--desktopLight1) 3px solid;
    grid-column-end: span 7;  
    grid-row-end: span 4;
    grid-column-start: 12;  
    grid-row-start: 7;
    z-index: 2;  
  }
  #grid2 > div:nth-child(2){
    background-color: var(--desktopLight1);
    grid-column-end: span 4;  
    grid-row-end: span 4;
    grid-column-start: 16;  
    grid-row-start: 4;
    position: relative;
  }
  #grid2 > div:nth-child(2) img{
    width: auto;
    height: 100%;
    margin-left: 10%
  }
  #grid2 > div:nth-child(2)::after{
    content: url("/images/grid.svg");
    position: absolute;
    width: 20.2vw;
    height: 20.2vw;
    margin-top: -109%;
    margin-left: -0.5%;
    transform: scale(1,1.1547);
  }
  #grid2 > div:nth-child(3){
    grid-column-end: 20;
    grid-column-start: 13;
    grid-row-start: 11;
    background-color: var(--desktopLight2);
    border-left: var(--desktopLight3) 2px solid;
    margin: 1vw 0 2vw 0;
    overflow: hidden;
  }
  #grid2 > div:nth-child(3) > p{
    width: 300vw;
    height: 100%;
    border-top: 0;
    font-family: 'Bungee', cursive;
    font-size: 2.6vw;
    line-height: 2.8vw;
    position: relative;
    padding: 0 0 0 40vw;
    margin: 0;
    animation-name: ticker;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  #grid3 > a{
    position: relative;
  }
  @keyframes ticker {
    from {margin-left: 0;}
    to {margin-left: -150vw;}
  }

/*  #grid3 > a::after{
    content: url("/images/grid2.svg");
    position: absolute;
    width: 20.2vw;
    height: 20.2vw;
    margin-top: -109%;
    margin-left: -0.5%;
    transform: rotate(90deg) scale(1.1547,1);
  }
*/  
}

@media only screen and (min-width: 1601px){
  #grid1 > a, #grid1 > div{
    grid-column-end: span 3;  
    grid-row-end: span 3;  
    margin: 1vw 0 0 1vw;
  }
  #grid2 > div{
    grid-column-end: span 3;  
  }
  #grid3 > a{
    grid-column-end: span 3;  
    grid-row-end: span 3;
   }
  h3{
    font-size: 1.8vw;
    line-height: 3.15vw;
    padding: 0.3vw 0;
  }
  p{
    font-size: 1vw;
    padding: 0.75vw;
    margin: 0.75vw 0.375vw 0.75vw 0;
  }
  #grid2 > div:nth-child(1){
    grid-column-start: 10;  
    grid-row-start: 7;
  }
  #grid2 > div:nth-child(2){
    grid-column-start: 16;  
    grid-row-start: 5;
  }
  #holder {
    height: 620vw;
  }
}


@media only screen and (min-width: 601px) and (max-width: 1200px) {
  body {
    background-color: var(--tabletRed);
    color: var(--tabletDark);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    text-align: center;
    font-size: 2vw;
    margin-bottom: -20px;
  }

  #portrait {
    width: 113%;
    position: absolute;
    left: -12vw;
    top: -3vw;
    z-index: -1;
    -webkit-filter: sepia(40%);
    filter: sepia(40%);
  }

  h1, h2{
    font-family: 'Bungee', cursive;
    font-size: 7vw;
    line-height: 9vw;
  }

  h3{
    font-size: 2.5vw;
    line-height: normal;
    font-weight: 700;
    padding: 2vw 3vw;
    color: var(--tabletCream);
    background-color: var(--tabletDark);
  }

  #intro{
    color: var(--tabletDark);
    margin: 0;
    font-family: 'Bungee', cursive;
    font-size: 2.6vw;
    margin: 0.6vw 2vw;
  }

  a {
    color: var(--tabletCream);
  }

  p {
    margin: 2vw 1vw;
  }



  ul{
    display: grid;
    grid-gap: 1.9vw;
    grid-auto-rows: 9vw;
    grid-template-columns: 10.9vw repeat(7, 9vw) 10.9vw;
    transform-origin: 0 0;
    transform: skewY(-11deg);
  }

  #social li{
    background-color: var(--tabletCream);
    box-shadow: 0px 0px 0 1.98vw  var(--tabletRed);
  }

   #social .headline {
    color: var(--tabletDark);
    background-color: var(--tabletCream);
  }

  img, svg{
    width: 100%;
    display: block;
  }

  img{
    -webkit-filter: sepia(30%);
    filter: sepia(30%);
  }

  svg {
    fill: var(--tabletDark);
  }

  svg:hover {
    fill: #4e7352;
  }

  #social{
    margin-top: -8vw;
  }

  #bricks{
    width: 96vw;
    padding: 2vw 2vw 2vw 2vw;
    grid-template-columns: repeat(9, 9vw);
    background-color: var(--tabletRed);
  }

  #bricks li{
    grid-column-end: span 3;
    grid-row-end: span 10;
    background-color: var(--tabletDark);
    color: var(--tabletCream);
  }

  #social img, svg{
    height: 100%;
  }

  #social .hole {
    background-color: rgba(1,1,1,0);
  }

  #social .blankCell {
    background-color:  var(--tabletRed);
  }

  #social li:nth-child(1){ grid-column: 2; grid-row: 8; }
  #social li:nth-child(2){ grid-column: 3; grid-row: 9; }
  #social li:nth-child(3){ grid-column: 5; grid-row: 10; }
  #social li:nth-child(4){ grid-column: 7; grid-row: 9; }
  #social li:nth-child(5){ grid-column: 6; grid-row: 11; }
  #social li:nth-child(6){ grid-column: 2; grid-row: 10; }
  #social li:nth-child(7){ grid-column: 4; grid-row: 11; }
  #social li:nth-child(8){ grid-column: 8; grid-row: 11; }
  
  #social li:nth-child(9){ grid-column: 1 / 4; grid-row: 3; }
  #social li:nth-child(10){ grid-column: 2 / 7; grid-row: 4; }
  #social li:nth-child(11){ grid-column: 4 / 9; grid-row: 7; }

  #social li:nth-child(12){ grid-column: 6 / 10; grid-row: 8; }

  
  #social li:nth-child(13){ grid-column: 5 / 7; grid-row: 3; }
  #social li:nth-child(14){ grid-column: 9; grid-row: 4; }
  #social li:nth-child(15){ grid-column: 1/ 6; grid-row: 5; }
  #social li:nth-child(16){ grid-column: 3 / 5; grid-row: 6; }
  #social li:nth-child(17){ grid-column: 6 / 9; grid-row: 6; }
  #social li:nth-child(18){ grid-column: 8 / 10; grid-row: 5; }
  #social li:nth-child(19){ grid-column: 1; grid-row: 8; }
  #social li:nth-child(20){ grid-column: 5; grid-row: 8; }
  #social li:nth-child(21){ grid-column: 8; grid-row: 9; }
  #social li:nth-child(22){ grid-column: 4 / 6; grid-row: 9; }
  #social li:nth-child(23){ grid-column: 2 / 4; grid-row: 7; }
  #social li:nth-child(24){ grid-column: 7 / 9; grid-row: 10; }
  #social li:nth-child(25){ grid-column: 1 / 4; grid-row: 11; }
  #social li:nth-child(26){ grid-column: 7 / 9 ; grid-row: 10; }
  #social li:nth-child(27){ grid-column: 3 / 8; grid-row: 12; }
  #social li:nth-child(28){ grid-column: 9 / 10; grid-row: 12; }

  #social li:nth-child(29){ grid-column: 1 / -1; grid-row: 1; }
  #social li:nth-child(30){ grid-column: 1 / -1; grid-row: 2; }
  #social li:nth-child(31){ grid-column: 4; grid-row: 3; }
  #social li:nth-child(32){ grid-column: 7 / -1; grid-row: 3; }
  #social li:nth-child(33){ grid-column: 1; grid-row: 4; }
  #social li:nth-child(34){ grid-column: 7 / 9; grid-row: 4; }
  #social li:nth-child(35){ grid-column: 6 / 8; grid-row: 5; }
  #social li:nth-child(36){ grid-column: 1 / 3; grid-row: 6; }
  #social li:nth-child(37){ grid-column: 5; grid-row: 6; }
  #social li:nth-child(38){ grid-column: 9; grid-row: 6; }
  #social li:nth-child(39){ grid-column: 1; grid-row: 7; }
  #social li:nth-child(40){ grid-column: 9; grid-row: 7; }
  #social li:nth-child(41){ grid-column: 3 / 5; grid-row: 8; }
  #social li:nth-child(42){ grid-column: 7; grid-row: 11; }
  #social li:nth-child(43){ grid-column: 1 / 3; grid-row: 9; }
  #social li:nth-child(44){ grid-column: 6; grid-row: 9; }
  #social li:nth-child(45){ grid-column: 9; grid-row: 9; }
  #social li:nth-child(46){ grid-column: 1; grid-row: 10; }
  #social li:nth-child(47){ grid-column: 3 / 5; grid-row: 10; }
  #social li:nth-child(48){ grid-column: 6; grid-row: 10; }
  #social li:nth-child(49){ grid-column: 9; grid-row: 10; }
  #social li:nth-child(50){ grid-column: 5; grid-row: 11; }
  #social li:nth-child(51){ grid-column: 9; grid-row: 11; }
  #social li:nth-child(52){ grid-column: 1 / 3; grid-row: 12; }
  #social li:nth-child(53){ grid-column: 8 / -1; grid-row: 12; }

  #bricks li:nth-child(1){ grid-row-start: 1; }
  #bricks li:nth-child(2){ grid-row-start: 2; }
  #bricks li:nth-child(3){ grid-row-start: 2; }
}

@media only screen and (max-width: 600px) {
  #intro {
    display: none;
  }
  body {
    background-color: #33658A;
    color: var(--text-dark);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    text-align: center;
  }

  a {
    color: var(--text-dark);
    text-decoration: underline;
  }

  #portrait img{
    width: 100%;
    margin-top: 5vw;
    -webkit-filter: drop-shadow(0 0 10px  rgba(0, 0, 0, 0.27));
    filter: drop-shadow(5px 5px 5px #222);
  }

  h1, h2{
    font-family: 'Bungee', cursive;
    font-size: 12vw;
    line-height: 20vw;
  }
  
  #social li {
    display: inline;
  }

  svg{
    width: 9vw;
    height: 9vw;
    margin: 0 1vw;
    fill: var(--text-dark);
    background: #B3C3C4;
  }

  h1, .collection{
    display: grid;
    width: 100vw;
    grid-template-columns: 1fr;
    grid-auto-rows: 20vw;
  }

  h1 > span, .collection > span:first-child, .collection > span:last-child{
    transform: skewY(11deg);
    z-index: 1;
    grid-column-start: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.27);
  }

  h1 > span{
    background-color: var(--orange-dark);
  }

  h1 > span:nth-child(2n), .collection > h2, .collection > span{
    transform: skewY(-11deg);
    z-index: 3;
  }

  h1 > span:nth-child(2n){
    background-color: var(--orange-light);
  }

  h1 > span:first-child, .collection > span:first-child{
    clip-path: polygon(60% 0%, 100% 0%, 100% 100%, 60% 100%, 65% 50%);
  }

  .collection{
    margin-top: -20vw;
  }

  .collection > span:last-child{
    clip-path: polygon(40% 0%, 0% 0%, 0% 100%, 40% 100%, 35% 50%);
  }

  h1 > span:nth-child(1){ grid-row: 1;}
  h1 > span:nth-child(2){ grid-row: 2;}
  h1 > span:nth-child(3){ grid-row: 3;}
  h1 > span:nth-child(4){ grid-row: 4;}
  h1 > span:nth-child(5){ grid-row: 5;}
  h1 > span:nth-child(6){ grid-row: 6;}
  h1 > span:nth-child(7){ grid-row: 7;}
  h1 > span:nth-child(8){ grid-row: 8;}
  h1 > span:nth-child(9){ grid-row: 9;
    clip-path: polygon(40% 0%, 0% 0%, 0% 100%, 40% 100%, 35% 50%);
  }

  h1 > span:nth-child(10){
    background-color: transparent;
    z-index: 2;
    transform: none;
    grid-row: 1 / 9;
    box-shadow: none;
  }

  .collection > span:first-child, .collection > span:last-child{
    background-color: var(--orange-dark);
  }

  .collection:nth-child(2n+1) > span:first-child, .collection:nth-child(2n+1) > span:last-child{
    background-color: var(--green-dark);
  }

  .collection > h2,.collection > span{
    line-height: 20vw;
    background-color: var(--orange-light);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.27);
  }

  .collection:nth-child(2n+1) > h2,.collection:nth-child(2n+1) > span{
    background-color: var(--green-light);
  }

  .collection:nth-child(n) > .summary{
    z-index: 2;
    background-color: transparent;
    transform: none;
    box-shadow: none;
    position: relative;
  }

  .collection > .summary > span{
    display: block;
    width: 80vw;
    height: 20vw;
    margin: auto;
    background-color: #B3C3C4;
    line-height: 20vw;
    text-align: center;
    position: relative;
    z-index: 2;
    transform: skewY(-11deg);
  }

  .summary p{
    font-size: 4vw;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    margin: 0 2vw 0 2vw;
  }

  h3{
    font-size: 6vw;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    font-weight: 400;
    margin: 0 5vw 0 5vw;
    text-decoration: underline;
  }

  .collection > li {
    margin-top: -10vw;
    height: 40vw;
    overflow: hidden;
    position: relative;
    z-index: 2;
  }

  .collection > li:after, .collection > .summary:after {
    position: absolute;
    top: 10vw;
    left: 0vw;
    content: "";
    background-color: var(--orange-dark);
    width: 100vw;
    height: 20vw;
    z-index: -1;
    transform: skewY(11deg);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.27);
  }

  .collection:nth-child(2n+1) > li:after, .collection:nth-child(2n+1) > .summary:after {
    background-color: var(--green-dark);
  }


  .collection > .summary:after {
    position: absolute;
    top: 0vw;
  }

  .collection > li > p {
    display: none;
  }

  .collection > li > a > img {
    z-index: 2;
    width: 80vw;
    margin-top: -10vw;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.27);
  }


}






























































/*600px, 900px, 1200px, and 1800px */
/*






*/