style.css

:root {
  --main-bg-color: #0F044C;
  --transparent-main--bg-color: #0F044c90;
  --secondary-color: #141E61;
  --transparent-secondary-color: #141e6184;
  --main-header-color: #ecedf7;
  --text-color: #EEEEEE;
  --highlight-color: rgb(22, 167, 53);
  /* dunno how organize use what colors for what... reorganize if want 
       or we can wait, but...
       
       also might need switch to rgba to get transparent values...? unsure

       WOULD BE HAPPY FOR U TO FIGURE THIS OUT SO I DONT HAVE TO :D
       like... idk how many colors need and how organize them :/
    */

  --header-font:'Mulish';
  --content-font: 'Fira Sans';
  /* are we using more than one font...? */
}
:-webkit-any-link {
  color: inherit;
  text-decoration: inherit;
}


html,
body {
  /* did this cus whitespace at top of page... i dunno if will cause issues later */
  width: 100%;
  height: 100%;
  margin: 0;
  overflow-wrap: normal;
  color: var(--text-color);
  font-size: 1.2rem;
}

.wrapper {
  display: inline-flex;
  flex-direction: column;
}

.sectionHeader{
  font-size: 2.2em;
}

.sectionText {
  padding: 0vh 50vw 0vh 10vw;
}

.sectionDiv {
  background-color: var(--main-bg-color);
  color: var(--text-color);
  height: 100%;
}


#titleArea {
  height: 100vh;
}


#mainContent{
  margin-top: 50vh;
  text-align: center;
}

#title {
  color: var(--main-header-color);
  font-size: 5vw;
  font-family: var(--header-font);
}

.joinButton{
  cursor:pointer;
  border-radius: 15px;
  font-family: var(--header-font);
  font-size: 1rem;
  color: white;
  width: 20vw;
  height: 5vh;
  background-color: var(--transparent-secondary-color);
}

#titleArea {
  background: linear-gradient(-2deg, var(--main-bg-color), var(--transparent-main--bg-color) 30%);
}

.inactive {
  animation-name: fadeOut;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

.active {
  animation-name: fadeIn;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

.bgImg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -3;
}

.centered {
  text-align: center;
}

#navBarDiv {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
  background-color: var(--secondary-color);
  transition: background-color 0.5s;
}

#navBarDiv.transparent{
  background-color:transparent;
}

#navBar {
  list-style-type: none;
  height: 5%;
}

.navBarItems {
  font-size: 1.1rem;
  display: inline;
  padding: 1vh 2vh;
  color: var(--text-color);
  transition: text-decoration-color 500ms, font-size 500ms;
}

.fa-brands {
  float: right;
  padding: 3vh;
  z-index: 2;
}

.type {
  color: #14f3db;
  overflow: hidden;
  height: 1.2em;
  animation-name: slide;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}



.innerDiv {
  padding-top: 30vh;
  position: relative;
}


#aboutHeader{
  position: absolute;
  right: 8vw;
  padding-left: 3vh;

}

#aboutHeader.activeHeader {
  position: fixed;

}

#aboutHeader.endHeader{
  position: absolute;

}
.slidingimg {
  height: 36vh; /* img ratio is 9:16... i think thats what most img ratios are..? */
  width: 64vh;
  border-radius: 15%;
  transition: 0.4s;
  background-image: url('images/bbusinessimgfiller1.jpeg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/*need better way to choose end position maybe js...? */


.aboutText-header {
  padding: 17vh 50vw 0vh 10vw;
  font-family: var(--header-font);
  font-size: 30px;
}

.aboutText{
  height: 40vh;
  padding-bottom: 30vh;
  font-family: var(--content-font);
}


#schedulingDiv{
  display: flex;
  padding: 0 10vw 30vh 10vw;
  justify-content: space-around;
}

#scheduleHeader{
  text-align: center;
}

#scheduleAreaImg{
  align-self: center;
}

.scheduleItem{
  list-style: none;
  font-family: var(--content-font);
  font-size: 2.7vh;
  padding: 2.5vh 7vw 2vh 0;
  border-bottom: solid;
  border-width: 1px;
}

.time{
  padding-left: 1vw;
  font-weight: bold;
  color: var(--highlight-color);
}


#faqDiv{
  padding: 0 15vw 60vh 15vw;
  font-size: rem;
}

#faqBody{
  display: flex;
  flex-direction: row;
}

.faqDivider{
  max-width: 40vw;
}

#leftFAQ{
  padding-right: 5vw;
}


.questionHeader::before{
  content: '+ ';

}
.questionHeader {
  cursor: pointer; 
  font-size: 0.8em;

}

.answer{
  font-size: 0.75em;
  max-height: 8vh;
  padding-left: 1.1vw;
  transition: max-height 0.2s ease-out;
  overflow: hidden;
}

.hidden{
  max-height: 0;
}

#footer{
  background-color: var(--secondary-color);
  font-size: 0.5em;
  height: 15vh;
  align-items: center;
  display: flex;
  
}
ul{
  list-style: none;

}


@keyframes slide {
  100% {
    left: 100%;
  }

}

@keyframes fadeOut {
  from {
    opacity: 1
  }

  to {
    opacity: 0;
  }

}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}