/* Reset Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
*, *::before, *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }

  :root {
    --light: #F8F4E4;
    --dark: #774D57;
    --medium: #9B6672;
    --brown: #E6D6C3;
    --softbrown: #F8EDDD;
    --darkbrown: #ac9c90;
    --gray: #83817A;
    --orange: #d36d48;
    --font-copy: "articulat-cf",Arial,Helvetica,monospace;
    --font-header: "articulat-cf",Arial,Helvetica,monospace;
}
.primary{color:var(--light);}
.secondary{color:var(--dark);}
.tertiary{color:var(--gray);}

  figure, ul, li{
    margin:0;
    padding:0;
  }

  body {
    color:var(--dark);
    background: var(--light);
    line-height: 1.1;
    font-size:18px;
    font-weight: 400;
    font-family: var(--font-copy);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  img, picture, video, canvas, svg {
    display: block;
  }

  input, button, textarea, select {
    font: inherit;
  }
  a, p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    font-family: var(--font-copy);
    font-weight:400;
  }
  a, a:hover, a:focus, a:checked, a:active{
    color:var(--tertiary);
  }
  h1, h2, h3, h4, h5, h6{
    font-weight:800;
    line-height:1;
    font-family: var(--font-header);
    /* mix-blend-mode: hard-light; */
  }
  h1{font-size:82px;letter-spacing:-1px;line-height: 1.05;margin: -1rem 0 0 -5px;} 
  h2{font-size: 82px;letter-spacing: -1px;margin: 0 0 7%;color:var(--medium)} 
  h3{font-size:1.35em;font-weight:800;font-family: var(--font-copy);} 
  h4{font-size:22px;} 
  h5{font-size:.5em;letter-spacing:3px;}
  h6{font-size: 1.15em;font-weight: 700;letter-spacing:.25px;color:var(--orange);font-family: var(--font-copy);    padding: 0 0 0 10px;}
  .email h6{
    padding:8px 15px;
    display: table;
    color:var(--dark);
    background: var(--gray);
    border-radius: 10px;
  }

  h1 span {
    color:var(--medium);
  }

  .email h1, .email h2{
    position:relative;
    line-height: 1;
    font-size: 3.5em;
    letter-spacing: 0;
    font-weight: 700;
    margin: -.5em 0 25px;
    font-family: var(--font-copy);
  }
  .email h1 span{
    position: static;
    font-size:inherit;
    font-weight:inherit;
  }

  .email h2{
    text-align: center;
    margin: 0 0 15%;
   }

  h1.uppercase, h2.uppercase, h3.uppercase, h4.uppercase, h5.uppercase, h6.uppercase{
    text-transform: uppercase;
  }


svg path{
  /* fill: var(--tertiary); */
}

.btn{
  padding: 10px 15px;
  border-radius: 5px;
  width: 100px;
  font-weight: bold;
  font-size: 20px;
  text-align:center;
  text-decoration: none;
  border: 3px solid transparent;
  transition: all .3s ease;
}

.right-txt{text-align:right;}
.left-txt{text-align:left;}
.center-txt{text-align:center;}
.center-content{align-items: center}
.pull-left{float:left;}
.pull-right{float:right;}


p, section li{
  font-size: .95em;
    line-height: 1.55;
  font-weight:600;
  text-align: justify;
  color:var(--gray);
}

section{
  padding: 5rem 40px;
  display:flex;
  align-items: center;
  min-height: 100vh;
  position:relative;
}
section.email{
  padding-top:10rem;
}
section > .cont{
  width:100%;
  max-width:1200px;
  margin:0 auto;
}
section.email >  .cont{
max-width: 1100px;
}
section#top div.cont{
display:flex;
align-items: flex-end;
align-items: center;
  position:relative;
      height: 80vh;
}
section#top div.cont.email{
  max-width: 1100px;
      gap: 50px;
}

section#top div.cont div:first-of-type{
  max-width:430px;
}
section#top div.cont.email div:first-of-type{
  min-width:430px;

}

.video-container{
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}


