style@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap%27');

/* dummy */
#kitsunebanner {
display: block;
position: absolute;

margin: 200px;

}
/* real */
#kitsunebanner {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 120px;
  margin-bottom: 100px;

}


#relativitybanner {
  display: block;
  margin-left: auto;
  margin-right: auto;
    margin-bottom: 100px;

}


#wifebanner {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 150px;

}

#ingatlanbanner {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 150px;

}

#gamesbanner {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 200px;


}


 #twitter {
display: block;
margin-left: 10px;
margin-right: 10px;





}

#youtube {
  display: block;
  margin-left: 10px;
  margin-right: 10px;




}

#linkedin {
  display: block;
  margin-left: 10px;
  margin-right: 10px;


}

#nom {

  display:  flex;
  align: right;
}


#email {

margin-top: 20px;

}

#contactme {

margin-top: 210px;

}

#relativitylogo {

display: block;
margin-left: 800px;
margin-top: 300px;


}

#relativitytext1 {

  display: block;
  margin-left: 820px;
  margin-right: 280px;
  margin-top: 100px;

}

#relativitycredits {
  display: block;
  margin-left: 820px;
  margin-right: 280px;
  margin-top: 100px;
}
#relativitycredits1 {
  display: block;
  margin-left: 820px;
  margin-right: 280px;
  margin-top: 40px;
}
#relativitycredits2 {
  display: block;
  margin-left: 820px;
  margin-right: 280px;
  margin-top: 10px;
}
#relativitycredits3 {
  display: block;
  margin-left: 820px;
  margin-right: 280px;
  margin-top: 50px;
}
#relativitycredits4 {
  display: block;
  margin-left: 820px;
  margin-right: 280px;
  margin-top: 10px;
  margin-bottom: 350px;
}


#personastairs {
  display: block;
  margin-left: 40px;
  margin-right: 290px;
  margin-top: 10px;

}

#questpic {
  display: block;
  margin-left: 40px;
  margin-right: 290px;
  margin-top: 10px;

}

#relativitytitle2 {
  display: block;
  margin-left: 270px;
  margin-right: 880px;
  margin-top: 100px;


}

#relativitytext5 {
  display: block;
  margin-left: 220px;
  margin-right: 380px;
  margin-top: 80px;

}

#relativitytext6 {
  display: block;
  margin-left: 400px;
  margin-right: 400px;
  margin-top: 80px;

}

/* slideshow relativity */
@keyframes slideshow {
 10% {left: 0;}
 20% {left: 0;}
 30% {left: -100%;}
 40% {left: -100%;}
 50% {left: -200%;}
 60% {left: -200%;}
 70% {left: -300%;}
 80% {left: -300%;}
 /* 90% {left: -400%;}
 100% {left: -400%} */
}


#slider{
  overflow: hidden;
  width:50%;
  border: 5px solid transparent;
  border-radius: 10px;
}
#slider figure img{
  width:20%;
  height: 90%;
  float:left;
  display: block;
  margin-left: auto;
  margin-right: auto;

}
#slider figure{
  position:relative;
  width:500%;
  margin:0;
  left:100;
  top:300;
  animation:20s slideshow infinite;


}

@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

/* slideshow relativity */


#relativityYT {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 160px;
}

#relativityYTtitle {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 300px;

}


#relativityYTtitle-1{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 300px;

}

#realitivitygif {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
}

#kitsunelogo {

display: block;
margin-left: 300px;
margin-top: 300px;


}

#kitsunetext1 {

  display: block;
  margin-left: 320px;
  margin-right: 780px;
  margin-top: 100px;

}

#kitlogopage {

display: block;
margin-left: 560px;
margin-top: 100px;
width: 345px;
height: 687px;

}

#kitcolors {

display: block;
margin-left: auto;
margin-right: auto;
margin-top: 400px;

}

#nomthing {

display: block;
margin-left: auto;
margin-right: auto;
margin-top: 140px;

}


#kitmoodpage {
  display: block;
  margin-left: 290px;
  margin-right: 40px;
  margin-top: -200px;
  width: 345px;
  height: 687px;

}


#kitstitle1 {
  display: block;
  margin-left: 800px;
  margin-right: 480px;
  margin-top: 500px;

}

#kitstext2 {
  display: block;
  margin-left: 270px;
  margin-right: 280px;
  margin-top: 80px;

}

#kit3phones {

display: block;
margin-left: auto;
margin-right: auto;
margin-top: 300px;

}

#kitsonglistpage {
  display: block;
  margin-left: 40px;
  margin-right: 290px;
  margin-top: -200px;
  width: 345px;
  height: 687px;

}


#kitstitle2 {
  display: block;
  margin-left: 400px;
  margin-right: 800px;
  margin-top: 320px;

}

#kitstext3 {
  display: block;
  margin-left: 280px;
  margin-right: 270px;
  margin-top: 80px;

}

#kitsunehowlink {
  display: block;
  margin-left: 540px;
  margin-right: 540px;
  margin-top: 500px;

}

#kitstitle3 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 300px;

}

#kitproto {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


#kitsalternativelink {

  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;

}

#kitsunehowlogo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 180px;
}

#kitsunehowtext1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 180px;
}

#persona {
  display: block;
  margin-left: 290px;
  margin-right: 40px;
  margin-top: -280px;
}

#kitshowtitle1 {
  display: block;
  margin-left: 900px;
  margin-right: 480px;
  margin-top: 500px;
}


