.box {
  max-width: 1000px;
  margin: 50px auto;
  display: grid;
  grid-gap: 4px ;
  grid-template-columns: 250px auto ;
}

button {
  background-color: #00000000;
  border-color: #00000000;
  padding: 2px 2px;
  display: inline-block;
  color: #ff6fb7;
  font-family: ruff;
  cursor: pointer;
}


main {
  grid-row: 0 / 1 ;
  grid-column: 1 / 1 ;
  background-image: url("https://i.pinimg.com/1200x/f2/3f/27/f23f27302f448c6905576e7682a75a06.jpg");
  background-size: 90px;
   border-width:9px;
border-style:solid;
border-color: #e8b6c1;
border-width: 3px;
border-radius: 6px;
}

main2 {
  grid-row: 1 / 3 ;
  grid-column: 2 / 3 ;
  background-color: #FFFFFF ;
   border-width:9px;
border-style:solid;
border-image: url("https://files.catbox.moe/dflylz.png") 90 fill round;
border-radius: 2px;
}

main3 {
  grid-row: 3 / 4 ;
  grid-column: 1 / 3 ;
  background-color: #FFFFFF ;
   border-width:9px;
border-style:solid;
border-image: url("https://files.catbox.moe/dflylz.png") 90 fill round;
border-radius: 2px;
}

main4 {
  grid-row: 0 / 1 ;
  grid-column: 1 / 1 ;
  background-color: #FFFFFF ;
   border-width:9px;
border-style:solid;
border-image: url("https://files.catbox.moe/dflylz.png") 90 fill round;
border-radius: 2px;
}


@font-face {
font-family: pixel;
src: url('https://files.catbox.moe/sd80fu.ttf');
}

body {
  font-family: 'pixel';
  color: #cddaf3;
}

@font-face {
font-family: ruff;
color: #fff8cf;
src: url('https://files.catbox.moe/x4j5fu.otf');
}

body {
background-image: url('https://i.pinimg.com/736x/19/4c/7d/194c7dfefaa0b3c794c2fda8cc547c5a.jpg'); 
background-attachment: fixed;
background-repeat: repeat;

}

h1 {
  font-family: pixel;
  font-size: 22px;
  float: right;
  width: 63.33%;
  padding: 5px;
}

h2 {
  text-align: left;
  
}

::-moz-selection { /* EDIT THIS ONE TOO */
  color: #ffffff;
  background: #000000;
}

::selection {
  color: #ffffff;
  background: #fdd0de;
  }


bounce { 
position: relative;
top: 0;
animation: bounce 0.3s ease infinite alternate;
}

@keyframes bounce {
100% {
top: -.50rem;
}