/* WHAT I DO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.skills{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.skills > div{
  width:30%;
  display:flex;
  flex-direction: column;
  margin-bottom: 55px;
}
.skills.email > div{
  width:100%;
}
.skills > div h3, .project-grid h3, .proj-email h3{
  display:flex;
  align-items: center;
  gap: 20px;
  margin:0 0 20px;
}
.skills > div h3 span, .project-grid h3 span,.project-grid aside span,.proj-email aside span{
  display:flex;
  justify-content: center;
    align-items: center;
  width:52px;
  height:52px;
  border-radius:10px;
  background: var(--softbrown);
}


/* PORTFOLIO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.project-grid{
  display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
}
.project-card {
  border-radius:12px;
  margin-bottom: 30px;
  background:var(--gray);
  width: 100%;
  height: 800px;
  overflow:hidden;
  position:relative;
}

.project-grid h3, .proj-email h3{
  margin: 0 0 7%;
  text-transform: capitalize;
  color:var(--dark);
}
.project-grid h3 span{
  width:36px;
  height:36px;
  background: url('https://d11wtnpetvvan1.cloudfront.net/img/arrow-rt.svg') 55% center no-repeat var(--gray);
  background-size: 9px;
  position: relative;
  top: 3px;
}
.project-grid aside{
  display:flex;
  align-items: flex-start;
  gap: 10px;
  margin: -3px 0 0;
}
.project-grid aside span,.proj-email aside span{
  font-size:14px;
  font-weight: 700;
  line-height: 2.25;
  height:auto;
  width:auto;
  color:var(--darkbrown);
  padding: 0 12px;
  font-family: var(--font-header);
  background: var(--softbrown);
}
.email .project-grid aside span,.proj-email aside span{
    font-family: var(--font-copy);
        letter-spacing: .25px;
}
.project-card > div{
  overflow:hidden;
  background-repeat:no-repeat;
  transition: all .52s ease;
  border-radius:12px;
}
.project-card > div video{
  border-radius:12px;
}

.project-card:hover > div{
  scale: 1.02;
}

/* ––– WEB ––– */

.project-card.web.society{
  background:#add8c8;
}
.project-card.web.komo{
  background:#fff0f4;
}
.project-card.web.arimathea{
  background:#4f1b22;
}
.project-card.web.gtg{
  background:#b9e7d5;
}
.project-card.web.sunmount{
  background:#c47b65;
}
.project-card.web.k9{
  background: #333;
}

.project-card.web.main > div{
  width:750px;
  height:420px;
  background:var(--light);
  background-size:750px;
  background-repeat:no-repeat;
  box-shadow: 0 3px 15px rgba(0,0,0,.05);
  position:absolute;
  top:50%;
}
.project-card.web.main > div:nth-child(1){
  top: -150px;
  left: -200px;
}
.project-card.web.main > div:nth-child(2){
  top: -300px;
  right: -150px;
}
.project-card.web.main > div:nth-child(3){
  height:320px;
  width:140px;
  top: 165px;
  right: -20px;
}
.project-card.web.main > div:nth-child(4){
  height:285px;
  width: 560px;
  top:auto;
  bottom: -20px;
  right: -20px;
}
.project-card.web.main > div:nth-child(5){
  height:170px;
  width: 620px;
  top:auto;
  bottom: -50px;
  left: -20px;
}
.project-card.web.main > div:nth-child(6){
  height:420px;
  width:140px;
  top:50%;
  left: -20px;
  transform: translateY(-50%);
}
.project-card.web.main > div.center{
  width:840px;
  height:470px;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 3px 30px rgba(0,0,0,.05);
  background-size:100%;
  background-position:center bottom;
}


.project-card.web.society > div:nth-child(2){
  background-position: -80px -160%;
}
.project-card.web.society > div:nth-child(3){
  background-position: 80% center;
}
.project-card.web.society > div:nth-child(4){
  background-position: -50px -55px;
}
.project-card.web.society > div:nth-child(5){
  background-position: 0px 95%;
    background-size: 120%;
}
.project-card.web.society > div:nth-child(6){
  background-position: -270px center;
  background-size: 870px;
}


.project-card.web.komo > div:nth-child(1){
  background-position: 200px -60px;
}
.project-card.web.komo > div:nth-child(2){
  background-position: -100px 150px;
    background-size: 110%;
}
.project-card.web.komo > div:nth-child(3){
  background-position: 65% center;
}
.project-card.web.komo > div:nth-child(4){
  background-position: center top;
    background-size: 800px;
}
.project-card.web.komo > div:nth-child(5){
  background-position: center -100px;
}
.project-card.web.komo > div:nth-child(6){
  background-position: 12% center;
    background-size: 920px;
}
.project-card.web.komo > div.center{
  background-position: center -50px;
}