#kitshowtitle2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 600px;
  margin-bottom: 150px;

}

#musicapps {
  display:  inline-block;
  margin-left: 500px;
  margin-right: 250px;
  outline-color: red;

}

#kitshowtext3 {
  display: inline-block;
  margin-left: 380px;
  margin-right: 970px;
  margin-top: -210px;

}

#kitshowtitle3 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 300px;
  margin-bottom: 150px;

}

#kitshowtitle4 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 300px;
  margin-bottom: 100px;

}

#kitsunehowproto {
  display: block;
  margin-left: auto;
  margin-right: auto;

  margin-bottom: 150px;

}

#wifelogo {

display: block;
margin-left: 300px;
margin-top: 200px;


}

#wifetext1 {

  display: block;
  margin-left: 280px;
  margin-right: 820px;
  margin-top: 100px;
  margin-bottom: 200px;

}

#wifecredits {
  display: block;
  margin-left: 280px;
  margin-right: 820px;
  margin-top: 100px;
}
#wifecredits1 {
  display: block;
  margin-left: 280px;
  margin-right: 820px;
  margin-top: 40px;
}
#wifecredits2 {
  display: block;
  margin-left: 280px;
  margin-right: 820px;
  margin-top: 10px;
}
#wifecredits3 {
  display: block;
  margin-left: 280px;
  margin-right: 820px;
  margin-top: 50px;
}
#wifecredits4 {
  display: block;
  margin-left: 280px;
  margin-right: 820px;
  margin-top: 10px;
  margin-bottom: 350px;
}

#wifepic1 {
  display: block;
  margin-left: 190px;
  margin-right: 40px;
  margin-top: -30px;
}

#wifetitle2 {
margin-top: 100px;
margin-left: 80px;
margin-right: 300px;
}

#wifetext2 {
 margin-top: 100px;
 margin-left: 50px;
 margin-right: 50px;
}

#YTlogo {
margin-top: 100px;
margin-right: 10px;
margin-left: 230px;


}

#YTlogo2 {
margin-top: 100px;
margin-right: 10px;
margin-left: 270px;


}

#YTlogo4 {
margin-top: 100px;
margin-right: 10px;
margin-left: 280px;


}

#wifetext3 {
 margin-top: 100px;
 margin-left: 50px;
 margin-right: 50px;
}

#wifetext4 {
 margin-top: 100px;
 margin-left: 50px;
 margin-right: 50px;
}

#wifetitle22 {
margin-top: 100px;
margin-left: 100px;
margin-right: 80px;
}

#wifetitle3 {
margin-top: 100px;
margin-left: 300px;
margin-right: 80px;
}

#wifetitle4 {
margin-top: 100px;
margin-left: 80px;
margin-right: 300px;
}



#wifepic2 {
  display: block;
  margin-left: 40px;
  margin-right: 190px;
  margin-top: -30px;
}

#wifepic4 {
  display: block;
  margin-left: 40px;
  margin-right: 190px;
  margin-top: -30px;
}


#webgamepic {
  display: block;
  background-color: red;


}






.footernav {
  background-color: black;
  overflow: hidden;
  height: 35px;
  opacity: 0.4;
  margin-top: 100px;
  text-align: center;

}

.footernavcon {
  background-color: black;
  overflow: hidden;
  height: 35px;
  opacity: 0.4;
  margin-top: 440px;
  text-align: center;

}

.column {
  display: block;
  float: center;
  width: 10%;
  padding: 50px;

}



/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

.row {
  display:inline-flex;
  position: absolute;
  left: 30%;
  top: 50%;
}

.column {
  flex: 10%;
  padding: 50px;

}




/* Dummy ˇ */
/* Add a black background color to the top navigation */
.atopnav {
  background-color: #FFFFFF;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.atopnav a {
  float: center;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
  font-family: roboto;
}

/* Change the color of links on hover */
.atopnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.atopnav a.active {
  background-color: red;
  color: white;
}

/* ------------------------------ */

/* Real ˇ */
/* Add a black background color to the top navigation */
.atopnav {
  background-color: black;
  overflow: hidden;
  height: 50px;
  /* opacity: 0.4; */
  margin-top: 0px;
  text-align: center;

}

/* Style the links inside the navigation bar */
.atopnav a {

  display: inline-block;
  list-style-type: none;
  float: center;
  color: white;
  text-align: center;
  padding: 14px 30px;
  text-decoration: none;
  font-size: 20px;
  font-family: roboto;
  outline-style: solid;
  outline-color: white;


}

/* Change the color of links on hover */
.atopnav a:hover {
  background-color: #ddd;
  color: black;

}

/* Add a color to the active/current link */
.atopnav a.active {
  background-color: red;
  color: white;

}

#panda {
}

#panda {

  position: relative;
  width:20%;
  height: 30%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;
  margin-bottom: 50px;

}



#name {

  margin: 8px;
}

#name2 {

  margin: 8px;
}

#arrow {

  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 90px;
  margin-bottom: 50px;

}

#bio {

  display: block;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 600px;
  margin-bottom: 30px;

}

#bio2 {

  display: block;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 30px;
  margin-bottom: 600px;

}

#experience {

  position: relative;
  display: block;
  width:38%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;
  margin-bottom: 50px;

}

#workexp {

  position: relative;
  width:auto;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 600px;
  margin-bottom: 340px;

}

#footer {

display: block;
position: absolute;
margin-left: auto;
margin-right: auto;





}