/* APPLIES TO ALL WEBPAGES */
/* The default background and text */
body {
    margin: 0 auto;
    height: 100%;
  	text-align: justify;
    font-family: customfont;
    background-color: #EAD6D9;
    text-align: center;
    color: #785A73;
    scrollbar-gutter: stable both-edges;
}

/*Creates a circle shape that is used in the curve effect.*/
.circlecut {
  clip-path: ellipse(54vw 75px);
  background-color: green;
  width: 100%;
  height: 240px;
  position: absolute
}

/*Fills in the space below or above the circles to join it to the main body of color.*/
.circleBG {
  background-color: #8F718A;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

/* The section of detection for the top logo animation. */
.VidSection {
  height: 50vw;
  position: relative;
  z-index: 1;
  background-color: #EAD6D9;
}

.HeightHolderVid {
  height: 100%;
  padding-top: 50px;
}

.headvidholder {
  height: 30px;
  width: 75vw;
  position: absolute;
  z-index: -1;
  transform: translateX(-16vw);
}

/* The actual video of the animated page logo. */
.scrollvideo {
  float: left;
  width: 99%;
  clip-path: polygon(10% 0%, 90% 0%, 90% 99%, 0% 99%);
}

/* Section that containers the header text. */
.containerhead{
  margin-left: 32vw;
  margin-bottom: 50px;
}

/* Page header. */
.pagehead{
  font-size: 7vw;
  text-align: left;
  margin: 0;
}

/* Page subheader. */
.pagesubhead{
  text-align: left;
  font-size: 5vw;
  margin: 0;
}


/* Default heading. */
h1 {
  font-size: 9vw;
  font-weight: lighter;
  margin-top: 30px;
}

/* Default subheading. */
h2 {
  font-size: 5vw;

  font-weight: lighter;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Default small text. */
p {
  padding-left: 50px;
  margin-right: 50px;
  font-size: 25px;
  line-height: 25px;
  text-align: justify;
}

/* If small text needs to have a little more 'umph'. */
.important{
  font-weight: bold;
  font-size: 35px;
}

/* Header area in which the buttons are held */
.tab{
  background-color: #EAEAEC;
  font-weight: bolder;

  top: 0;
  margin: 0;
	left: 0px;
	float: left;

  margin-left: 0;
  margin-right: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: left;
  text-indent: 1250px;

  padding-left: 0;
  padding-right: 0;

  position: fixed;
  z-index: 5;
  bottom: 0;
  width: calc(100% - 50px);
  height: 50px;

  overflow: hidden;

  border-width: 0;
  border-radius: 0px 0px 25px 25px;
}

/* Each individual button on the header */
.tablink {
  font-family: customfont;
  background-color: inherit;
  color: #785A73;
  float: left;
  border: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 20px;
}

/* Effects done on the tablink when hovered over */
.tablink:hover {
	font-weight: bold;
	font-size: 22px;
	background-clip: text;
	background-size: 100%;
  text-shadow: 1px 1px #785A73;
}

/* Links will not be shown as having special colors or an underline, so that way they blend into any buttons */
a {
  text-decoration: none;
  color: inherit;
}

/*white for boxes with drop shadows*/
.iconbox {
  background-color: #EAEAEC;
  transform: translateY(-10px) translateX(-10px);
  border-radius: 100px;

  transition: 0.2s;
}

/*dropshadow for white boxes*/
.shadowbox {
  background-color: #785A73;
  transform: translateY(10px) translateX(10px);
  border-radius: 100px;
}

/*white box for inset effect*/
.InnieIconbox {
  background-color: #EAEAEC;
  transform: translateY(-8px) scale(0.98) scaleY(0.95);
  border-radius: 100px;
}

/*shadow frame for inset effect*/
.InnieShadowbox {
  background-color: #785A73;
  transform: translateY(8px) scale(1.01) scaleY(1.02);
  border-radius: 100px;
}

/*For when buttons are made out of white boxes to create the button effect*/
.iconbutton:hover {
    transform: translateY(-7px) translateX(-7px);
}

/* HOMEPAGE */
/* The content along the left on the moving video on the home page. Seperates the content on the left from the video content. */
.sidebar {
  text-align: center;
  padding-right: 20px;
  width: 30%;
  background-color: #8F718A;
  padding-left: 15px;
  min-width: 350px;
}

#SpaceHolder {
  left: 0;
}

/* The hat on the bottom of the Home page is seperated into a slightly different side bar, as seen below. */
.leftbar {
  text-align: left;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  float: left;
  padding-left: 50px;
}

/*The padding around the mission statement at the bottom of Home.*/
.MistextContain {
  padding: 25px;
}

/* The text on the bottom of the homepage, the summary of the mission of the company. */
.mission{
  margin-bottom: 50px;
  margin-left: 125px;
  margin-right: 125px;
}

/* The More About Us button at the bottom of the page. */
 .misbutt {
   font-family: customfont;
   font-size: 2.5vw;
   color: #785A73;
   background-color: inherit;
   border: none;

   z-index: -1;

   display: block;
   align-items: center;
   width: 100%;

   transform: translateY(-100%);
   position: absolute;

   cursor: pointer;
   transition: 0.2s;
 }

 .MisTitle {
   font-size: 70px;
   padding top: 25px;
 }

 /*Text of the actual Mission section*/
 .mistext {
   font-weight: normal;
   line-height: 1;
   font-size: 35px;
 }

/* What happens to the More About Us button when hovered over */
 a.MisLink:hover button.misbutt {
   font-size: 3vw;
 }

/* This section ensures the little presents on the home page look nice and stay alongside each other */
 ul {
   padding: 0;
   margin: 0;
   display: flex;
 }

/* PROJECTS PAGE IS BELOW */
/* Final Odessy game title */
.FakeButton {
  height: 8vw;
  max-height: 75px;
  padding: 1vw;
  float: right;
}

.ProjectTitle {
  font-size: 70px;
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.ProjectText {
  font-size: 27px;
  letter-spacing: 1.5px;
  line-height: 1;
  padding: 0px 150px;
  margin-right: 0px;
  align-items: center;
}

 .GameTitle {
   font-size: 90px;
   height: 100vh;
   text-align: center;
 }

/* The side section in the Final Odessy bottom section */
.spaceside {
  text-align: left;
  width: 40%;
  margin-right: 5%;
  background-color: inherit;
  height: 100%;
  margin-top: 0px;
}

/*The Final Odessey Sprite that moves with the floating items*/
.SpriteImg {
  float: left;
  left: 0;
  position: absolute;
  z-index: 3;
  margin-top: 50px;
}

/*The white path image itself*/
.SpritePath {
  width: 78vw;
}
 /*The container of the white path image, allowing only some parts to be visible at a time */
.SpritePathBG {
  display: grid;
  place-items: center;

  left: 50%;

  width: 78vw;
  height: 100px;
  margin-top: 50px;

  position: absolute;
  z-index: 2;
  float: left;

  overflow: hidden;

  transform: translateX(-1.5vw);
  overflow:
}

/*how long between stat boxs with scrolls*/
.MoveStats {
  height: 100vh;
}

/* The colored boxes each stat is in */
.StatBox {
  display: block;
  background-color: #F5B765;
  border-radius: 100px 0px 0px 0px;
  padding: 50px;
  height: 55vh;
  z-index: 1;
}

/* The white boxes lined along the top */
.StatImg{
  padding-top: 0px;
  margin-top: 0px;
  width: 110px;
  padding-bottom: 30px;
}

/* Title of each game stat along the top. */
.StatTitle {
  font-size: 3vw;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
  margin-bottom: 20px;
  margin-top: 20px;
  text-align: center;
  line-height: 0.8;

  overflow-wrap: break-word;
  hyphens: manual;
  hyphenate-character: auto;
}

/* The subtitle of each game stat below the title. */
.StatText {
  font-size: 2.25vw;
  padding: 0px;
  margin: 0px;
  line-height: 0.9;
  text-align: center;

  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-character: auto;
}

/* Top pink segment on left in Final Odessey section. */
.StoryTab {
  background-color: #8F718A;
  height: 250px;
  margin: 0px;
}

/* The actual text of the Final Odessey story. */
.storytext{
  font-size: 30px;
  font-weight: bold;
  margin: 0;
  padding: 50px;
}

.SpaceStory {
  font-size: 30px;
  letter-spacing: 1.5px;
  line-height: 1;
  padding: 0px 100px;
  margin-right: 0px;
}

/* The Final Odessey 'behind the scenes' placeholder video. */
.spacevideo {
  align: center;
  display: block;
  margin: auto;
  padding: none;
  width: 80vw;
  padding-bottom: 5vh;
  padding-top: 5vh;
}


/* BACK TO HOME PAGE. */
/* Video of Final Odessey on the Home page. */
.homevideo {
  width: 100%;
  padding-left: 2px;
  position: static;
  padding-top: 10px;

  border-radius: 20px;
  overflow: hidden;
}

/* The height available for the video to move. */
.MoveVid {
  height: 175vh;
  background-color: #8F718A;
  margin-right: 25px;
  width: 75%;
}

/* Basically makes it so the actual video moves. */
section.MoveVid div.holder {
  position: sticky;
  top: 15vh;
}

/* Sometimes things overlap text that aren't supposed to. This puts the text on top. Currently being used on the Restoration Initiative description. */
.AboveTxt {
  z-index: 1;
  position: sticky;
}

/* ABOUT PAGE BELOW */
.OriginText {
  font-size: 30px;
  letter-spacing: 1.5px;
  line-height: 1;
  padding: 0px 100px;
  margin-right: 0px;
}

/* The small images that are on the left of each box in the about page */
.employicon {
  width: 300px;
  position: absolute;
  transition: 0.3s;
  opacity: 0;
}

.employshadow {
  width: 300px;
  float: left;
  transition: 0.3s;
  position: absolute;
  z-index: 1;
}

/*The section that includes both the image and the shadow of each employee*/
.employ {
  transform: translateY(-20px);
  float: left;
  transition: 0.3s;
}

/* The format for each box in the about page */
.box {
  display: block;
  background-color: #F5B765;
  border-radius: 100px 0px 100px 0px;
  padding: 50px;
  color: #EAD6D9;
  font-weight: bold;
  z-index: -2;
}

/* The box color sections are just the change of colors of the previous boxes */
.Lemonbox {
  background-color: #EE9F75;
}

.Embox {
  background-color: #E88985;
}


/* The following background sections create the flow affect for the about boxes */
.ChatBG {
  background: linear-gradient(to right, #EAD6D9 50%, #EE9F75 50%);
}

.LemBG {
  background: linear-gradient(to right, #F5B765 50%, #E88985 50%);
}

.EmBG {
  background: linear-gradient(to right, #EE9F75 50%, #EAD6D9 50%);
}

/* This is the container for the written information in the dropdown section */
.DetailsBox {
  overflow: inherit;
  transition: 0.3s;
}

/* The top section of each employee box including description, text, and title */
.content {
  padding-left: 5vw;
}

/* ALL of the employee text, including hiddent text */
.employtext {
  margin-left: 300px;
  color: #785A73;
  margin-bottom: 25px;
}

/* The arrow button that appears when a box is hovered over */
.arrowbutton {
  background-color: inherit;
  border: none;
  font-family: customfont;
  color: white;
  font-size: 30px;
  margin-left: 49%;
  padding: 0;
  margin: 0;
  width: 100%;

  left: 0;
  position: absolute;
  transition: 0.3s;
}

/* The arrow then bolds whenever you hover directly over it */
.arrowbutton:hover {
  font-size: 35px;
}

/* These are for the boxes on the about page */
.BlackBox {
  background-color: #EAD6D9;
  border-radius: 100px 0px 0px 0px;
  width: 100%;
  height: 200px;
  z-index: 0;
}

/* Background fill-in color around the shapes to create curve illusion on the employee boxes */
.BlackBoxBG {
  background-color: #8F718A;
  width: 100%;
  height: 200px;
}

/* ALL PAGES */
/* The footer */
.bottom{
  background-color: #EAEAEC;
  font-weight: bolder;

  width: 100%;
  height: 5%;

  padding-top: 15px;
  padding-bottom: 15px;
  text-align: left;
  text-indent: 75%;

  left: 0;
  width: 100%;

  position: sticky;

  z-index: 3;
  overflow: hidden;

  border-radius: 25px 25px 0px 0px;
}

/* Footer buttons */
.tablink2 {
  border: none;
  cursor: pointer;
	margin-left: 0;
  transition: 0.2s;
	background-color: rgba(0,0,0,0);

	border-radius: 20px;

  float: right;

}

/* Effects done on the buttons in the footer */
.tablink2:hover {
  transform: scale(1.25);
  filter: drop-shadow(4px 4px #785A73);
}

/*All specifications for desktop*/

#VideoMobileBG {
  display: none;
}
#MobileButton {
  display: none;
}
#EmployMobile {
  display: none;
}
#MobileStats {
  display: none;
}
#GameTitleMobile {
  display: none;
}
#GameTitle {
  display: block;
}