/* ––– WEB ALT ––– */
  
  .project-card.web.alt{
    display:flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5%;
    height: 1000px;
  }
  .project-card.web.alt > div{
    width:730px;
    height:950px;
    background:var(--light);
    box-shadow: 0 3px 15px rgba(0,0,0,.05);
    margin-bottom:-20px;
    background-size:100%;
  }
  .project-card.web.alt > div:nth-child(2){
    width:280px;
  }



/* ––– SOCIAL ––– */

.project-card.social.mea{
  background: #27302b;
}

.project-card.social{
  display:flex;
  flex-wrap: wrap;
  gap: 5%;
  justify-content: center;
  align-content: center;
}
.project-card.social > div{
  width:300px;
  height:300px;
  box-shadow: 0 3px 15px rgba(0,0,0,.05);
}
.project-card.social > div:nth-child(1),
.project-card.social > div:nth-child(3),
.project-card.social > div:nth-child(4),
.project-card.social > div:nth-child(6),
.project-card.social > div:nth-child(7),
.project-card.social > div:nth-child(9){
position:relative;
top:50px;
}

/* ––– SOCIAL ALT ––– */
.project-card.social.industrious{
  background: #fdd440;
}
.project-card.social.alt > div:nth-child(1),
.project-card.social.alt > div:nth-child(3),
.project-card.social.alt > div:nth-child(4),
.project-card.social.alt > div:nth-child(6),
.project-card.social.alt > div:nth-child(7),
.project-card.social.alt > div:nth-child(9){
position:relative;
top:0;
}
.project-card.social > div{
  background-size:cover;
  background-repeat:no-repeat;
}

/* ––– VIDEO ––– */

.project-card.video{
  display:flex;
  justify-content: center;
    align-items: center;
}
.project-card.video > div{
  border-radius:0;
  box-shadow: 0 3px 30px rgba(0,0,0,.05);
}
.project-card.video > div video{
  width:100%;
  max-width:840px;
  height: auto;
  aspect-ratio: 16 / 9;
}
.project-card.video.everon{
  background: url('https://d11wtnpetvvan1.cloudfront.net/img/projects/video/everon-bg.jpg') center no-repeat;
  background-size:cover;
}
.project-card.video.appriss{
  background: url('https://d11wtnpetvvan1.cloudfront.net/img/projects/video/appriss-bg-min.jpg') center no-repeat;
  background-size:cover;
}

/* ––– EMAIL ––– */

.project-card.email > div{
  width:320px;
  height:550px;
  background:var(--light);
  box-shadow: 0 3px 15px rgba(0, 0, 0, .05);
  position:absolute;
  background-repeat:no-repeat;
  background-size:500px;
}

.project-card.email > div:nth-child(1){
  top:-20px;
  left:-20px;
  width:320px;
  height:240px;
  background-position: -10px -243px;
}
.project-card.email > div:nth-child(2){
  top:-20px;
  right:-20px;
  background-position: 5% bottom;
}
.project-card.email > div:nth-child(3){
  bottom:-20px;
  right:-20px;
  width:320px;
  height:240px;
  background-position: -40px 75%;
}
.project-card.email > div:nth-child(4){
  bottom:-20px;
  left:-20px;
  background-position: 10px 0;
}
.project-card.email > div.center{
  width:500px;
  height:700px;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  background-size:cover;
}
.project-card.email:hover > div.center{
  left:51%;
  transform: translate(-51%, -50%);
}
.project-card.web.main:hover > div.center{
  left:52%;
  transform: translate(-52%, -50%);
}
.project-card.email.tempo{
  background: #c3d3e7;
}

.project-card.email.trib{
  background:#bed5d7;
}
.project-card.email.trib > div:nth-child(1){
  background-position: -10px -243px;
}
.project-card.email.trib > div:nth-child(2){
  background-position: right bottom;
}
.project-card.email.trib > div:nth-child(3){
  background-position: right 5%;
}
.project-card.email.trib > div:nth-child(4){
  background-position: 10px 0;
}


