@font-face {
  font-family: "Alef";
  src: url("./Fonts/Alef/Alef-Regular.ttf")
}


/*

/*Global*/

/* Accent Colour */

.yellow {
  color: #FFC700;
}

/* Lines used */

.long-line {
  border: none;
  width: 21vh;
  height: 6px;
  background-color: #FFC700;

}

.short-line {
  border: none;
  width: 12vh;
  height: 6px;
  background-color: #FFC700;
  margin-bottom: 5vh;

}

.fade{
    opacity: 0;
}

/* Formats the Body */
* {
  margin: 0;
  padding: 0;
}

html {
  background-color: #344966;
}
/* */



/* Wrapper houses everything (is usefull when doing parallax) */
.wrapper {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
  scroll-snap-type: y mandatory;
  /*Temporary Scroll Snap */
}

/* Name of the section, initializes flexbox */
.section {
  height: 100vh;
  display: flex;
  scroll-snap-align: center;

}



/* Individual page backgrounds */

.home {
  background-color: #344966;
}

.about {
  background-color: #344966;
}

.lecoin {

  background-image: url(./assets/Lecoin.png);
  background-position: -1vh;
}

.leveler {
  background-image: url(./assets/Leveler.png);
  background-position: -1vh;
}

.productivex {
  background-image: url(./assets/Productive.png);
  background-position: -1vh;

}

.contact {
  background-color: #344966;
}




/* This is the main area (this will encompass everything from branding to subtext) */
.main-area {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: left;
  /* You can change this to center, left, or right to choose where the text is */
  align-items: left;
  position: relative;
  margin-left: 4vw;
  /* This is the margin. This allows for the text to be controlled left and right */
}





/* Contains the entire side area (sidebar and lines) */
.side-area {
  display: flex;
}

/* Sidebar */
aside {
  height: 100vh;
  width: 30vw;
  background-color: #344966;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* This is the big div that holds the three lines */
.lines {
  display: flex;
  flex-direction: row;
  align-items: left;
}

/* Line1 */
.line-1 {
  height: 100vh;
  width: 2vw;
  background-color: #D6CBC1;
}

/* Line2 */
.line-2 {
  height: 100vh;
  width: 2vw;
  background-color: #344966;
}

/* Line3 */
.line-3 {
  height: 100vh;
  width: 2vw;
  background-color: #D6CBC1;
}

/* Container for hodling just the side bar (no lines) */

.side-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  
}


/* Text within the sidebar */
.side-bar h1 {
  transform: rotate(270deg);
  color: #D6CBC1;
  font-family: Alef;
  font-size: 15vh;
  font-weight: lighter;
}

/* Arrow within the sidebar */
.side-bar svg {
  fill: #FFC700;
  margin-top: 15vh;
}

/*Branding*/

/* Name */
.branding {
  display: flex;
  align-items: center;
  margin-top: 4vh;
}

/* Logo */
.branding img {
  height: 14vh;
}

/* Tagline */
.branding .branding-text {
  display: flex;
  flex-direction: column;
  margin-left: 2vh;
  font-family: Alef;
  color: #D6CBC1;
}

.branding .branding-text * {
  margin: 0;
  padding: 0;
  font-weight: lighter;

}

/* Formatting main taxt */
.main-text {
  margin-top: 15vh;
}

/*Page 1*/
.home .main-text h2 {
  color: #D6CBC1;
  font-family: Alef;
  font-weight: lighter;
  font-size: 1.25rem;
  margin-top: 5vh;
}

.home .main-text h1 {
  font-family: Alef;
  font-size: 8rem;
  color: #D6CBC1;
}

.home .main-text h3 {
  color: #D6CBC1;
  font-family: Alef;
  font-weight: lighter;
  font-size: 1.25rem;
  margin-top: 0;
}

/*Page 2*/
.about .main-text h2 {
  color: #D6CBC1;
  font-family: Alef;
  font-weight: lighter;
  font-size: 1.25rem;
  margin-top: 5vh;
}

