@import url(https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900);
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700&family=Comfortaa&family=Silkscreen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #e9e5da;
    text-decoration: none;
}

/*WELCOME PAGE*/
.welcomepage { 
  height: 100vh;
  width:100vw;
  background-image: url(./images/DSC_0467_1.jpeg);
  /*background-color:  rgb(123, 46, 46);*/
  background-size: cover;
  background-repeat: no-repeat;
}
.welcometreeimg {
  border-radius: 50%;
  position: fixed;
  top: 40vh;
  left: 50vw;
  margin-top: -235px;
  margin-left: -235px;
}
.welcometext {
  position: fixed;
  top: 50vh;
  left: 50vw;
  height:500px;
  width: 500px;
}
.welcometreeimg:hover {
  background-color: #44423d38;
}

/*Constant Body*/
.bodycolor {
  background-color: #e9e5da;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*Top Banner*/
.Top_Banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height:100px;
  background-color: rgb(123, 46, 46);
  margin: 0px;
}
.Morp_And_Sig {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-left: 10px;
}
.Morp {
  margin: 10px;
  border-radius: 20px;
  height: 80px;
}
.Sig {
  margin: 0;
  border-radius: 20px;
  height: 100px;
}
.Bear {
  margin: 5px 0 0 0;
  position: relative;
  top: 0;
  left: 0;
}
.bear_default {
  position: relative;
  top: 0;
  left: 0;
}
.bear_happy {
  opacity: 0%;
  position: absolute;
  top: 0px;
  left: 0px;
}
.bear_happy:hover {
  opacity: 100%;
}
.flex-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  display: inline-block;
  /*border: 1px solid #e9e5da;*/
  padding: 10px 20px;
  margin: 0px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 300;
}
.flex-item:hover {
  background-color:rgba(184, 98, 98, 0.158);
}
.Nav_Buttons {
  margin-right: 20px;
}
/*Site Bottom*/
.Site_Bottom {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 50px;
  margin: 0px;
  background-color: rgb(141, 65, 53);
}
.Site_Bottom_Items {
  margin: 10px;
  font-family: 'Baloo 2', cursive; 
    color: #e9e5da; 
    font-size:20px;
  transform: translate(0px, 1px);
}
/*HOME PAGE*/
.home {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 80%;
  margin-top: 40px;
  max-width: 1536px;
}
.intro {
  display: flex;
  justify-content: space-evenly;
  height: fit-content;
  width: 100%;
  margin: 10px;
}
.Yam_Bike_Bridge {
  border-radius: 20px 0px 0px 20px;
  width: 70%;
  margin: 0px;
}
.Im_Janna {
  display: flex;
  align-items: center;
  background-color: rgb(168, 85, 72);
  border-radius: 0px 20px 20px 0px;
  margin: 0px;
  width: 30%;
}
.Im_Janna_Font {
  font-family: 'Baloo 2', cursive;
    color: #e9e5da;
    font-size: 25px;
    margin: 30px;
}
.Intro_Vertical {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

#intro_links {
  margin: 0px 40px 40px 40px;
}
#first {
  margin: 0px 10px 0px 0px;
}
#second {
  margin: 0px 0px 0px 10px;
}
.Bio_Heading {
  border-radius: 20px;
  margin: 0px 20px;
}
.Intro_Heading_Font {
  font-family: 'Baloo 2', cursive;
  color: rgb(168, 85, 72);
  font-size: 30px;
  margin: 20px;
  font-weight: 700;
}
#White {
  color: #e9e5da;
}
.Bio {
  background-color: rgb(168, 85, 72);
  border-radius: 20px;
  width: 100%;
  margin: 0px 0px 10px 0px;
  min-height: 40%;
}
.Contact {
  background-color: rgb(168, 85, 72);
  border-radius: 0px 0px 20px 20px;
  width: 100%;
  margin: 0px 0px 10px 0px;
}
.Resume:hover {
  color:rgb(101, 44, 35);
}
.Bio_Font {
  font-family: 'Baloo 2', cursive;
    color: #e9e5da;
    font-size: 20px;
    margin: 0px 40px 40px 40px;
}
.Link_Font {
  font-family: 'Baloo 2', cursive; 
    color: #e9e5da;
    font-size: 20px;
    font-weight: 700;
}
.Link_Font:hover {
  color:rgb(101, 44, 35);
}
.Resume {
  font-family: 'Baloo 2', cursive; 
  font-weight: 700;
  font-size: 25px;
  color:#cfb855;
}
.Looking{
  width: 100%;
  margin-top: 10px 10px 0px 10px;
  border-radius: 20px 20px 0px 0px;
}

