:root {
  --intro: #ffffff;
  --work: #FFA62B;
  --resume: #EDE7E3;
  --playground: #82C0CC;
  --footer: #ffffff;
  --mainFont: "Alumni Sans";
  --subFont: "Darker Grotesque";

  --contentWidth: 1142px;
}

html{
  scroll-behavior: smooth;
}

body{
  font-family: var(--subFont);
  font-size:16px;
  color:#000;
  line-height:1.4em;
}

a{
  color:#000;
  text-underline-position: under;
}

header{
  position:fixed;
  top:0;
  left:0;

  display:flex;
  justify-content:center;
  height:50px;
  width:100%;
  z-index:1000;
}
section{
  padding:40px;
  display:flex;
  align-items: center;
  justify-content: center;
}

.wrapper{
  box-sizing: border-box;
  max-width: var(--contentWidth);
  width:100%;
  display:flex;
  flex-direction:column;
}

header .wrapper{
  height:50px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding:0px 40px;
  max-width:1600px;
  flex-direction:row;
}

nav{
  font-family:"Alumni Sans";
  text-transform: uppercase;
}

nav a{
  display:inline-block;
  padding:4px 10px;
  letter-spacing: .1em;
  font-weight:400;
  transition: all 300ms;
  text-decoration: none;
}

nav a:hover, nav a.active{
  font-weight:700;
}

#introBG{
  height:50px;
  background-color: var(--intro);
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  z-index:10;
}

#intro, #introText{
  min-height:100vh;
  background-color: var(--intro);
}

#intro .wrapper, #introText .wrapper{
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
  gap:30px;
}

#intro .wrapper img{
  width: 55%;
}

#introText .wrapper p{
  font-family: var(--mainFont);
  font-size:2em;
  line-height:1.5em;
  font-weight:200;
}

#workBG{
  height:50px;
  background-color: var(--work);
  position:sticky;
  top:0;
  z-index:20;
}

#work{
  min-height:100vh;
  background-color: var(--work);
  padding-bottom:100px;
}

#work .wrapper{
  gap:60px;
}

#work .featuredItem{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
  gap:30px;
  align-items:center;
  padding-bottom:4em;
}

#work .featuredItem .content{
  justify-self:end;
  padding:0 4em 0em 2em;
}

#work .featuredItem .mainLogoHolder{
  box-sizing: border-box;
  aspect-ratio: 4 / 3;
  background-color: #272F18;
  border: 8px white solid;
  width:100%;
  display:flex;
  align-items:center;
  justify-content: center;
  border-radius:20px;
  box-shadow: 20px 20px 0px rgba(0,0,0,.20);
}

#work .featuredItem .mainLogoHolder img{
  width:60%;
}

#work .workGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:60px;
}

#work .workGrid div{
  box-sizing: border-box;
  border:8px white solid;
  border-radius:20px;
  aspect-ratio: 4 / 3;
  display:flex;
  align-items:center;
  justify-content: center;
  width:100%;
  box-shadow: 10px 10px 0px rgba(0,0,0,.30);
}

#work .screenshots{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-template-rows:masonry;
  gap:30px;
}

#work .screenshots img{
  width: 100%;
  height:auto;
  border: 8px #ffffff solid;
  border-radius: 20px;
}

#resumeBG{
  height:50px;
  background-color: var(--resume);
  position:sticky;
  top:0;
  z-index:30;
}

#resume{
  min-height:100vh;
  background-color: var(--resume);
  padding-bottom:100px;
}

#resume .historyGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap:30px;
}

#resume .historyGrid div{
  padding:24px;
  border: 1px var(--playground) solid;
  border-radius: 20px;
}

#resume .skillsGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:30px;
}

#resume .skillsGrid div{
  padding:24px;
  border: 1px var(--playground) solid;
  border-radius: 20px;
}

#playgroundBG{
  height:50px;
  background-color: var(--playground);
  position:sticky;
  top:0;
  z-index:40;
}

#playground{
  min-height:100vh;
  background-color: var(--playground);
  padding-bottom:100px;
}

#playground .playgroundGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:60px;
}

#playground .playgroundGrid div{
  position:relative;
  box-sizing: border-box;
  background-color: white;
  border-radius:20px;
  /*aspect-ratio: 4 / 3;*/
  width:100%;
  /*box-shadow: 10px 10px 0px rgba(0,0,0,.30);*/
  padding:24px;
  padding-bottom:3em;
}

#playground .playgroundGrid div .arrowLink{
  position:absolute;
  bottom:20px;
  left:24px;
}

footer{
  background-color: var(--footer);
  display:flex;
  align-items:center;
  justify-content: center;
  padding:.7em 40px;
  text-align: center;
}

h1, h2{
  text-align: center;
  font-family: var(--mainFont);
  font-size:1.2em;
  font-weight:400;
  letter-spacing: 1em;
  margin-right:-1em;

  text-transform:uppercase;
}

.h1_alternate{
  text-align:left;
  font-family: var(--mainFont);
  font-size:2em;
  font-weight:400;
  letter-spacing: .1em;
  line-height:1em;
  margin-right:0em;
  text-transform:uppercase;
}

h3{
  text-align: center;
  font-family: var(--mainFont);
  font-size:1.3em;
  font-weight:600;
  letter-spacing:.5em;
  margin-right:-.5em;

  text-transform:uppercase;
}

h4{
  font-family: var(--mainFont);
  font-size:1.1em;
  font-weight:600;
  letter-spacing:.25em;
  margin-right:-.5em;
  margin-bottom:0px;
  margin-top:0px;
  text-transform:uppercase;
}

h4 .small{
  font-size:.8em;
  letter-spacing:.15em;
}

.arrowLink{
  font-family: var(--mainFont);
  text-transform: uppercase;
  text-decoration: none;
  font-weight:600;
  letter-spacing:.25em;
}
.arrowLink:after{
  content: url("../assets/arrow.svg");
}

ul{
  list-style-image: url("../assets/bullet.svg");
  margin-left:-2em;
}

ul li{
  margin:5px;
}

@media only screen and (max-width: 500px) {
  #work .featuredItem, #work.workGrid, #work .screenshots, #resume .historyGrid, #resume .skillsGrid, #playground .playgroundGrid{
    grid-template-columns:1fr;
  }

  #work .featuredItem .content{
    padding:0;
  }
  
  #work .featuredItem .mainLogoHolder img{
    width:100%;
  }
}