body {

  
  background: 
  linear-gradient(rgba(0, 0, 0, 0), rgba(58, 113, 196, 0.5)), 
  url("Shrine/ruishrine/ruishrine\ background.png");
    background-repeat: repeat;  
    background-position: 0 0;
  animation: Bg 200s linear infinite;
  background-position: 0 0;
     text-align: center;
      font-family: 'basiic';
  color: #b079b5;
}
@keyframes Bg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 0;
  }

}

html, body {
  margin: 0px;
  height: 100%;
  overflow: hidden;
}

 @font-face {
  font-family: 'basiic';
  src: url('basiic.ttf');
 }
 @font-face {
  font-family: 'PORKYS_';
  src: url('PORKYS_.TTF');
 }
::selection {
background-color: #f8c1ff;
color: #FFFFFF;
}

.snacks { 
width: 250px;
position: absolute;
transform: translate(625%, -20%);
z-index: 999999;
}
.RMD { 
width: 300px;
position: absolute;
transform: translate(50%, 500%);
z-index: 999999;
  filter: 
    drop-shadow(3px 3px 0px #ffffff) 
    drop-shadow(-3px 3px 0px #ffffff) 
    drop-shadow(3px -3px 0px #ffffff) 
    drop-shadow(-3px -3px 0px #ffffff);
}
.page {
  display: grid;
  grid-template-columns: 1fr 1500px 1fr;
}

.mainbody {
  background-color: #f8eaff;
  height: 750px;
  margin-top: 40px;
    border-width: 40px;
          border-style: solid;
          border-image: url("Shrine/ruishrine/bluepurpleborder.png") 75 round;
          border-image-outset: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 500px;
    
}

.column1 {
    display: grid;
    grid-template-rows: 2fr 1fr;
}
.column2 {
      display: grid;
    grid-template-rows: 1fr 2fr;
}
.column3 {
        display: grid;
    grid-template-rows: 1fr 1.5fr;
}

.para1 {
  background-color: rgb(234, 238, 255);
  margin: 20px 20px 20px 20px;
      border-width: 3px;
border-style: dashed;
border-color: #e3a8ff;
border-radius: 20px;
padding:10px 10px 10px 10px;
height: 500px;
box-shadow: #d3d7fc 0px 0px 8px 3px;
font-size: 20px;
color: #b099ca;
text-align: left;
}
.para2 {
background-color: rgb(234, 238, 255);
  margin: 20px 20px 20px 20px;
      border-width: 3px;
border-style: dashed;
border-color: #e3a8ff;
border-radius: 20px;
padding:10px 10px 10px 10px;
height: 400px;
box-shadow: #d3d7fc 0px 0px 8px 3px;
font-size: 20px;
color: #b099ca;
}
.para3 {
background-color: rgb(234, 238, 255);
  margin: 20px 20px 20px 20px;
      border-width: 3px;
border-style: dashed;
border-color: #e3a8ff;
border-radius: 20px;
padding:10px 10px 10px 10px;
height: 250px;
box-shadow: #d3d7fc 0px 0px 8px 3px;
font-size: 20px;
color: #b099ca;
text-align: right;
}
.spellrui {
  width: 900px;
  position: absolute;
  transform: translate(-45%, -15%);
    filter: 
    drop-shadow(3px 3px 0px #ffffff) 
    drop-shadow(-3px 3px 0px #ffffff) 
    drop-shadow(3px -3px 0px #ffffff) 
    drop-shadow(-3px -3px 0px #ffffff);
}
.bdayrui {
  width: 600px;
position: absolute;
transform: translate(-50%, -40%);
  filter: 
    drop-shadow(3px 3px 0px #ffffff) 
    drop-shadow(-3px 3px 0px #ffffff) 
    drop-shadow(3px -3px 0px #ffffff) 
    drop-shadow(-3px -3px 0px #ffffff);
}
.bluerui {
  width:450px;
    border-width: 3px;
border-style: dashed;
border-color: #e3a8ff;
border-radius: 130px;
box-shadow: #d3d7fc 0px 0px 20px 10px;
}