body {
    background-image: url("../ass/blog/bg.png");
    background-size: cover;    /* Choose: cover / contain / 200% / etc */
    /*background-repeat: stretch;*/
    image-rendering: pixelated;
    image-rendering: crisp-edges;  /* fallback */
    background-attachment:fixed
}

nav{
  width: 100%;
  justify-content: space-between;
}
#backbutton{
  width: 130px;
   transition: transform 0.3s ease;
}

#backbutton:hover {
  transform: scale(1.1);  
}

#hearts{
  height: 40px;
  margin: auto;

 @media(orientation: portrait) {
height: 6vw;

}
   
}







aside{
  
  width: 15%;
  float: right;
  margin-right: 3%;
display: box;
margin-top: -500px;



   @media(orientation: portrait) {
width: 80%;
float: none;
margin: 9.5%;
display: flex;
padding: 0;
justify-content: center;
}
}

.rightboxes{
  width: 100%;
  margin-bottom: 5%;
  margin-top: 5%;

 @media(orientation: portrait) {
width: 0%;


}}


.rightboxes_link{
    width: 100%;
  margin-bottom: 5%;
   margin-top: 5%;
  transition: transform 0.3s ease;


 @media(orientation: portrait) {
width: 90%;
margin: 0;


}


}
.rightboxes_link:hover {
  transform: scale(1.1);  
}






#banner{
  width: 81%;


  animation-name: floating; 
animation-duration: 3s; 
animation-iteration-count: infinite; 
animation-timing-function: ease-in-out;

 @media(orientation: portrait) {
width: 100%;
height: 300px;
}


} 

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

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

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


section{
  width: 20%;
  float:left;
  margin-left: 2%;

 @media(orientation: portrait) {
float: none;
width: 90%;

}


}
.blogbuttons{
  width: 80%;
  margin-left: 10%;
  transition: transform 0.3s ease;
  margin-bottom: 5%;

@media(orientation: portrait) {
width: 60%;
margin-left: 19%;

}}



.blogbuttons:hover {
  transform: scale(1.1);     /* makes it 20% bigger */
}

#hannah{
  width: 90%;
  margin: 4%;
@media(orientation: portrait) {
width: 100%;
margin: 0;
height: 300px;


}}

main{
  
  width: 55%;
  margin: auto;


@media(orientation: portrait) {
width: 100%;

}
  
 
}

.platzhalter{
  height: 400px;


@media(orientation: portrait) {
height: 0px;

}
}


#guestbook{
      border: 200px solid transparent; 
    border-image: url("../ass/window_border.png") 200 stretch;
    background-clip: padding-box;
    margin-top: -150px;
    margin-left: -100px;
    


 @media(orientation: portrait) {
width: 60%;
margin-left: 0;
margin-top: -100px;
  margin-right: -500px;

}



}

#hearts2{
  width: 100%;
}