body{
  background-color:#a69899;
  background-image: url('bg2.png');
  background-size:cover;
  font-family: Dreamer TM;
}

.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:15rem;
  color: #6b9dc9;
  text-shadow: 10px 10px #37438a;
  width: 400%;

}


#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_replacement3{
width: 1000%;
animation: marqmovinghor3 10s linear;
display: inline-block;
animation-iteration-count: infinite;

}

@keyframes marqmovinghor3 {
    from{transform: translate(30%, -1%); }
    to{transform: translate(-60%, -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;
}

iframe {
  border-radius: 20px 20px 0px 0px;
  height:80%;
  width:90%;
  border: outset 20px #3c403b;
  box-shadow: 0px 0px 10px #262926;
}

.tvbottom {
  height:20%;
  width:90%;
  background-color: #262926;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0px 0px 20px 20px;
    box-shadow: 0px 0px 10px #262926;
    padding: 5px;
}


button{
  height:30%;
  width:10%;
  margin: 3px;
  display: inline-block;
  background-color: #52ba3d;
    border: outset #52ba3d;
    box-shadow: 0px 0px 10px #262926;
    color: #4a854e; 
}

.playing {
  height: 40%;
  margin-left:auto;
  margin-right:auto;
  display:block;
  width: 22%;
  margin:3px;
  background: linear-gradient(to left, #006600 0%, #003300 100%);
  border: outset #003300;
  display: inline-block;
  overflow: hidden;
  color: #52ba3d;
}

.contain{
  display:block;
  right:50%;
}

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

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