.project-card.email.trib2{
  background:#ecf1f7;
}
.project-card.email.trib2 > div:nth-child(1){
  background-position: center ;
}
.project-card.email.trib2 > div:nth-child(2){
  background-position: -30px -60px;
}
.project-card.email.trib2 > div:nth-child(3){
  background-position: -30px 92%;
}
.project-card.email.trib2 > div:nth-child(4){
  background-position: center -75px;
  background-size: 110%;
}


.project-card.email.orlando{
  background: #26c3e8;
}
.project-card.email.orlando > div:nth-child(1){
  background-position: right 5%;
}
.project-card.email.orlando > div:nth-child(2){
  background-position: left 16%;
}
.project-card.email.orlando > div:nth-child(3){
  background-position: center 90%;
}
.project-card.email.orlando > div:nth-child(4){
  background-position:  center -850px;
  background-size: 500px;
}
.project-card.email.orlando > div.center{
  background-size:100%;
}


.project-card.email.hyliion{
  background: #363636;
}
.project-card.email.hyliion > div:nth-child(1){
  background-position: 99% bottom
}
.project-card.email.hyliion > div:nth-child(3){
  background-position: -10px 78%;
}
.project-card.email.hyliion > div:nth-child(4){
  background-position: 95% 100%;
}

/* .email .project-card{
    background: none !important;
    border: 1px solid var(--dark);
}
.email .project-card:before{
  content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 8px solid var(--light);
    z-index: 1;
    border-radius: 10px;
} */


/* ––– EMAIL PAGE ––– */
.proj-email{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
    gap: 25px;
  
}
.proj-email > div.proj {
        width: 48%;
        height: auto ;
        aspect-ratio: 3 / 4.25;
            background-size: cover;
            border-radius: 12px;
            box-shadow: 0 3px 15px rgba(0, 0, 0, .05);
    }
.proj-email .deets{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.proj-email .deets aside{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 0;
}


/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{
  padding:3% 40px 0;
  width:100%;
  max-width:1280px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  margin:0 auto;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  z-index:1;
}

header > div:first-of-type{
  display: flex;
  align-items: center;
  cursor:pointer;
  border-radius: 12px;
  /* margin-left:-12px; */
  transition: all .25s ease-in;
  position:relative;
  width:auto;
}



/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{
  text-align:center;
  margin: 0 0 5%;
}
footer h6{
  padding:0;
  font-family: var(--font-header);
  color:var(--dark);
  letter-spacing: -.25px;
    font-size: 1.5em;
    margin: 0 0 5px;
}
footer span{
  font-size:11px;
  font-weight: 600;
  color: var(--medium);
  letter-spacing: 10px;
  margin-right: -10px;
}


/* EMAIL OPTIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.dropdown {
  position: relative;
  display: table;
  margin:  0;
  cursor:pointer;
}

.dropdown:hover > .dropdown-menu {
  transform: translate(0, -2.5rem);
  opacity: 1;
  visibility: visible;
}

  .dropdown-menu {
    position: absolute;
    top: 100%;
    right:45px;
    z-index: 1000;
    text-align: left;
    
    background: var(--softbrown);
    background-clip: padding-box;
    /* -webkit-box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.14);
    -moz-box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.14);
    box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.14); */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: all .25s ease-in-out;
    transform: translate(-4px, -2.5rem);
    opacity: 0;
    visibility: hidden;
    border-radius: 12px;
  }
  .dropdown-menu:before{
    content:"";
    width:12px;
    height:12px;
    border-radius:2px;
    background: var(--softbrown);
    position:absolute;
    top:50%;
    right:-1px;
    transform: rotate(45deg) translateY(-50%);
  }

    .dropdown-item {
      display: block;
      white-space: nowrap;
      background-color: transparent;
      border: 0;
      padding: 15px 20px 13px;
      text-decoration: none;
      color: var(--medium);
      text-align: left;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-font-smoothing: auto;
      border-radius: 16px 16px 0 0;
      transition: all .15s ease-in-out;
    letter-spacing: .25px;
    font-size: .9em;
    font-weight: 700;
    }
    .dropdown-item:last-of-type{
      padding: 14px 20px;
      border-radius: 0 0 16px 16px;
    }
      .dropdown-item img {
        vertical-align: middle;
        margin: -3px 8px 0 0;
        display: inline-block;
      }
 
      .dropdown-item:hover, .dropdown-item:focus{
        text-decoration: none;
        cursor: pointer;
        color:var(--dark);
        
      }
      .dropdown-item:hover{
        font-size: .92em;
        letter-spacing: .35px;
         /* scale: 1.025; */
      }


    .dropdown-menu.show {
      display: block;
      opacity: 1;
    }

    .dropdown-divider {
      border-top: 2px solid var(--tertiary);
      opacity:.1; 
    }

  .button{
    padding: 0;
    background: none; 
    display: flex;
    align-items: center;
    vertical-align: middle;
    border:0;
    outline:0;
    color:var(--primary);
    font-weight: 600;
    position:relative;
    text-transform: uppercase;
    text-decoration:none;
    letter-spacing: 3px;
    font-size: 12px;
    font-weight: 700;
  }
 
  .button:before{
     content:"";
    width:34px;
    height:34px;
    border-radius:100px;
    background: var(--tertiary);
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%); 
  }
  .button svg path, #icon-grid rect{
    fill: var(--medium);
  }

    .button:hover {
      cursor: pointer;
    }
    
    .copy-notification {
      font-style: normal;
      font-size: 3em;
      font-weight: 900;
      font-family: var(--font-copy);
      line-height: 95vh;
      text-align: center;
      color: var(--light);
      background-color: var(--dark);
      padding: 17px 18px 15px;
      border-radius: 18px;
      display: none; 
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width:95vw;
      height:95vh;
      z-index:1111;
      letter-spacing: -.5px;
      opacity:.95;
  }



  header > div:first-of-type .dropdown:hover > .dropdown-menu {
    transform: translate(-7px, -2.4rem);
    opacity: 1;
    visibility: visible;
  }

  header > div:first-of-type .dropdown-menu {
    right: auto;
    left: 50px;
    text-align: right;
    transform: translate(-3px, -2.4rem);
  }
  header > div:first-of-type .dropdown-menu:before{
    top:50%;
    right:auto;
    left:-9px;
  }