/*Engineering Page*/
.Engineering_Page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 75vw;
}
.Engineering_Outer_Box {
  margin: 20px 0px 20px 0px;
  max-width: 1536px;
}
.Heading_Box{
  display: flex;
  justify-content: center;
  align-items: center;
  height: fit-content;
}
.Heading_Font{
  font-family: 'Baloo 2', cursive;
  color: rgb(168, 85, 72);
  font-size: 40px;
  margin: 10px;
  font-weight: 900;
}
.Automata_Video {
  display: flex;
  justify-content: center;
  position: relative;
  padding-bottom: 50%; /* 16:9 */
  height: 0;
}
.Automata_Images {
  display: flex;
  justify-content: space-around;
  align-items: center;

  border-radius: 20px;
}
.Description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: fit-content;
  margin: 0px;
}
.Description_Font {
  font-family: 'Baloo 2', cursive;
    color: rgb(168, 85, 72);
    font-size: 20px;
    font-weight: 500;
    margin: 20px 0px 0px 0px;
}
#Thinner_Description {
  width: 70%;
}
.framevideo {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.projectpic {
  border-radius: 20px;
  margin: 40px 0px 0px 0px;
  width: 30%;
}
.Capstone_File {
  border-radius: 20px;
  max-width: 90%;
}
.Werfen_Image {
  border-radius: 20px;
  max-width: 100%;
  min-width: none;
}
.Robotic_Hand_Image {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
}
.Robotic_Hand_File {
  border-radius: 20px;
  max-width: 90%;
}
.Link_Red {
  font-family: 'Baloo 2', cursive;
    color: rgb(123, 46, 46);
    font-size: 20px;
    font-weight: bolder;
}
.Link_Red:hover {
  color: rgb(215, 107, 29);
}
.Row{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 40px 0 0 0;
}

#Capstone_Row {
  display: flex;
  justify-content: space-between;
}

#Row_Width {
  width: 30%;
  margin: 0px;
}
#Row_Width_Werfen {
  width: 40%;
  margin: 0px 0px 0px 40px;
}
#Capstone_Width {
  width: 40%;
  margin: 0px 0px 0px 40px;
}
.Insta_Box {
  display: flex;
  justify-content: center;
  min-width: 70%;
}
.Werfen_Box {
  display: flex;
  justify-content: flex-start;
  width: 60%;
}
.Capstone_Box {
  display: flex;
  justify-content: flex-start;
  width: 60%;
}

#Robotic_Hand {
  display: flex;
  justify-content: flex-end;
}

#Passive_Solar {
  display: flex;
  justify-content: flex-start;
}

#Listening_Device {
  display: flex;
  justify-content: flex-end;
}

.LittleGuyBox {
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.SecretImage {
  margin: 10px;
  border-radius: 20px;
}


/*CAPSTONE_PAGE*/
.Capstone_Box {
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1536px;
}
.Capstone_Image {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
}


/*CAD_Page*/
.CAD_Page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.CAD_Box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 75%;
  margin: 20px 0px 20px 0px;
  max-width: 1536px;
}
.CAD_Image_Rows {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}
.CAD_Image {
  width: 33.3%;
  margin: 0px;
}
.Drawings {
  width: 48%;
  margin: 0px;
  border-radius: 0px;
}

