body {
	font-family: Arial;
  font-size: 17.5px;
  line-height: 1.3;
  color: #000000;
  background-color: #000000;
 
  /* background:conic-gradient(transparent 0, transparent 75%, rgba(0,0,0,0.4) 75%),
  conic-gradient(transparent 0, transparent 25%, rgba(0,0,0,0.4) 25%, rgba(0,0,0,0.4) 50%, transparent 50%) #83613D;
  background-size: 9px 9px, 9px 9px; */
 
  
  /* 83613F */
  
  min-height: 100%;
  /* min-height: 100%; */
  display: flex;
  flex-direction: column;
  /* prevents excess space on x-axis */
  
  /* no margin and width so that we can control those with the "main" tag */
  overflow-x: hidden;
}


main /* container for everything outside of vertical menu */ {
  position: relative;
  z-index: 1;
 
  max-width: 1650px; 
  align-self: center;
 
  height: 100vh;
  /* ensures we can't see anything else (nav); want to make it appear as if it's shifting over */
  
  /* min-height: 100vh;  */
  
  transition: transform 0.5s;
  
  /* 240 over on x-axis and 0 on y-axis; want to do in javascript so it does it on toggle or click 
  transform: translate(240px, 0); */
}


/* when we click on toggle, main page will shift to the right; !! must add this "classList" item to js for it to work !! */
main.open {
  transform: translate(230px, 0);
}


button /* style for all buttons */ {
  border: 1px solid rgba(255, 0, 0, 0);
  border-radius: 0;
  font-family: Arialnb;
  color: #171717;
  
  font-size: .85em;
  
  padding-top: 1em;
  padding-bottom: 1.2em;
  padding-left: 4.25em;
  padding-right: 4.25em;
}




/* /////////////////////////// Media Queries ////////////////////////// 1040px */


@media (min-width:1650px) {
  
    .cubeContainer {
  margin-top: 15%; /* 164 */
}
  
  .cube { 
  height: 305px; 
  width: 305px;
}
  
  span.coreValues {
  font-size: 23.5px;
}
  
  .cube p /* cube paragraph */ {
  margin-top: 14px;
  font-size: 18.5px;
}
  
  #front {
  transform: translateZ(205px); /* yellow */  
}
  
  
}





@media (min-width:1500px) {
  
  .menuContainer /* length of menu-bar */ {
  margin: 0 40px 0 40px;
}
  
  .menuBar /* style for menu-bar + logo */ {
  padding: 40.65px 0px 74px 0px;
}
  
  .menuBar img /* logo size */ {
  height: 38px; /* 20.5px */
}
  
  #toggleOpen /* .nav-toggle */ {
  padding: 11.85px 8.35px 11.85px 8.35px;
}
  
  #menuNav button {
  padding: 10.65px 11.65px 10.65px 11.65px;
}
  
  .menuNav a {
  font-size: 6.8vw;
}
  
  .grid /* background */ {
  background-size: 40px 40px;
}

  .aboutMe /* Role, Name, Picture */ {
  gap: 15%; /* 150px */
}                     
  
  .myPortrait img {
  max-height: 345px;
  width: auto;
}
  
  .cubeContainer {
  margin-top: 15%; /* 164 */
}
  
  .cube { 
  height: 280px; 
  width: 280px;
}
  
  span.coreValues {
  font-size: 23.5px;
}
  
  .cube p /* cube paragraph */ {
  margin-top: 14px;
  font-size: 18.5px;
}
  
  #front {
  transform: translateZ(180px); /* 150 */
}
  
  .galleryImg /* gallery image position */ {
    display: inline;
    margin-right: -6px; /* -5px default */
  }
  
  
}



@media (max-width:1100px) {
  
  .header {
  font-size:.95rem; /* 14px */
  padding-left: 18px;
  padding-top: 13px;
  padding-bottom: 14px;
}
  
  .menuNav a {
  font-size: 82px;
}
  
  .Role {
  font-size: 58px;   
} 
  
  .projectsHeading /* Featured... */ {
    font-size: 52px;  
} 

.Name {
  font-size: 21px;
}
  
  .myPortrait img {
  max-height: 250px;
  width: auto;
  border: 2px solid #0d0a0d;
  margin-top: 42px;
}
  
  .myApproach /* every pixel.. */ {
  font-size: 24px;
  border: 1.5px solid #0d0a0d;
  
  padding: 40px 48px 42.5px 48px;
  margin: 56px 38px 0px 38px;
}
  
  .fontSwap /* here's.. */ {
  font-size: 24px;
}
  
  .marqueeItem {
 font-size:4.25rem;
}

  .footer .b /* footer "ball" */ {
  animation: moveX 6.1s linear 0s infinite alternate, moveY 6.9s linear 0s infinite alternate;
}
  
  .sign p /* Updating... */ {
font-size: 48px;
}
  
.blinker /* Updating... */ {
  font-size: 56px;
}
 
}





