@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;700&family=Zilla+Slab+Highlight&display=swap");

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scroll-container {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
}

.navBar {
  width: 5%;
  height: 100%;
  position: fixed;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  list-style-type: none;
  text-decoration: none;
  transform: translateX(1870%);
}

.navBar li a {
  font-size: 100%;
  letter-spacing: 10%;
  list-style-type: none;
  text-decoration: none;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Barlow Condensed", sans-serif;
  color: #ffdff8;
  font-weight: bold;
  transition: 2s;
}

.navBar li a:hover,
a:active {
  color: #ffa6e3;
  text-shadow: 0 0 10px #fefcff;
  font-weight: bold;
}

h1 {
  font-family: "Work Sans", sans-serif;
  font-weight: lighter;
  color: #ffdff8;
  letter-spacing: 5px;
  font-size: 40px;
  opacity: 80%;
}

p {
  font-family: "Nunito", sans-serif;
  color: #ffdff8;
  font-weight: lighter;
  font-size: 18px;
  text-align: justify;
}

a {
  text-decoration: none;
  color: #ffdff8;
}

img {
  width: 100%;
  transition: 1s;
}

/* Properties for background video */
#heroVideo {
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 0;
}

#v0 {
  z-index: -1;
  left: 50%;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 20%;
  transform: translate(-50%, -70%);
  object-fit: none;
  bottom: 0;
  right: 0;
}

#set-height {
  object-fit: contain;
  z-index: 0;
  width: 90%;
  height: 90%;
  display: flex;
  resize: both;
  justify-content: center;
  align-items: center;
}

/* Class to be added to any section displayed as flex container */
.flexCol {
  display: flex;
  flex-direction: column;
}

/* Common header properties */
.sectionHeader {
  justify-content: flex-start;
  opacity: 100%;
  text-align: bottom left;
  /* align-self: center; */
  display: block;
}

/* Header of about section */
#aboutHeader {
  transform: translateY(-180%);
}

/* Header of projects section */
#projectsHeader {
  padding-top: 10vh;
  padding-left: 10vw;
  height: 7vh;
  width: 90vw;
  /* display: block; */
}

/* Header of about section */
#contactHeader {
  padding-top: 10vh;
  padding-left: 10vw;
  height: 10vh;
  width: 90vw;
}

/* Section containing the hero header video */
#section1 {
  display: flex;
}

/* Attributes that all sections share */
section {
  width: 100vw;
  height: 100vh;
}

/* About section */
#section2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rbga(28, 30, 51, 1);
  opacity: 100%;
}

/* Contact section */
#section4 {
  justify-content: center;
}

/* Transitions added to all projects when clicked, so background will change smoothly */
.maActive,
.cppActive,
.faceActive,
.loopActive,
.pulActive,
.sqActive {
  transition: 1s;
}

/* Background of Meme Aesthetics project once clicked */
.maActive {
  background: linear-gradient(
    11deg,
    rgba(187, 150, 151, 1) 0%,
    rgba(140, 139, 160, 1) 100%
  );
}

/* Background of CPP project once clicked */
.cppActive {
  background: linear-gradient(
    25deg,
    rgba(104, 156, 189, 1) 0%,
    rgba(97, 126, 174, 1) 100%
  );
}

/* Background of animated face project once clicked */
.faceActive {
  background: linear-gradient(
    47deg,
    rgba(169, 145, 144, 1) 0%,
    rgba(94, 78, 91, 1) 76%
  );
}

/* Background of animated loop project once clicked */
.loopActive {
  background: linear-gradient(
    47deg,
    rgba(172, 168, 174, 1) 0%,
    rgba(112, 119, 137, 1) 76%
  );
}

/* Background of animated pulmonem project once clicked */
.pulActive {
  background: linear-gradient(
    47deg,
    rgba(57, 96, 118, 1) 0%,
    rgba(55, 69, 90, 1) 76%
  );
}

/* Background of animated sketchquisite once clicked */
.sqActive {
  background: linear-gradient(
    47deg,
    rgba(143, 159, 173, 1) 0%,
    rgba(79, 90, 106, 1) 76%
  );
}

/* Divs containing project content and visible when project mockup images are clicked */
.showProjectContainer {
  flex: auto;
  width: 100%;
  height: 65%;
  display: flex;
  visibility: none;
  justify-content: space-around;
  margin-left: 1%;
}

/* Div with slightly adjusted property */
#loopDiv {
  margin-top: 0%;
}

/* Image container to show case project image once project is opened */
#projectImageContainer {
  width: 35%;
  max-height: 70%;
  display: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Text describing the project itself, visible when project mockup is clicked*/
#projectTextContainer {
  font-size: 22px;
  width: 35%;
  margin-left: none;
  margin-right: 10%;
  align-self: flex-start;
  resize: both;
}