.about .main-text h3 {
  width: 39.4vw;
  color: #D6CBC1;
  font-family: Alef;
  font-weight: lighter;
  font-size: 1.15rem;
  margin-top: 3.61vh;
  text-align: left;
}

.about .main-text h1 {
  font-family: Alef;
  font-size: 1.6rem;
  color: #FFC700;
  margin-top: 6.203vh;
  font-weight: lighter;
}

/* Project Pages */
.project .main-text h1 {
  font-family: Alef;
  color: #FFC700;
  font-size: 2rem;
  font-weight: lighter;
  margin-bottom: 5vh;
}

.project .main-text h3 {
  color: #D6CBC1;
  font-family: Alef;
  font-size: 1.4rem;
  width: 50vw;
  margin-bottom: 5vw;
  font-weight: lighter;
}

.project .main-text h3 span {
  font-family: Alef;
  font-size: 1.5rem;
}

.project .main-text h2 {
  width: 50vw;
  font-size: 1.5rem;
  margin-bottom: 5vh;
  font-family: Alef;
  color: #D6CBC1;
  font-weight: lighter;
}

/* Contact Page */
.contact .main-text h2 {
  color: #D6CBC1;
  font-size: 3vh;
  font-family: Alef;
  text-decoration: none;
  font-weight: lighter;

}

.contact .main-text h2 a {
  color: #D6CBC1;
  text-decoration: none;
  transition: color 0.5s;
}

.contact .main-text h2 a:hover {
  color: #FFC700;
}

.contact .main-text h3 {
  margin-top: 3vh;
  font-family: Alef;
  color: #D6CBC1;
  width: 50vw;
  font-size: 1.5rem;
  font-weight: normal;
  margin-bottom: 5vh;

}

/*Media Queries*/

/* Media query for medium size screens (decreases side area size) */
@media only screen and (max-width: 750px) {

  aside {
    height: 100vh;
    width: 20vw;
    background-color: #344966;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .side-bar h1 {
    transform: rotate(270deg);
    color: #D6CBC1;
    font-family: Alef;
    font-size: 10vh;
    font-weight: lighter;
  }

  /* Decreases font size of the contact links */
  .contact .main-text h2 {
    color: #D6CBC1;
    font-size: 2vh;
    font-family: Alef;
    text-decoration: none;
    font-weight: lighter;

  }

  .home .main-text h1 {
    font-size: 6rem;
  }
}


/* Media query for small mobile screens */
@media only screen and (max-width: 500px) {

  /* Gets rid of side area entirely */
  .side-area {
    display: none;
  }

  /* Reduces main-text margin to make sure the "one line of code at a time" part stays on that page */
  .main-text {
    margin-top: 10vh;
  }

  /* Chaning font sizes */
  .project .main-text h3 {
    width: 100vw;
    font-size: 2rem;
  }

  .project .main-text h1 {
    font-family: Alef;
    color: #FFC700;
    font-size: 1.5rem;
    font-weight: lighter;
    margin-bottom: 5vh;
  }

  .project .main-text h3 {
    color: #D6CBC1;
    font-family: Alef;
    font-size: 1rem;
    width: 75vw;
    margin-bottom: 5vw;
    font-weight: lighter;
  }

  .project .main-text h3 span {
    font-family: Alef;
    font-size: 1rem;
  }

  .project .main-text h2 {
    width: 75vw;
    font-size: 1rem;
    margin-bottom: 5vh;
    font-family: Alef;
    color: #D6CBC1;
    font-weight: lighter;
  }

  /* Changing logo and logo font sizes */
  .branding .branding-text {
    display: flex;
    flex-direction: column;
    margin-left: 2vh;
    font-family: Alef;
    color: #D6CBC1;
    font-size: small;
  }

  .branding .branding-text * {
    margin: 0;
    padding: 0;
    font-weight: lighter;

  }

  .about .main-text h3 {
    width: 75vw;
  }

  .contact .main-text h3 {
    font-size: 1.2rem;
    font-weight: normal;
  }

  .home .main-text h1 {
    font-size: 4rem;
  }
}