/* MISC
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.animatedLine {
	position: absolute;
	top: -110px;
  left:0;
	height: 100vh;
	width: 2px;
	background: rgba(255,255,255,0.04);
	overflow: hidden;
}
.animatedLine:nth-child(1) {
	left: -40px
}
.animatedLine:nth-child(1)::after {
	animation-delay: -2s;
}
.animatedLine:nth-child(2) {
	left: 66%;
}
.animatedLine:nth-child(2)::after {
	animation-delay: -1s;
}
.animatedLine::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 175px;
	background: -moz-linear-gradient(top, var(--light) 0%, var(--brown) 75%, var(--brown) 100%);
	background: -webkit-linear-gradient(top, var(--light) 0%, var(--brown) 75%, var(--brown) 100%);
	background: linear-gradient(to bottom, var(--light) 0%, var(--brown) 75%, var(--brown) 100%);
	animation: animatedLine 5s 0s infinite;
	animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
	animation-fill-mode: forwards;
}

@keyframes animatedLine {
  0% {
      top: -150px;
  }
  60% {
      top: calc(100% + 150px);
  }
  100% {
      top: calc(100% + 150px);
  }
}






/* #mouse_body {
  border-radius: 0 0 80px 80px;
  height: 55px;
  width:18px;
  margin: 0 auto;
  position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: #ccc;
    background: linear-gradient(0deg, var(--brown), var(--light));
}

#mouse_wheel {
  border: 4px solid var(--dark);
  border-radius: 8px;
  background-color: var(--dark);
  position: relative; 
  height: 3px;
  width: 3px;
  margin: 0 auto; 
  animation: wheel_animation 2s linear infinite;
  z-index:11;
} */



#mouse_body {
  height:400px;
  position:absolute;
  bottom:-20%;
  left:0;
}

#mouse_wheel {
  height:100%;
width:2px;
  background: var(--brown);
   position:absolute;
   animation: wheel_animation 6s linear infinite;
}


/* include use -moz-, -webkit-, or -o- for respective browser type*/
@keyframes wheel_animation { 
  0% {
    bottom: 0;
  }
  50% {
    bottom: 50%;
  }
  100% {

    bottom: 0;
  }
}







/* include use -moz-, -webkit-, or -o- for respective browser type*/
@keyframes pulse { 
  0% {
    opacity: 0.1;
  }
  40% {
    opacity:1;
  }
  60% {
    opacity:1;
  }
  100% {
    opacity: 0.1;
  }
}

