body{
  background-color:#a7a7a8;
  background-image: url('bg3.jpg'),url('bg2.png');
  background-blend-mode: luminosity;
  background-size:cover;
  font-family: Dreamer TM;
}


.container {
  display: block;
  width:100%;
  padding: 3%;
  background-color: gray;
  overflow: hidden;
  justify-content: space-evenly;
  margin-top: 10px;
}
char {
  overflow: hidden;
  width:100px;
  height: 100px;
  box-shadow:0px 0px 5px black;
  border-radius: 10px;
  animation: lower 1s ease-out;
  animation-fill-mode: forwards;
  display:inline-block;
  margin: 10px
}

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

.june {
  background-image: url(juneframe.png);
  background-size:100px;
}
.ram {
  background-image: url(ramframe.png);
  background-size:100px;
}
.wrapper { 
  position: relative;
 width: 80%;
height: 700px;
background-color: #2e2a57;
margin: 10rem auto;
display: flex;
border: 6px ridge white;
box-sizing: border-box;
flex-wrap: wrap;
overflow:hidden;
bottom: 20%;
z-index:2;

}

#title{
  font-family: Dreamer TM;
  font-size:1.5rem;
  color: #52ba3d;
  text-shadow: 2px 2px #4a854e;
  width: 100%;
  padding-bottom: 10px;

}

.heading{
  font-family: Dreamer TM;
  color: black;
  width: 100%;
 background-color: #4a854e;
  margin-bottom: 10px;
}


#sideline{
  font-family: Dreamer TM;
  font-size:20rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #a7a7a8;
  text-shadow: 10px 10px #949494 ;
  z-index: -1;
  position: fixed;
}


#blur {
  filter: blur(10px);
}

.top {
  width: 100%;
height: 40%;
padding: 7px;
overflow:hidden;
}

.box{
  width: 10%;
height: 10%;
background-color: #6b9dc9 ;
padding: 7px;
position:absolute;
z-index:11;
bottom:200px;
}

#one{
  z-index:1;
}

.right{
width: 50%;
height: 60%;
background-color: #6b9dc9 ;
padding: 7px;
}

.left {
width: 50%;
height: 60%;
background-color:  #37438a;
padding: 7px;
}

.boxes{
  
width: 100%;
background-image: url('bg2.png');
height: 100%;
overflow: scroll;
border: 2px white ridge;
flex-wrap: wrap;
}

headerbox {
  width: 100%;
  position:fixed;
  border: dashed 5px #c9bbb7;
  z-index:14;
  overflow: scroll;
  margin-left: auto;
 margin-right: auto;
 text-align: left;
 background-color: #a3908e;
 background-image: url('paper.png');
}

header {
  padding-bottom: 1%;
}

.marquee_replacement{
width: fit-content;
height: fit-content;
animation: marqmovinghor 10s linear;
display: flex;
flex-direction: row;
align-items: baseline;
flex-wrap: nowrap;
transform: translate(2000px, -1px);
animation-iteration-count: infinite;

}

@keyframes marqmovinghor {
    from{transform: translate(40%, -1%); }
    to{transform: translate(-40%, -1%); }
}

.marquee_replacementdown{
width: fit-content;
height: fit-content;
animation: marqmovingdown 8s linear;
display: flex;
flex-direction: row;
align-items: baseline;
flex-wrap: nowrap;
transform: translate(-10%, -1px);
animation-iteration-count: infinite;

}

@keyframes marqmovingdown {
    0%{transform: translate(0%, -300%);
    opacity: 1;}
    75%{transform: translate(0%, -15%);
    opacity: 1;}
    100%{transform: translate(0%, 80%);
     opacity: 0; }
}


.center {
    display: block;
    margin-left: auto;
    margin-right: auto }
    
.innerright{
height: 100%;
width: 50%;
background-color: coral ;
padding: 7px;
}



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

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