/*Art Page*/
.Art_Page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.Art_Outer_Box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75%;
  margin: 20px 0px;
  /*border: 4px double rgb(168, 85, 72);*/
  border-radius: 20px;
  max-width: 1536px;
}
.Bathroom_Mural {
  display: flex;
  justify-content: center;
  width: 100%;
}
.Art_Box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.Art {
  border-radius: 20px;
  margin: 0px;
}
.vines {
  border-radius: 20px;
  max-height: 700px;
}
.sheepies {
  border-radius: 20px;
  margin: 0px 0px;
  width:100%;
}
.Animation_Video_Box {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 315px;
}
.Animation_Video {
  position: absolute;
  width: 75%;
  border-radius: 20px;
}

/*WRITING PAGE*/
.Writing_Page {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.Writing_Outer_Box {
  margin: 20px 0px 20px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1536px;
}
.Writing_Box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 20px 0px 20px 0px;
}
.Writing_Item {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.Writing_Image {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 max-width: 40%;
 width: fit-content;
 margin: 0px 0px 0px 20px;
}
.Writing_Image_Item {
  display: flex;
  margin: 10px;
  max-width: 100%;
  border-radius: 20px;
}
.Writing_Title_Box {
  display: flex;
  justify-content: start;
  align-items: center;
  height: fit-content;
}
.Writing_Text_Font {
  font-family: 'Baloo 2', cursive;
    color: rgb(168, 85, 72);
    font-size: 20px;
    font-weight: 500;
}
.Title {
  font-family: 'Baloo 2', cursive;
    color: rgb(168, 85, 72);
    font-size: 30px;
    font-weight: 500;
    margin: 0px 0px 20px 0px;
}
.Writing_Description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: fit-content;
  margin: 0px;
  background-color: rgb(168, 85, 72);
  border-radius: 20px;
  padding: 40px 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#Left {
  display: flex;
  justify-content: end;
}
.Center_Writing {
  width: 60%;
}


/*FRIENDS PAGE*/
.Friend_Page {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.Friends_Box {
  margin: 20px;
  background-color:rgb(168, 85, 72);
  border-radius: 20px;
  padding: 20px;
  width: 70%;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  max-width: 1536px;
}
#Friends_Fix_Top {
  margin: 40px 20px 20px 20px;
}
#Box_Me {
  max-width: fit-content;
}
.text {
  padding: 20px;
  padding-left: 50px;
}
.Name {
  padding-bottom: 15px;
  font-size: 24px;
}
.Pfp {
  border-radius: 10px;
  margin: 0px 0px 0px 20px;
}
.Link_Orange {
  font-family: 'Baloo 2', cursive; 
  color:#cfb855;
  font-size:20px;
}
.Link_Orange:hover {
  color:rgb(224, 142, 29);
}

/*SECRET PAGE*/
.Secret_Font {
  font-family: 'Press Start 2P', cursive;
  font-size: medium;
  color: rgb(0, 0, 0);
}
.Secret_Box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1536px;
}
.Secret_Font_Box {
  margin: 40px;
}

/*Carousel*/
.image-slideshow {
	width: 600px;
    height: 300px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
    position: relative;
    padding: 0px 0px 40px 0px;
}
.image-slideshow > div {
	width: 600px;
    height: 300px;
	animation: move 40s ease-in-out 2s infinite normal;
    display:inline-block;
}
.image-slideshow > div div {
	position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    width: 100%;
}
.image-slideshow p {
	padding: 0 5px 5px 10px;
    margin: 0;
    font-size: 14px;
    font-family: 'Baloo 2', cursive;
    color: #cdcac3;
}
@keyframes move {
	0%,8.2% { transform: translateX(0); }
   	8.3%,16.5% { transform: translateX(-600px); }
   	16.6%,24.8% { transform: translateX(-1200px); }
     24.9%,33.1% { transform: translateX(-1800px); }
     33.2%,41.4% { transform: translateX(-2400px); }
     41.5%,49.7% { transform: translateX(-3000px); }
     49.8%,58% { transform: translateX(-3600px); }
     58.1%,66.3% { transform: translateX(-4200px); }
     66.4%,74.6% { transform: translateX(-4800px); }
     74.7%,82.9% { transform: translateX(-5400px); }
     83%,91.2% { transform: translateX(-6000px); }
     91.3%,100% { transform: translateX(-6600px); }
}