@media (max-width:930px) {
  
  .Role /* Brand D.. */ {
   font-size: 52px; 
}

  .projectsHeading /* Featured... */ {
   font-size: 46px; 
}
  
 .footer .b /* footer "ball" */ {
  animation: moveX 5.1s linear 0s infinite alternate, moveY 5.9s linear 0s infinite alternate;
} 
  
  .cube { 
  height: 245px; 
  width: 245px;
}
  
  span.coreValues {
  font-size: 19px;
}
  
  .cube p /* cube paragraph */ {
  margin-top: 14px;
  font-size: 15.5px;
}
  
  #front {
  transform: translateZ(145px);
  /*  */  
}
  
  
  .projects /* Featured > Projects */ {
  padding: 170px 20px 0px 20px;
}
  
  
  #firstBrief, #secondBrief, #thirdBrief, #fourthBrief, #fifthBrief  {
  display: block;
  margin: auto;
  padding: 16px 16px 30px 24px;
  height: 100%;
  width: 100vw;
}
  
  .p-1 {
  margin-bottom: 8px;
}

  .p-2 {
  margin-bottom: 8px;
}
  
  #projYear {
    margin-left: 8px;
  }
  
  .gallery /* gallery format */ {
    height: 100%;
    width: 100vw;
  }
  
  .gallery img /* gallery image size */ {
    min-width: auto;
    min-height: 100%;
    }
  
  video {
    width: 100%;
    height: auto;
  }
  
  .gallery video {
    min-width: 100%;
    min-height: auto;
  }
 
   
}






@media (max-width: 545px) {
  
  .menuNav a /* About, Blog */ {
  font-size: 72px;
}
  
  .menuBar /* style for menu-bar + logo */ {
  padding: 38.65px 0px 80px 0px;
}
  
  .aboutMe /* Role, Name, Picture */  {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0%; /* 150px */
  padding: 0px 38px 0 38px;
}
  
  .Role /* Brand D.. */ {
  font-size: 9.7vw; /* 11.7vw */
}
  
  .Name /* Samantha */ {
  font-size: 4.5vw; /* 14.5px */
}
  
  .projects /* Featured > Projects */ {
  padding: 104px 20px 0px 20px;
}
  
  .projectsHeading /* Featured... */ {
  font-size: 9vw;
  margin-bottom: 42px;
}
  
  .myApproach {
  font-size: 6vw; /* 18.5px */ 
  border: 1.5px solid #0d0a0d;
  padding: 22px 28px 24.5px 28px;
  margin: 36px 20px 0px 20px;
}
  
.fontSwap /* About */ {
  font-size: 6vw;
}
  
  .cubeContainer {
  margin-top: 116px;
}
  
  .cube {
  margin: auto;
  position: relative;
  height: 215px;
  width: 215px;
  transform-style: preserve-3d;
}
  
  span.coreValues {
  font-size: 16.5px;
}
  
  .cube p {
  margin-top: 10px;
  font-size: 15px;
}
  
  .cube div {
  padding: 20px 20px 0px 20px;
}

.cube > div {
  border: 1.5px solid #0d0a0d;
}
  
  #front /* cube, yellow side */ {
  transform: translateZ(115px);
}
  
  .footer /* format */ {
  height: auto;
  padding-top: 10.5%;
  padding-bottom: 10.5%;
}
  
  .footer .b /* footer "ball" */ {
  animation: moveX 4.1s linear 0s infinite alternate, moveY 4.9s linear 0s infinite alternate;
} 
  
  .footer .t /* footer text format */ {
  flex-direction: column;
}
  
  .t .pd /* text padded footer */  {
    margin-right: 0%;
    margin-bottom: 6.5%;
  }

  
  .sign p /* Updating... */ {
font-size: 42px;
}

.blinker /* Updating... */ {
  font-size: 48px;
}

  
}