body {
  background-image:url(GIS_Portfolio/MapRoute3DBackgroundSLOWED.gif);
  background-repeat: repeat-y;
  background-size: 200%;
  background-position: center;
  color: saddlebrown;
  font-family: Minecraftia; 
  margin: 0;
  padding: 0;        
}

@font-face {
   font-family: Minecraft;
   src: url(FrontPage/FIles/minecraftia/Minecraftia-Regular.ttf) format('truetype');
}

.Top {
   position: relative;
   display: flex; 
   flex-direction: row;
   max-width: 100%;
   max-height: fit-content;
   overflow: hidden;
}

.Heading {
  position: relative;
  flex: 1;
  max-width: 100%;
  max-height: fit-content;
  scale: 112%;
  object-fit: cover;
  z-index: -5;
}

.Title {
  flex: 1;
  position: absolute;
  scale: 50%;
  left: 25vw;
  top: -4vw;
  max-height: fit-content;
  max-width: 100%;
  height: auto;
  z-index: 2;
}

.TitleDescription {
  position: absolute;
  flex: 1;
  scale: 75%;
  top: 5.5vw;
  left: 55vw;
  max-height: fit-content;
  max-width: 50%;
  height: auto;
  z-index: 4;
}

.HelpButton {
  content: url(https://invertebrained.neocities.org/GIS_Portfolio/HelpButton.png);
  position:absolute;
  display: flex;
  scale: 8%;
  top: -43vw;
  left: -46vw;
  z-index: 3;
  max-height: fit-content;
  max-width: 100%;
  height: auto;
  transition: opacity 0.05s;
}

.HelpButton:hover {
  content: url(https://invertebrained.neocities.org/GIS_Portfolio/HelpButtonClick.png);
  opacity:1;
  position:absolute;
  z-index: 4;
}

.HomeButton {
  content: url(GIS_Portfolio/HomeButton.PNG);
   position:absolute;
  display: flex;
  scale: 8%;
  top: -45vw;
  left: -39vw;
  z-index: 3;
  max-height: fit-content;
  max-width: 100%;
  height: auto;
  transition: opacity 0.05s;
}

.HomeButton:hover {
  content: url(GIS_Portfolio/HomeButtonClick.PNG);
  opacity:1;
  position:absolute;
  z-index: 4;
}


.Body {
  display: flex; 
  flex-direction: row;
  width: 150%;
  overflow: hidden;
  position: relative;
}

.MapFloat {
  flex: 1;
  position: relative;
  left: -2vw;
  top: -10vw;
  scale: 85%;
  max-width: 100%;
  max-height: fit-content;
  height: auto;
  object-fit: cover;
  display: inline-block;
  z-index: 1;
}

.OrangePin {
  flex: 1;
  position: absolute;
  top: 10vw; 
  left: 18vw;
  scale: 17%;
  z-index: 2;
  max-height: fit-content;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: opacity 0.05s;
}

.OrangePin:hover {
  content: url(GIS_Portfolio/Final_TextBox.png);
  opacity:1;
  box-shadow: inset;
  top: 19vw;
  left: 8vw;
  scale: 47%;
  position:absolute;
  z-index: 3;
}

.YellowPin {
  display: block;
  position: absolute;
  top: -8vw; 
  left: 8vw;
  scale: 14%;
  z-index: 2;
  max-height: fit-content;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  transition: opacity 0.05s;
}

.YellowPin:hover {
  content: url(GIS_Portfolio/TXEdu_TextBox.png);
  opacity:1;
  box-shadow: inset;
  top: -21vw;
  left: -8vw;
  scale: 42%;
  position:absolute;
  z-index: 3;
}

.BrownArrow {
  position: absolute;
  top: 20vw; 
  left: -5vw;
  scale: 20%;
  z-index: 2;
  max-height: fit-content;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: opacity 0.05s;
}

.BrownArrow:hover {
  content: url(GIS_Portfolio/NDVI_TextBox.png);
  opacity:1;
  box-shadow: inset;
  top: 35vw;
  left: -19vw;
  scale: 42%;
  position:absolute;
  z-index: 3;
}

.PaperAirplane {
  flex: 1;
  display: inline-block;
  position: absolute;
  top: 48vw; 
  left: 37vw;
  scale: 25%;
  z-index: 2;
  max-height: fit-content;
  max-width: 100%;
  height: auto;
}

.Resume {
  content: url(https://invertebrained.neocities.org/GIS_Portfolio/Resume.png);
  flex: 1;
  display: inline-block;
  position: absolute;
  top: 66vw; 
  left: 60vw;
  scale: 26%;
  z-index: 10;
  max-height: fit-content;
  max-width: 50%;
  height: auto;
}

.Resume:Hover {
  content: url(GIS_Portfolio/ResumeHover.png);
  opacity:1;
  position:absolute;
  z-index: 4;
}

.CoverLetter {
  flex: 1;
  display: block;
  position: absolute;
  top: 70vw; 
  left: 65vw;
  scale: 20%;
  z-index: 3;
  max-height: fit-content;
  max-width: 50%;
  height: auto;
}

.CoverLetter:Hover {
  content: url(GIS_Portfolio/CoverLetterHover.png);
  opacity:1;
  position:absolute;
  z-index: 4;
}