/*GENERAL INFO

display fonts
font-family: 'Knewave', cursive;
font-family: "Poppins", sans-serif;

reading fonts
font-family: "Roboto", sans-serif;

BRAND COLORS

#d73641 site red
#0f1a22 site black/blue
#5ebef2 title blues
#ceb6b7 off white font
#818181 new grey for creative subtitles
#333333

#e4d9c3 site paper color


TABLE OF CONTENTS

GLOBAL
  NAVIGATION
  MOBILENAV
  FOOTER
RESUME
BIO
CREATIVE
  CRUNCHYROLL+MYLIFE
  THEPROSPERITYPARTY
  NATURESBOUNTYBEAUTY
  VIOLETRAYS
  idNYC


*/

/*GLOBAL STYLES ARE ALL HERE*/

* {
  margin: 0;
  padding: 0px;
  box-sizing: border-box;
}

/*affects the background of everything within the id "body" needs # in front */
#body {
  background-color: #ffffff;
  padding-top: 75px;
}

@media screen and (max-width: 700px) {
  body {
    text-align: center;
  }
}

/* this targets all videos on the site */
iframe {
  width: 95%;
  display: block;
  margin: auto;
  overflow: hidden;
}

/* div that houses all title sections and their contents */
.titlesection {
  margin: 10px 32px;
  text-align: center;
  margin-bottom: 20px;
}

/*This affects all p tags in my title section*/
.titlesection p {
  font-family: "Roboto", sans-serif;
  color: #0f1a22;
  text-decoration: none;
}

/*This affects all a tags in my title section*/
.titlesection a {
  font-family: "Poppins", sans-serif;
  color: #818181;
  font-size: 20px;
  text-decoration: none;
}

.titlesection a:hover {
  cursor: pointer;
}

/*this affects the h1 tag*/
.title {
  /*font-family: "Knewave", cursive;*/
  font-family: "Poppins", sans-serif;
  color: black;
  /*color: #d73641;*/
  /*font-size: 30px;*/
}

/*this affects the h2 tag*/
.subtitle {
  font-family: "Roboto", sans-serif;
  color: #0f1a22;
  font-size: 16px;
}

/*NAVIGATION*/

/*this affects the entire element*/
nav {
  font-family: Knewave, cursive;
  background-color: #ffffff;
  z-index: 1;
  width: 100%;
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 8vh;
}

/*this affects all links within nav*/
nav a {
  color: #d73641;
  text-decoration: none;
}

/*this affects my name*/
.logo {
  font-size: 50px;
}

/*this affects the box that stores all the li*/
.navlist {
  display: flex;
  justify-content: space-around;
  width: 50%;
  margin-left: 200px;
}

/*this allows .navlist to reorganize itself in <700px width conditions*/
@media (max-width: 700px) {
  .navlist {
    margin-left: 50px;
  }
}
/*this affects the all lists within the .navlist class*/
.navlist li {
  list-style: none;
  text-decoration: none;
  color: #d73641;
  font-size: 25px;
}

/*MOBILENAV*/

/*.burger is the div that holds the 3 line divs*/
.burger {
  display: none;
  cursor: pointer;
}

/*affects all 3 divs aka the lines within the burger div*/
.burger div {
  background-color: #d73641;
  height: 4px;
  width: 25px;
  margin: 5px;
  transition: all 0.5s ease;
}

/*toggles 1 2 and 3 animate the lines within .burger on click through js*/
.toggle .line1 {
  transform: rotate(-45deg) translate(-6px, 6.5px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-6px, -6.5px);
}

/*this @media query dictates that mobile nav shouldnt show up above (x)px width*/
@media screen and (max-width: 700px) {
  body {
    overflow-x: hidden;
  }
  /*this makes it so that the mobile li are all invisible*/
  .navlist li {
    opacity: 0;
  }

  /*i think .burger has to display:block in order for js things to work*/
  .burger {
    display: block;
  }

  /*this affects how the mobile nav looks, as well as where it rests off screen*/
  .navlist {
    position: absolute;
    right: 0;
    height: 92vh;
    top: 8vh;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease; /*fades in the nav links upon becoming active*/
  }
}
/*this brings our nav back onto the screen to its proper position onclick through js*/
.nav-active {
  transform: translateX(0%);
}