/*ALL changes for mobile or thinner screen*/
@media screen and (max-width: 800px) {
  /* For general use */
  body {
    	text-align: center;
  }
  p {
    padding-left: 30px;
    margin-right: 30px;
    text-align: center;
  }

/* HOME PAGE */
  /* The slider section with the video and button */
  .sidebar {
    text-align: left;
    padding-left: 15px;
    width: 100%;
    box-sizing: border-box;
    background-color: #8F718A;
    padding-left: 15px;
  }

  #homevideoMobile {
    margin: auto;
    width: 90%;
  }
  #VideoMobileBG {
    display: block;
  }
  #MobileButton {
    display: block;
    width: 100%;
    margin-top: 15px;
    padding-top: 15px;
    background-color: #8F718A;
  }
  #homevideo {
    display: none;
    float: none;
  }
  #DeskButton {
    display: none;
  }
  #MobileSide {
    padding-top: none;
    margin-top: none;
  }
  .MoveVid {
    min-width: 0px;
    height: 175vh;
    margin-right: 25px;
    width: 75%;
  }
  /* Home page Mission section */
  .MistextContain {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 10px;
    padding-right: 10px;
  }
  #YellowPres {
    display: none;
  }
  #OrangePres {
    display: none;
  }
  .mission{
    margin-bottom: 50px;
    margin-left: 50px;
    margin-right: 50px;
  }
  .misbutt {
    font-size: 8vw;
  }
  a.MisLink:hover button.misbutt {
    font-size: 9vw;
  }
  .MisTitle {
    font-size: 50px;
  }
  .mistext {
    font-size: 30px;
  }