/* Large Screens
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 2561px) { 

}


/* Tablet
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 1024px) {

  h1, h2 {
    font-size: 3em;
    margin-left:-2px;
  }
  h2{
    font-size: 2.5em;
    margin: 0 0 15%;
  }
  .email h1{
    margin: 0 0 25px;
  }
   .email h1,  .email h2{
    font-size: 3em;
    text-align: left;
   }

  h6{
    padding: 0 0 0 5px;
  }
  
  section#top div.cont div:first-of-type {
    min-width: 0;
  }
  section#top div.cont.email div:first-of-type{
    min-width: 0;
  }
  section#top div.cont div:nth-child(2){
    max-width: 430px;
    margin-top: -70px;
  }
   section#top div.cont.email div:nth-child(2){
margin-top: 0;
   }
  header, section{
    padding-left: 40px;
    padding-right: 40px;
  }
  section#top div.cont {
    gap: 0;
    align-items: flex-end;
        height: 85%;
  }
  .skills > div {
    width: 45.5%;
  }
  .project-card {
    height: auto;
    padding: 30px;
  }
  .project-card:hover > div{
    scale: 1;
  }
  .project-card.social > div:nth-child(1), .project-card.social > div:nth-child(3), .project-card.social > div:nth-child(4), .project-card.social > div:nth-child(6), .project-card.social > div:nth-child(7), .project-card.social > div:nth-child(9){
    top: 0;
  }
  .project-card.social{
    gap: 25px;
  }
  .project-card.social > div:nth-child(7){
    display:none;
  }
  .project-card.social > div{
    width: 48%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .project-card.web.alt{
    padding-bottom:0;
    align-items: flex-start;
    height: 700px;
  }
  .project-card.email{
    display:flex;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 25px;
    
  }
  .project-card.email > div,
  .project-card.email > div.center{
    position:static;
    width: 48% !important;
    height: auto !important;
    aspect-ratio: 3 / 5;
    transform: none !important;
    background-size: cover !important;
    background-position: center 0 !important;
  }
  .project-card.email > div:nth-child(1),
  .project-card.email > div:nth-child(2),
  .project-card.email > div:nth-child(3){
    display:none;
  }

  .project-card.email.orlando > div:nth-child(4){
    background-position: center 58%!important;
  }

  .project-card.email.hyliion > div:nth-child(4){
    display:none;
  }
  .project-card.email.hyliion > div:nth-child(3){
    display:block;
    background-position: center bottom !important;
  }

  .project-card.web.main{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
  }
  .project-card.web.main > div,
  .project-card.web.main > div.center{
    position: static;
    width: 48% !important;
    height: auto !important;
    aspect-ratio: 8 / 5.1;
    transform: none !important;
    background-size: 100% !important;
    background-position: top center !important;
  }

  .project-card.web.society > div.center {order:1;}
  .project-card.web.society > div:nth-child(1) {order:2;}
  .project-card.web.society > div:nth-child(2) {order:3;}
  .project-card.web.society > div:nth-child(4) {order:4;}

  .project-card.web.society > div:nth-child(3),
  .project-card.web.society > div:nth-child(5),
  .project-card.web.society > div:nth-child(6){display:none;}

  .project-card.web.main.komo > div,
  .project-card.web.main.komo > div.center{
    aspect-ratio: 16 / 9.5;
    background-size: cover !important;
    background-position: center !important;
  }

  .project-card.web.komo > div.center {order:1;}
  .project-card.web.komo > div:nth-child(1) {order:2;}
  .project-card.web.komo > div:nth-child(2) {order:3;}
  .project-card.web.komo > div:nth-child(3) {order:4;}

  .project-card.web.komo > div:nth-child(4),
  .project-card.web.komo > div:nth-child(5),
  .project-card.web.komo > div:nth-child(6){display:none;}

  .project-card.email:hover > div.center,
  .project-card.web.main:hover > div.center{
    transform: none;
  }
  #mouse_body.email{
    height: 30vh;
    padding-left: 40px;
    padding-right: 40px;
    
  }
  

}



/* Mobile
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 800px) {
  .video-container{
    display:none;
  }
 
  .skills{
    flex-direction: column;
  }
  .skills > div{
    width:100%;
    margin-bottom: 50px;
  }
  .card {
    width: 48.5%;
    height: 400px;
  }

  .project-card {
    margin-bottom: 15px;
    padding: 20px;
    
  }
  .project-grid h3,.proj-email h3{
    font-size: 1.125em;
    margin: 0 0 15px;
    gap: 12px;
    
  }
  .project-grid h3 span {
    width: 28px;
    height: 28px;
    background-size: 6px;
    top: 2px;
  }
  .project-grid aside,.proj-email aside{
    gap: 8px;
    margin: 0 0 55px;
    width: 100%;
    flex-wrap: wrap;
   
  }
  .project-grid aside span,.proj-email aside span{
    height: auto;
        font-size: 12px;
  }

  .project-card > div,.project-card > div video{
    border-radius:8px;
  }

  .proj-email .deets{
     flex-direction: column;
     margin: 5px 0 0;
  }


  .project-card.web.main{
    gap: 15px;
    flex-wrap: nowrap;
  }
  .project-card.web.main > div,
  .project-card.web.main > div.center{
    width: 48% !important;
    aspect-ratio: 1 / 2 !important;
    background-size: cover !important;
  }
 
  .project-card.web.society > div:nth-child(1){
    background: url('https://d11wtnpetvvan1.cloudfront.net/img/projects/web/web_society-m-1-min.jpg') center 0 no-repeat  !important;
    background-size: cover !important;
  }
  .project-card.web.society > div:nth-child(2){
    background: url('https://d11wtnpetvvan1.cloudfront.net/img/projects/web/web_society-m-2-min.jpg') center 0 no-repeat  !important;
    background-size: cover !important;
  }


  .project-card.web.komo > div,
  .project-card.web.komo > div.center{
    width: 48% !important;
    aspect-ratio: 1 / 2.5 !important;
  }

  .project-card.web.komo > div:nth-child(1){
    background: url('https://d11wtnpetvvan1.cloudfront.net/img/projects/web/komoniwana-mobile-min.jpg') center 0 no-repeat  !important;
    background-size: 100% !important;
  }
  .project-card.web.komo > div:nth-child(2){
    background: url('https://d11wtnpetvvan1.cloudfront.net/img/projects/web/komoniwana-mobile-item-min.jpg') center 0 no-repeat  !important;
    background-size: 100%  !important;
  }


  .project-card.web.komo > div:nth-child(3),
  .project-card.web.main > div:nth-child(4),
  .project-card.web.main > div:nth-child(5),
  .project-card.web.main > div:nth-child(6),
  .project-card.web.main > div.center{
   display:none;
  } 

  .project-card.social,.project-card.email {
    gap: 15px;
  }

  .project-card.web.alt{
    align-items: flex-start;
    max-height:500px;
    padding-top: 20px;
  }

   .proj-email {
       gap: 10px;
      margin-bottom: 55px;
  }

  
}



@media (max-width: 600px) {
  .project-card {
    padding:0;
    background:none !important;
  }
  section#top div.cont div:nth-child(2) {
    margin-top: 0;
  }

 
 
  #mouse_body.email{
    height: 25%;
  }
  .mobile-hide{display:none;}
}



/* iPhone Plus/Max portrait */
@media (max-width: 480px) {
  body{
    font-size:17px;
  }
  header {
    padding: 8% 35px 0;
}
  section{
    padding: 4rem 35px ;
  }
  section.email{
    padding: 1.5em 35px ;
  }

  section#top div.cont div:nth-child(2) {
    margin-top: 20px;
}