/*this animation is used in js to slide the links in slightly */
@keyframes navlinksfade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

/*FOOTER*/

/* affects the footer tag/container which doesn't need . in front of it */
footer {
  position: relative;
  bottom: 0;
  background-color: #ffffff;
  margin: 2em;
}

@media screen and (max-width: 700px) {
  footer {
    text-align: center;
  }
}

/* div containing the currently h4 tag and statusline div */

/* specific h4 in footer */
.footertingz {
  color: #d73641;
  font-family: "Poppins", sans-serif;
  /*padding-top: 10px;*/
}

#crlink {
  color: #f68a27;
  text-decoration: none;
}

#tglink {
  color: #f29b34;
  text-decoration: none;
}

#hawkeyelink {
  color: #e9385e;
  text-decoration: none;
}

#boonbeasties {
  color: #b1244f;
  text-decoration: none;
}

/* affects the div where all statuslines are in */
.thingsimdoingbox {
  font-family: "Roboto", sans-serif;
  overflow: hidden;
  color: #0f1a22;
}

/*RESUME*/
/*div that houses all content on page*/
.resumebox {
  margin: 60px 32px;
  overflow-x: hidden;
}

@media screen and (max-width: 700px) {
  .resumebox {
    text-align: left;
  }
}

/*class given to div that houses job title, date, and company*/
.job {
  font-family: "Poppins", sans-serif;
  color: #d73641;
  font-size: 30px;
}
/*class given to the div housing each job's bullet points*/
.exp {
  font-family: "Roboto", sans-serif;
  color: #0f1a22;
}

/*BIO*/
/*id that houses all content on this page*/
#profile {
  margin: 2em auto;
  text-align: left;
  overflow-x: hidden;
}

/*this id given to the img*/
#profilepic {
  margin: auto;
  border-radius: 50%;
  width: 200px;
  display: block;
}
/*class given to the div that houses the text, within #profile div*/
.aboutme {
  font-family: "Roboto", sans-serif;
  color: #0f1a22;
  overflow-x: hidden;
  margin: 2em;
}

#hola {
  font-family: "Knewave", cursive;
  color: #d73641;
  overflow-x: hidden;
  font-size: 30px;
}

@media screen and (min-width: 700px) {
  #profile {
    margin: 2em auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (min-width: 700px) {
  #profilepic {
    margin: 2em;
    border-radius: 50%;
    width: 200px;
    display: block;
  }
}

@media screen and (min-width: 700px) {
  #aboutme {
    margin: 2em;
    width: 800px;
    font-family: "Roboto", sans-serif;
    color: #0f1a22;
    overflow-x: hidden;
  }
}

/*CREATIVE*/

/*this houses all of my projects and allows the grid to happen*/
.workcontainer {
  max-width: 100%;
  display: grid;
  grid-gap: 5px;
  align-content: center;
  text-align: center;
}

