/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



body {

  color:#b05d6e;
  font-family: Dreamer TM;
  background-image: url('bg1.png');
  background-size: 100%;
  background-attachment: fixed;
  padding: 1%;
  padding-left: 9%;
  padding-right: 9%;
  width: 100%;
}

h1 {
  font-family: Title;
}

header {
  text-align: center;
  padding-bottom: 15%;
}




 .marqueediv{
height: 10%;
width:100%;
overflow: hidden;

}
/* Marquee Code written by goooby.neocities.org*/
.marquee_replacement{
width: fit-content;
height: fit-content;
animation: marqmovinghor 8s linear;
display: flex;
flex-direction: row;
align-items: baseline;
flex-wrap: nowrap;
transform: translate(2000px, -1px);
animation-iteration-count: infinite;
gap: 0.5rem;
}

@keyframes marqmovinghor {
    from{transform: translate(2000px, -1px); }
    to{transform: translate(-1440px, -1px); }
}

.marquee_replacementvert{
    margin-left: auto;
  margin-right: auto;
animation: marqmovingvert 3s linear;
display: flex;
flex-direction: row;
align-items: baseline;
flex-wrap: nowrap;
transform: translate(-1px, 2000px);
animation-iteration-count: infinite;
gap: 0.5rem;
}

@keyframes marqmovingvert {
    0%{transform: translate(-1px, 10px); }
     25%{transform: translate(-1px, 0px); }
    50%{transform: translate(-1px, -10px); }
     75%{transform: translate(-1px, 0px); }
    100%{transform: translate(-1px, 10px); }
   
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.p {
  color:#836585;
display: block;
width: 100%;
height:auto;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0px 0px 8px #7f7285;
}

.h {
  color: #6e527a;
  display: block;
  width: 100%;
height:auto;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0px 0px 8px #7f7285;
}


.bg {
    position: fixed;
    margin-right: auto;
    margin-left: auto;
    display: block;
    z-index: -999;
    left:-10%;
    bottom:-30%;
    
}

.coolbox1 {
position: relative;
 height: 760px;
 width: 90%;
 background-image:url(moons.gif);
 background-blend-mode: screen;
 background-size: 100%;
 background-color: #f7d7f7;
 border: dashed 5px #d4afdb;
 padding: 6px;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 5%;
z-index: 0;
overflow:hidden;
box-shadow: 0px 0px 8px #25212e;
  background-attachment: fixed;
} 

 .ramhead {
   position: fixed;
   z-index: 2;
   right:9%;
 }

.coolbox2 { 
box-shadow: 0px 0px 8px #8a7c8f;
position: absolute;
 height: 40%;
 width: 50%;
 background-color: #fae1f3;
 padding: 20px;
border: dashed 5px #f0c5ec;
margin-left: auto;
margin-right: auto;
display:block;
z-index: 0;
left: 45%;
bottom:50%;
overflow:scroll;
text-align: center;
animation: lower 1s ease-out;
  animation-fill-mode: forwards;
} 

.coolbox2:hover {
  animation: raise 1s ease-out;
  animation-fill-mode: forwards;
}

.headerbox {
  width: 82%;
  height: 15%;
  position:fixed;
  background-color:#f0c5ec;
  border: dashed 5px #fae1f3;
  z-index:1;
  overflow: hidden;
  margin-left: auto;
 margin-right: auto;
 text-align: left;

}

.blinkiebox {
position: absolute;
 height: 10%;
 width: 100%;
 padding: 1px;
margin-left: auto;
margin-right: auto;
z-index: 0;
display:grid;
grid-template-columns: 10% 10% 10% 10%;
overflow:hidden;
bottom:5%;
left:50%;
} 

.textbox {
  position:absolute;
  height: 20%;
  width:40%;
  background-color:#fcdef9;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
  overflow:scroll;
  box-shadow: 0px 0px 8px #8a7c8f;
  bottom: 20%;
  left: 50%;
}


.blinkiebox2 {
position: absolute;
 height: 11%;
 width: 40%;
 background-color:#fcdef9;
 padding: 1px;
margin-left: auto;
margin-right: auto;
z-index: 0;
overflow:scroll;
bottom:5%;
left: 5%;
box-shadow: 0px 0px 8px #8a7c8f;
} 



.sign {
  display: block;
  position: relative;
  bottom: 700px;
  left: 50%;
  margin-left: auto;
    margin-right: auto;
   }
  
  .refsign {
  display: block;
  position: relative;
  bottom: 15%;
  height: 400px;
  width:50%;
  margin-left: auto;
  margin-right: auto;

   }  
   
   .ref {
     display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto
   }
   
   .coolbox3 {
position: relative;
 height: 760px;
 width: 90%;
 background-size: 100%;
 background-color: #816987;
 border: dashed 5px #544054;
 padding: 6px;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 5%;
z-index: 0;
overflow:hidden;
box-shadow: 0px 0px 8px #25212e;
  background-attachment: fixed;
} 

.coolbox4 { 
box-shadow: 0px 0px 8px #544054;
position: relative;
 height: 40%;
 width: 50%;
 background-color: #af97bf;
 padding: 10px;
border: dashed 5px #846b8a;
margin-left: auto;
margin-right: auto;
display:block;
z-index: 0;
left: 22%;
bottom:80%;
overflow:scroll;
text-align: center;
color: #846b8a;
text-shadow: 0px 0px 4px #846b8a;
animation: lower 1s ease-out;
  animation-fill-mode: forwards;
} 

.coolbox4:hover{
  animation: raise 1s ease-out;
  animation-fill-mode: forwards;
}

@keyframes raise {
    from{transform: translate(0%, 0%); }
    to{transform: translate(0%, 6%); }
}

@keyframes lower {
    from{transform: translate(0%, 6%); }
    to{transform: translate(0%, 0%); }
}