section#top div.cont.email div:first-of-type {
    min-width: 0;
}



  .email h1{
            font-size: 2.5em;
    display: block;
            margin: 30px 0 25px;
  }

  .email h2 {
    font-size: 2.5em;
        margin: 0 0 20%;
}

  h6 {
    font-size: 1em;
    padding: 0 0 0 3px;
  }
  .skills div:nth-child(6) {
    margin-bottom: 0;
  }
  .skills > div h3{
    gap: 15px;
  }
  .skills > div h3 span{
    width: 40px;
    height: 40px;
  }
  .skills div h3 span img{
    width:20px;
  }
  .skills > div:nth-child(1) h3 span img{
    width:22px;
  }
  .skills > div:nth-child(3) h3 span img{
    width:25px;
  }

  .project-grid{
    padding: 0;
    background-color: unset !important;
  }
  
  .project-card{
    overflow: visible;
    margin-bottom: 22px;
  }

  .project-card.web.alt{
    max-height: none;
    padding-top: 0;
  }


  .project-card.trib > div.center{
    height: 515px;
    background-color: #fff;
  }
  .project-card.trib2 > div.center{
    height: 590px;
    background-color: #d9d9d9;
  }

  .project-card.web.alt{
    gap: 15px;
    height: auto;
    justify-content: space-between;
  }
  .project-card.web.alt > div,
  .project-card.web.alt > div:nth-child(2){
    width: 175px;
    height: 550px;
    margin:0;
  }
  .project-card.web.alt.gtg > div,
  .project-card.web.alt.gtg > div:nth-child(2){
    background: url('https://d11wtnpetvvan1.cloudfront.net/img/projects/web/gtg-desktop-mobile-min.jpg') no-repeat center top !important;
    background-size:100% !important;
  }
  .project-card.web.alt.gtg > div:nth-child(2){
    background-position:center bottom !important;
  }

  .project-card.web.alt.k9 > div,
  .project-card.web.alt.k9 > div:nth-child(2){
    background: url('https://d11wtnpetvvan1.cloudfront.net/img/projects/web/king-detection-k9-mobile-min.jpg') no-repeat center top !important;
    background-size:100% !important;
  }
  .project-card.web.alt.k9 > div:nth-child(2){
    background-position:center 95% !important;
  }

  .project-card.web.alt.arimathea > div,
  .project-card.web.alt.arimathea > div:nth-child(2){
    background: url('https://d11wtnpetvvan1.cloudfront.net/img/projects/web/arimathea-m-1.webp') no-repeat center top !important;
    background-size:100% !important;
  }
  .project-card.web.alt.arimathea > div:nth-child(2){
    background: url('https://d11wtnpetvvan1.cloudfront.net/img/projects/web/arimathea-m-3.webp') no-repeat center top !important;
    background-size:100% !important;
  }

  .project-card.web.alt.sunmount > div,
  .project-card.web.alt.sunmount > div:nth-child(2){
    background: url('https://d11wtnpetvvan1.cloudfront.net/img/projects/web/Sunmount---mobile-min.jpg') no-repeat center top !important;
    background-size:100% !important;
  }
  .project-card.web.alt.sunmount > div:nth-child(2){
    background: url('https://d11wtnpetvvan1.cloudfront.net/img/projects/web/Sunmount---mobile-min.jpg') no-repeat center 92% !important;
    background-size:100% !important;
  }



  .project-card.video > div{ 
    height: auto;
  }
  .project-card.video > div video{
    height: auto;
  }

  .project-card.email:hover > div.center,.project-card.web.main:hover > div.center{
    transform: none;
  }

  .project-card.social > div{
    width: 47%;
  }


  

  footer{
    font-size: .75em;
  }
  footer h6{
    letter-spacing: -.25px;
  }
  footer span{
   
  }

  #mouse_body:not(.email) { display: none; }

}




/* iPhone Default portrait */
@media (max-width: 400px) {
  .project-card.web.main > div:nth-child(1),
  .project-card.web.main > div:nth-child(2),
  .project-card.web.main > div:nth-child(3),
  .project-card.web.main > div:nth-child(4){
    width: 148px;
    height: 300px;
  }
  .project-card.web.alt > div,
  .project-card.web.alt > div:nth-child(2){
    width: 148px;
  }
  
}

@media (max-width: 320px) {
  .project-card.web.main > div:nth-child(1),
  .project-card.web.main > div:nth-child(2),
  .project-card.web.main > div:nth-child(3),
  .project-card.web.main > div:nth-child(4){
  
  }
}

/* iPhone 16 Pro & similar retina‑density devices in portrait */
@media only screen
  and (max-width: 402px)
  and (-webkit-min-device-pixel-ratio: 3) {
  
}







.burst-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--brown);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: burst 600ms ease-out forwards;
}

@keyframes burst {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: scale(0.5) translate(var(--x), var(--y));
    opacity: 0;
  }
}


/* PAGE LOADER */
#loader {
  position: fixed;
  background:var(--light);
  width: 100%;
  height: 100vh;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index:99999;
}