/* About Page for Mobile! */
  .OriginText {
    font-size: 25px;
    padding: 0px 30px;
  }
  /* About Page Founder boxed */
  #Chat {
    display: none;
  }
  #Lem {
    display: none;
  }
  #Em {
    display: none;
  }
  #EmployMobile {
    position: relative;
    width: 100%;
    display: block;
    padding-top: 150px;
    padding-bottom: 25px;
  }
  #ChatShadowMobile {
    width: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    transition: 0.3s;
  }
  #ChatIconMobile {
    width: 250px;
    position: absolute;
    opacity: 0;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s;
  }
  #EmShadowMobile {
    width: 250px;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s;
  }
  #EmIconMobile {
    width: 250px;
    position: absolute;
    opacity: 0;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s;
  }
  #LemShadowMobile {
    width: 250px;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s;
  }
  #LemIconMobile {
    width: 250px;
    position: absolute;
    opacity: 0;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s;
  }
  .content {
    padding-left: 0;
  }
  .employtext {
    margin-left: 0;
  }
/* Projects Page for Mobile */
  /* Text for Project Overhaul */
  .ProjectTitle {
    font-size: 70px;
  }
  .ProjectText {
    font-size: 25px;
    padding: 0px 30px;
  }
  .MoveStats {
    height: 200vh;
  }
  #ProjectBox {
    border-radius: 75px;
  }
  /* The slider section for F/O! This is still a work in progress */
  .GameTitle {
    font-size: 12vw;
    height: 3vw;
  }
  #GameTitleMobile {
    display: block;
  }
  #GameTitle {
    display: none;
  }
  #DeskStats {
    display: none;
  }
  #MobileStats {
    display: block;
  }

  .SpriteImg {
    float: left;
    left: 0;
    position: absolute;
    z-index: 3;
    margin-top: 10px;
    margin-left: 3vw;
    transform: rotate(90deg);
  }

  .StatBox {
    border-radius: 50px 50px 0px 0px;
  }
  .StatImg{
    width: 100px;
    height: 100px;
    padding-right: 10px;
    margin-left: 3vw;
  }
  .SpritePathBG {

    transform: translateY(-3.5vh);

    margin-top: 75px;

    float: left;
    left: 0;

    margin-left: 3vw;

    height: 54vh;
    width: 100px;

    position: absolute;
    z-index: 2;

    overflow: hidden;
  }
  .SpritePath {
    height: 54vh;
    width: auto;
  }

  #StatInnie {
    margin-top: 5px;
    height: 105px;
    border-radius: 30px;
    width: 100%;
    margin: auto;
  }
  .StatTitle {
    margin-top: 0;
    padding-top: 5px;
    font-size: 40px;
    margin-bottom: 15px;
    text-align: left;
    margin-left: 25px;
  }
  .StatText {
    font-size: 23px;
    text-align: left;
    margin-left: 25px;
  }
  .SpaceStory {
    font-size: 25px;
    padding: 0px 30px;
  }
}