/* Header of project once opened */
.showProjectContainer h1 {
  margin-top: 0;
}

/* links within project */
.showProjectContainer a {
  font-weight: bold;
}

/* Video properties for the Face animation project */
.showProjectContainer video#faceVideo {
  width: 80%;
  box-shadow: 10px 20px 40px #463d52;
}

/* Video properties for the Loop animation project */
.showProjectContainer video#loopVideo {
  width: 80%;
  box-shadow: 40px 30px 50px #546075;
}

/* Removing outline from Face animation project */
#faceVideo:focus,
#loopVideo:focus {
  outline: none;
}

/* Adjusting text container */
.textContainer {
  width: 40%;
  resize: both;
}

/* Container, containing project mockups and project divs */
.projectsContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Project Mockup properties */
#projectImgs {
  display: flex;
  flex-wrap: wrap;
  margin-left: 10vw;
  margin-right: 5vw;
  justify-content: flex-start !important;
  align-items: flex-start;
  height: 100vh;
  width: 100vw;
}

/* Icons of contact section */
#contactImgs {
  justify-content: space-evenly;
  align-items: flex-start;
  height: 30vh;
  width: 100vw;
}

/* Flex properties for image row */
.flexImageRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
}

/* Hover effect for each mock image */
.projectMockup img:hover {
  filter: contrast(130%);
  width: 90%;
  cursor: pointer;
}

/* Project mockups */
.projectMockup {
  margin: 0;
  display: flex;
  padding: 0%;
  transition: 2.5s;
  flex-wrap: wrap;
  max-width: 30vh;
  align-self: flex-start;
  display: flex;
}

/* Div containing X to close a project once opened */
#closeDiv {
  margin-top: 2%;
  position: relative;
  width: 1%;
  font-size: 0.7vw;
  padding: 0.5%;
  text-align: center;
  border-radius: 50%;
  border-style: solid;
  border-width: thin;
  font-family: "Nunito", sans-serif;
  transition: 2s;
  background-color: none;
  color: rgba(255, 223, 248, 0.7);
  font-weight: 500;
  display: block;
  left: 50%;
}

/* Hover effect for close X */
#closeDiv:hover {
  background-color: rgba(255, 223, 248, 0.5) !important;
}

/* Icon properties for contact section */
img.icon {
  border-radius: 5%;
  background-color: rgba(255, 223, 248, 0.3);
  transition: 2s;
  width: 4.5vw;
  margin-right: 8vw;
  align-self: center;
  min-width: 50px;
}

/* Icon hover effect */
.icon:hover {
  background-color: #ffdff8;
  text-shadow: 0 0 30px #545b7b;
  box-shadow: 0 0 30px #ffdff8;
}

/* Glowing property */
.glow {
  color: #ffdff8;
  box-shadow: 0 0 30px #545b7b;
}

/* Media Queries */
@media only screen and (max-width: 2536px) {
  #v0 {
    z-index: 0;
    align-self: center;
    right: 50%;
    top: 75%;
    height: 150% !important;
  }

  #set-height {
    justify-content: center;
  }
}

@media only screen and (max-width: 1500px) {
  h1 {
    font-size: 24px;
  }

  p {
    font-size: 15px;
  }
}

@media only screen and (max-width: 1000px) {
  h1 {
    font-size: 18px;
  }

  p {
    font-size: 12px;
  }

  .projectMockup {
    width: 28vw;
  }

  #projectImageContainer {
    width: 45%;
  }
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 15px;
  }

  p {
    font-size: 15px;
  }

  .projectMockup {
    width: 35vw;
  }

    #projectImageContainer {
    width: 55%;
  }
}

@media (min-width:500px) {

    h1 {
    font-size: 28px;
  }

  p {
    font-size: 17px;
  }

  #projectImageContainer {
    width: 50%;
  }

 .projectMockup {
  width: 30%;
}
  
}

@media (orientation: portrait) {
  .showProjectContainer {
    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 0;
    margin-top: 0;
  }

  #projectTextContainer {
    padding: 5%;
    margin-right: 0;
    width: 70%;
    text-align: center;
  }

  #closeDiv {
    margin-top: 10%;
  }

  body {
    background-color: #6e79a2;
  }
}


@media (max-height: 1000px) {
  h1 {
    font-size: 24px;
  }

  p {
    font-size: 15px;
  }
}

@media (max-height: 780px) {
  h1 {
    font-size: 24px;
  }

  p {
    font-size: 15px;
  }
}

@media (max-height: 660px) {
  h1 {
    font-size: 15px;
  }

  p {
    font-size: 13px;
  }

}

@media (max-height: 470px) {
  h1 {
    font-size: 15px;
  }

  p {
    font-size: 11px;
  }

  #projectImageContainer {
    width: 25%; 
  }
}