/*full element setup*/
h1, p, img { /* makes all main components position be relative */
  position: relative;
}

div{
  overflow: visible;
}

body { /*sets up body*/
  background-color: black;
  overflow-x: hidden;  
  overflow-y: scroll;
} 
/*end of full element setup*/





/*main texts*/
.maintext { /* main big text */
  color: white;
  font-size: 100px;
  top: 200px;
  left: 450px;
  font-family: Arial, Helvetica, sans-serif;
}

.smaintext { /* main small text */
  color: white;
  font-size: 20px;
  top: 120px;
  left: 650px;
  font-family: Arial, Helvetica, sans-serif;
} 
/*end of main texts*/





/* my stuff */
.mytext { 
  color: white;
  font-size: 40px;
  top: 600px;
  left: 750px;
  font-family: Arial, Helvetica, sans-serif;

  /*border for .mytext*/
  display: inline-block;
  border: 2px solid white;
  padding: 20px;  
  color: white; 
  border-radius: 20px;
}

.edward {
  color: white;
  font-size: 70px;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  animation: innout linear infinite 2s;
  top: 700px;
  left: 630px;
}


.img_of_me {
  width: 650px;
  height: 450px;
  top: 655px;
  left: -650px;
  
  /* border for my image */
  display: inline;
  border: 5px solid white;
  padding: 0px;
  border-radius: 20px;
}
 /* end of my stuff*/




/*your stuff*/
.stefan {
  color: white;
  font-size: 70px;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  animation: innout linear infinite 2s;
  top: 1700px;
  left: 650px;
}

.yourtext {
  color: white;
  font-size: 38px;
  top: 1080px;
  left: 60px;
  font-family: Arial, Helvetica, sans-serif;
  
  /*border for .yourtext*/
  display: inline-block;
  border: 2px solid white;
  padding: 20px;  
  color: white; 
  border-radius: 20px;
}

.img_of_you {
  width: 650px;
  height: 450px;
  top: 1075px;
  left: 90px;
  
  /* border for my image */
  display: inline;
  border: 5px solid white;
  padding: 0px;
  border-radius: 20px;
}
/* end of your stuff */





/* start of top bar */
.fixed_text { /* our domain */
  color: white;
  position: fixed;
  top: 0px;
  left: 650px;
  font-family: Arial, Helvetica, sans-serif;
  z-index: 2;
}

.rainbow_border { /* border around domain */
  padding: 5px;
  font-size: 24px;
  text-align: center;
  border: 5px solid;
  border-radius: 20px;
  animation: rainbowAnimation 3s linear infinite;
  z-index: 2;
}

.change_page_btn { /* change page button */
  color: white;
  background-color: black;
  display: inline;
  font-size: 20px;
  width: 100px;
  height: 40px;
  position: fixed;
  top: 20px;
  left: 1400px;
  font-family: Arial, Helvetica, sans-serif;
  border: solid;
  border-radius: 20px;
  border-color: white;
  z-index: 2;
}

/* animations */
@keyframes rainbowAnimation {
0% {
    border-color: red;
}
14% {
    border-color: orange;
}
28% {
    border-color: yellow;
}
42% {
    border-color: green;
}
57% {
    border-color: blue;
}
71% {
    border-color: indigo;
}
85% {
    border-color: violet;
}
100% {
    border-color: red;
}
}

@keyframes innout {
  0% {
    opacity: 100%;
  }
  50% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}
/* end of animations */

.banner { /* banner */
  opacity: 100%;
  position: fixed;
  top: 5px;
  left: 8px;
  border-radius: 10px;
  background-color: rgb(17, 17, 17);
  width: 1500px;
  height: 75px;
  z-index: 1;
  opacity: 70%;
}
/* end of top bar */





.z-index_0 { /* makes all stuff be z-index 0 */
  z-index: 0;
}