/*these media queries allow my creative page to be responsive*/
@media (min-width: 500px) {
  .workcontainer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 700px) {
  .workcontainer {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .workcontainer {
    grid-template-columns: repeat(4, 1fr);
  }
}

/*these house my projects*/
.work00,
.work00a,
.work0,
.work1,
.work2,
.work3,
.work4,
.work5,
.work6,
.work7 {
  height: 350px;
  text-align: center;
  font-family: "Poppins", sans-serif;
  align-items: center;
  overflow: hidden;
  justify-content: space-around;
  transition: 0.5s ease;
}

/*this is for when you hover over each one*/
.work00:hover,
.work00a:hover,
.work00b:hover,
.work0:hover,
.work1:hover,
.work2:hover,
.work3:hover,
.work4:hover,
.work5:hover,
.work6:hover,
.work7:hover {
  transform: translateY(-10px);
  transition: 0.5s ease;
}

/*these have to be different for now until I standardize the photo sizes*/
.work00 {
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url(/img/creative/hawkeyepreview.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.work00:hover {
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url(/img/creative/hawkeyepreview.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.work00a {
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url(/img/creative/civistapreview-01.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.work00a:hover {
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
  url(/img/creative/civistapreview-01.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.work00b {
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url(/img/creative/googlesustainabilitypreview-01.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.work00b:hover {
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url(/img/creative/googlesustainabilitypreview-01.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.work0 {
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url(/img/creative/mylifepreviewalt.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.work0:hover {
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url(/img/creative/mylifepreviewalt.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.work1 {
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url(/img/creative/crunchyrollpreview.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.work1:hover {
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url(/img/creative/crunchyrollpreview.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.work2 {
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url(/img/creative/prosperitypreview.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.work2:hover {
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url(/img/creative/prosperitypreview.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.work3 {
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url(/img/creative/naturespreview.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.work3:hover {
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url(/img/creative/naturespreview.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.work4 {
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url(/img/creative/violetrayspreview.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
.work4:hover {
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url(/img/creative/violetrayspreview.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.work5 {
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url(/img/creative/idnycpreview.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
.work5:hover {
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url(/img/creative/idnycpreview.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

/*.work6 {
  background: linear-gradient(rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.85)),
    url(/img/creative/tostonespreview.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.work6:hover {
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url(/img/creative/tostonespreview.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}*/

/*this class is attached to an a class which turns everything written within into a link*/
.infodump {
  color: #d73641;
  font-family: "Poppins", sans-serif;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-content: center;
  opacity: 1;
  margin-top: 140px;
  transition: 0.25s ease;
}

/*affects what happens to the link class .infodump when you hover over it*/
.infodump:hover {
  color: white;
  cursor: pointer;
}

/*CRUNCHYROLL*/
/*this is housed in the titlesection which itself is a global style, has the jump links*/
.crtitlesections {
  display: flex;
  justify-content: space-around;
  margin-top: 2em;
}

@media (max-width: 700px) {
  .crtitlesections {
    margin-top: 2em;
    flex-direction: column;
    align-content: center;
  }
}

/*this div houses all the email images*/
.displayworkcontainercr,
.displayworkcontainerml {
  /*background-color: black;*/
  width: 95%;
  margin: auto;
  line-height: 0;
  column-gap: 10px;
}

/*this targets all my images*/
.displayworkcontainercr img,
.displayworkcontainerml img {
  width: 100%;
  height: auto;
}

@media (min-width: 200px) {
  .displayworkcontainercr,
  .displayworkcontainerml {
    column-count: 1;
  }
}

@media (min-width: 400px) {
  .displayworkcontainercr,
  .displayworkcontainerml {
    column-count: 2;
  }
}

@media (min-width: 700px) {
  .displayworkcontainercr {
    column-count: 3;
  }
}

@media (min-width: 700px) {
  .displayworkcontainerml {
    column-count: 3;
  }
}

/*@media (min-width: 900px) {
  .displayworkcontainercr {
    column-count: 4;
  }
}*/

/*these are the divs where I explain each section, used in multiple parts of site as well*/
.crexplanations {
  margin: 60px 32px;
  text-align: center;
}
/*the type within those divs above*/
.crexplanations p {
  font-family: "Roboto", sans-serif;
  color: #0f1a22;
  text-align: center;
}

@media (min-width: 600px) {
  .crexplanations p {
    padding-left: 55px;
    padding-right: 55px;
  }
}

@media (min-width: 800px) {
  .crexplanations p {
    padding-left: 200px;
    padding-right: 200px;
  }
}

/*affects the title of the crexplanation section*/
.headline {
  font-family: "Poppins", sans-serif;
  color: #818181;
  font-size: 30px;
  text-align: center;
}

/*THEPROSPERITYPARTY*/
/*class for all the images in process section*/
.prosperityprocess {
  width: 100%;
}

/*NATURESBOUNTYBEAUTY*/
/*displays all the work in this page*/
.displayworkcontainernbb {
  max-width: 95%;
  margin: auto;
  margin-top: 50px;
  overflow: hidden;
}

.displayworkcontainernbb p {
  font-family: "Roboto", sans-serif;
  color: #0f1a22;
  text-align: center;
  padding-bottom: 20px;
}

/*class given to the imgs on hawkeye page, NBB page, Prosperity page, and idnyc page*/
.beauty {
  width: 100%;
  margin-top: -5px;
}

/*VIOLETRAYS*/
/*div that houses the two album covers*/
.displayworkcontainervr {
  max-width: 95%;
  margin: auto;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(2, 1fr);
}

/*image class given to the 2 covers*/
.vrcover {
  width: 100%;
}

@media (max-width: 700px) {
  .displayworkcontainervr {
    grid-template-columns: repeat(1, 1fr);
  }
}

/*div that houses the 4 singles images*/
.displayworkcontainervr2 {
  max-width: 95%;
  margin: auto;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 700px) {
  .displayworkcontainervr2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
/*class for the singles images*/
.vrsingle {
  width: 100%;
}

/*div that houses merch designs*/
.displayworkcontainervr3 {
  max-width: 95%;
  margin: auto;
  display: grid;
  grid-gap: 0px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 700px) {
  .displayworkcontainervr3 {
    grid-template-columns: repeat(1, 1fr);
  }
}
/*div that houses process pieces, used in other places of site too*/
.displayworkcontainervr4 {
  background-color: white;
  max-width: 95%;
  margin: auto;
  display: grid;
  grid-gap: 0px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 700px) {
  .displayworkcontainervr4 {
    grid-template-columns: repeat(1, 1fr);
  }
}

/*IDNYC*/
/*div houses the work on this page*/
.displayworkcontaineridnyc {
  max-width: 95%;
  margin: auto;
  margin-top: 50px;
  overflow: hidden;
}
/*class given to the brochure cover to govern it's appearance*/
.idnyccover {
  width: 100%;
  overflow: hidden;
}

/*
.statusline0,
.statusline,
.statusline2,
.statusline3,
.statusline4,
.statusline5,
.statusline6 {
  animation-name: test6;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 0.25s;
}

.statusline0 {
  color: #0f1a22;
}
.statusline {
  animation-delay: 0.3s;
}
.statusline2 {
  animation-delay: 0.35s;
}
.statusline3 {
  animation-delay: 0.4s;
}
.statusline4 {
  animation-delay: 0.45s;
}
.statusline5 {
  animation-delay: 0.5s;
}
.statusline6 {
  animation-name: test6;
  animation-delay: 0.55s;
}

@keyframes test6 {
  from {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }

  2% {
    transform: matrix(1, 0, 0, 1, 0, 11);
  }

  5% {
    transform: matrix(1, 0, 0, 1, 0, -25);
  }

  10%,
  20% {
    transform: matrix(1, 0, 0, 1, 0, -20);
  }

  22% {
    transform: matrix(1, 0, 0, 1, 0, -15);
  }

  25% {
    transform: matrix(1, 0, 0, 1, 0, -45);
  }

  30%,
  40% {
    transform: matrix(1, 0, 0, 1, 0, -40);
  }

  42% {
    transform: matrix(1, 0, 0, 1, 0, -35);
  }

  45% {
    transform: matrix(1, 0, 0, 1, 0, -65);
  }

  50%,
  60% {
    transform: matrix(1, 0, 0, 1, 0, -60);
  }

  62% {
    transform: matrix(1, 0, 0, 1, 0, -55);
  }

  65% {
    transform: matrix(1, 0, 0, 1, 0, -85);
  }

  70%,
  80% {
    transform: matrix(1, 0, 0, 1, 0, -80);
  }

  82% {
    transform: matrix(1, 0, 0, 1, 0, -75);
  }

  85% {
    transform: matrix(1, 0, 0, 1, 0, -105);
  }

  90% {
    transform: matrix(1, 0, 0, 1, 0, -100);
    opacity: 1;
  }

  92% {
    transform: matrix(1, 0, 0, 1, 0, -95);
    opacity: 1;
  }

  95% {
    transform: matrix(1, 0, 0, 1, 0, -125);
    opacity: 0;
  }

  to {
    transform: matrix(1, 0, 0, 1, 0);
    opacity: 1;
  }
}*/