html {font-size:16px; font-family:"Outfit",sans-serif; font-weight:300;}
body {background-color:#f1f1f1; color:#444; font-size:.75rem; font-weight:300; overflow-x:hidden; margin:0 0 8em 0; padding:0; text-align:left; top:0;}
* {font-family:'Outfit'; font-weight:normal;}


/* Headers */
h1 {font-size:8em; font-weight:700; letter-spacing:-.16rem; line-height:auto; margin:0; padding:0;}
h2 {border-top:1px solid #333; font-size:1.8em; font-weight:700; line-height:1.16em; margin:0; padding:.32em 0 0 0}
h3 {font-size:1.8em; font-weight:100; margin:0;}
h4 {font-size:1.24em; font-weight:700; margin:0;} /* Polaroid Titles */
p {font-size:1.16em; letter-spacing:0em; line-height:1.6em;}

/* Links */
a {color:#1baa53; font-weight:bold; text-decoration:none; transition:.32s ease-out;}
a:hover {color:#000; transition:.32s ease-out;}
img:hover {}


section {padding:0px; width:24%;}
section p {max-width:620px; min-width:160px; margin:.4em 0 0 0;}
.section-title {border-bottom:1px solid #333; font-size:1.24em; font-weight:700; margin:4em 0 2em 0; padding:.4em 0;}

/* Alert Bar */
#alert {
    align-items:center; display:flex; flex-direction:row; justify-content:center; 
    background-color:#1db458; gap:.24em; padding:.4em 0; transition:.32s ease-out; position:fixed; text-align:center; width:100%; height:auto; z-index:1000;}
#alert a {color:#fff; padding:.24em 1em .24em 1em; text-decoration:none;}
#alert a:hover {background-color:#0F9C46; border-radius:16px;}
#alert a.current {border-top:1px solid #fff; margin:0 1em; padding:.24em 0;}
#alert a.current:hover {background-color:#1db458; border-radius:0;}
#alert a.icon {padding:.4em;}



.bio {font-size:1.64em; font-weight:100; 0 12em 0 0; padding:0;}
.button {background-color:#1db458; border-radius:4px; color:#fff; font-size:.8em; font-weight:bold; padding:.8em 1em; text-align:center; transition:.64s ease-out; width:max-content; height:auto;}
.button:hover {background-color:#000; transition:.64s ease-out;}

#content {overflow:hidden; margin-top:1em; padding:0 3.2em; width:100w; height:auto; z-index:24;}

#footer {font-size:1em; padding-top:2em;}
#footer a {font-weight:bold; color:inherit; text-decoration:none;}
#footer a:hover {color:#1db458;}

.grouping {align-items:flex-start; display:flex; flex-direction:row; gap:120px; width:100%; height:auto;}

.piece-list {display:grid; grid-template-columns: repeat(4, 1fr); padding:0px; gap:8px;}
.piece {border:0px solid #eee;}

.selfie {padding-top:2.4em;}
.selfie-byline {font-size:.75em; font-style: italic;}


/* ----- NAVIGATION ----- */
.nav {display:flex; flex-direction:row; font-size:1.24em; justify-content:center; align-items:center; padding:0px; gap:1em;}
.nav a {line-height:200%;}
.nav .current {color:#333;}
.nav .current:hover {cursor:default;}


/* ----- SIDE PROJECTS (About Me) ----- */
#project-samples {display:grid; 
    grid-template-columns: auto auto auto auto;
    grid-gap:1.6vw; 
    grid-row-gap:1.6vw; width:100%; height:auto;
}

#project-samples .piece {overflow:hidden; width:22vw; height:auto;}
#project-samples .piece:hover {box-shadow:.25em .25em #1db458; transition:.32s ease-out;}

.project-info {background-color:#fff; padding:1em; transition:3s ease-in; width:fill-content; block-size:fit-content; height:auto;}
.project-title {font-size:1.25em; font-weight:bold; line-height:1.4em;}
.project-description {font-weight:normal; padding-bottom:.75em;}

#work-samples {width:100%; height:auto;}
#work-samples img {background-color:#222; object-fit:cover; object-position:center center; 
width:22vw; height:16vh;}


/* ----- POLAROIDS (About Me) ----- */
#polaroids {display:flex; flex-direction:row; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; padding-bottom:3em; width:100%; height:auto;}

.polaroid {background-color:#fff; margin:1em 1em 0 0; padding:1em; display:flex; flex-direction:column; width:auto; height:auto;}
.polaroid img {margin:0; padding:0; width:auto; height:auto;}
.polaroid:hover {box-shadow:.25em .25em #1db458; cursor:move;}
.polaroid a {color:#000; text-decoration:none;}
.polaroid a:hover {color:#1db458;}

#polaroid-description {padding:.8em 0 .24em 0;}
#polaroid-description h4 {font-size:1.24em;}
#polaroid-description p {font-size:1em; margin:0;}

/* VIDEO BACKGROUND */
.hero-header {
    align-items:left; display:flex; flex-direction:column; justify-content:center; 
    color:#fff; opacity:1; padding-left:4em; position:absolute; 
    text-align:left; transition:.32s ease-out;
    width:100%; height:640px; z-index:180;}

.hero {
    background-color:#000; 
    margin:0; overflow:hidden; 
    padding:0; position:relative; text-align:center; 
    width:100%; height:auto; max-height:640px; 
    z-index:24;
    }

video#reel { 
    background-color:#000; object-fit:cover; opacity:.5; position:relative;
    min-width:100%; min-height: 100vh; 
    z-index:88;
    -ms-transform: translateX(0%) translateY(-16%);
    -moz-transform: translateX(0%) translateY(-16%);
    -webkit-transform: translateX(0%) translateY(-16%);
    transform: translateX(0%) translateY(-16%); 
}

/* ----- VIDEO CARDS (About Me) ----- */

#video-container {display:grid; 
    grid-template-columns: auto auto auto auto;
    grid-gap:1.6vw; 
    grid-row-gap:1.6vh;
}
#video-container a {color:#000; text-decoration:none;}

.video-preview {background-color:#fff; width:auto; height:auto;}
.video-preview img {object-fit:cover; width:100%; height:12vh;}
.video-preview:hover {box-shadow:.25em .25em #1db458; transition:.32s ease-out;}
.video-preview-info {padding:.4em 1em 1.24em 1em; transition:3s ease-in; width:fill-content; block-size:fit-content; height:auto;}
.video-preview-title {font-size:1.24em; font-weight:700; line-height:1.4em;}
.video-preview-location {font-weight:normal; padding-bottom:.75em;}
.video-preview-cta {background-color:#000; color:#fff; font-weight:bold; padding:.5em; transition:ease-in 300ms; width:fit-content;}
.video-preview-cta:hover {background-color:#1db458; transition:.32s ease-out;}


/* ----- TEXT STYLES (But Not Textiles) ----- */
.caption {letter-spacing:0em;}
.caption-date {color:#999; padding-top:.8em}
.caption-title {font-size:1.32em; font-weight:bold; margin-bottom:.4em;}
.year {color:#676767; font-size:.8em; margin-top:.8em;}


/* ----- RESPONSIVENESS BELOW ----- */
@media screen and (min-width:220px) {
    #content {padding:2.4em;}
    .bio {margin:0;}
    #footer {width:100%;}
    #project-samples {grid-template-columns: auto auto;}
    #project-samples .piece {width:100%; height:auto;}
    #video-container {grid-template-columns: auto auto;}
    #work-samples img {width:44vw; height:16vh;} 
}


@media screen and (min-width:768px) {
    #content {padding:3.2em;}  
    #project-samples {grid-template-columns: auto auto;}
    #project-samples .piece {width:100%; height:auto;}
    #video-container {grid-template-columns: auto auto;}
}

@media screen and (min-width:1024px) {
    #footer {width:64%;}
    #project-samples {grid-template-columns: auto auto auto;}
    #project-samples .piece {width:30vw; height:auto;}
    #video-container {grid-template-columns: auto auto auto;}
    #work-samples img {width:30vw; height:16vh;} 
}
  
@media screen and (min-width:1440px) {
    #project-samples {grid-template-columns: auto auto auto auto;}
    #project-samples .piece {width:22vw; height:auto;}
    #video-container {grid-template-columns: auto auto auto auto;}
    #work-samples img {width:22vw; height:16vh;} 
}
    
        
@media screen and (min-width:1920px) {
  .bio {margin:0 40% 0 0;}
    #project-samples {grid-template-columns: auto auto auto auto auto;}
    #project-samples .piece {width:17.8vw; height:auto;}
    #video-container {grid-template-columns: auto auto auto auto auto;}
    #work-samples img {width:17.8vw; height:20vh;} 
}