@font-face {
  font-family: 'mainFont'; /* set name */
  src: url('https://rayepierre335.neocities.org/assets/NewRocker-Regular.ttf') format('truetype');
}

.img-floatinganim {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
    transform: translate(0,  0px);
  }

  50%  {
    transform: translate(0, 15px);
  }
  100%   {
    transform: translate(0, 0px);
  }
}

.buddy{
  display:flex;
  flex-direction: row;
  justify-content: center;
}

.splashText{
  float:left;
  margin: 0 0 0 5%;
}

.portal{
  float:right;
  background-image: url('https://rayepierre335.neocities.org/assets/ibuprofenRaye.png');
  background-position: right;
  background-size: 90%;
  background-repeat: no-repeat;
  flex-direction: column;
  display:flex;
  justify-content:center;
  margin: 3% 5% 0 5%;
  padding: 0 25% 5% 0;
  max-height:100%;
  width:150%;
}

p{
  margin: 10% 0% 0% 0%;
  font-family: mainFont;
  color: white;
  word-spacing: 20;
  line-height: 150%;
  text-align: justify;
}

img{
  padding:5% 55% 0 0;
  height: auto;
  width:68%;
  max-height:100%;
}

#hand{
  margin: 5% 0 0 0;
  width:80%;
}

#door{
  margin: 10% 0 0 5%;
}
h1{
  margin: 10% 0% 0% 0%;
  font-family: mainFont;
  color: white;
  word-spacing: 20;
  line-height: 150%;
  text-align: center;
}

h2{
  font-family: mainFont;
  color: white;
  word-spacing: 20;
  line-height: 150%;
  text-align: center;
  margin: 0;
}

body{
  background-color:#050505;
  height:100%;
  margin:0;
}

@media (max-width: 80rem) {

.buddy{
flex-direction:column;  
}

.splashText{
  float:left;
  margin: 0 5% 0 5%;
}

.portal{
  background-position: center;
  background-size: 85%;
  flex-direction: column;
  display:flex;
  justify-content:center;
  margin: 3% 5% 0 5%;
  padding: 0 25% 5% 0;
  max-height:100%;
  width:70%;
}

img{
  padding:5% 55% 0 0;
  height: auto;
  width:40%;
  max-height:100%;
}

#hand{
  margin: 5% 0 0 0;
  width:50%;
}

}