@font-face {
    font-family:ReemKufi-Regular;
    src: url(ReemKufi-Regular.ttf);
}
html, body

{
background-color: rgb(192, 25, 25);
background-size: cover;
background-image: url(SHAP02.png);
size: 25px;
background-size:contain;
background-position-x: center;
position: relative;
width:100%;
height:100%;
margin:0px;
margin-top: 5px;
font-family: ReemKufi-Regular
}
.example {
    font-size: 100px;
    color: #FFFFFF ;
    position: c;
    margin-right: 800px;
    margin-left: 800px;
    margin-top: 500px;
}
.scroller {
font-size: x-large;
background-color: rgb(192, 25, 25);
background-image: url(SHAPE01.png);
size: 25px;
background-size:contain;
background-position-x: center;
position: relative;
border-radius: 10px;
color: rgb(255, 255, 255);
margin-right: 750px;
margin-left: 850px;
margin-top: 20px;
width: 200px;
height: 100px;
background-repeat: no-repeat;
overflow-y: scroll;
visibility:hidden;
}
.scroller.active{
  visibility: visible;
}
#A1{
right: 50px;
}
#A2{
left: 50px;
}
#A3{
right: 50px;
}
#A4{
left: 50px;
}
#A5{
right: 50px;
}
#A6{
left: 50px;
}
#A7{
right: 50px;
}
h2{
    font-size: larger;
    margin-bottom: 5px;
    color: rgb(255, 255, 255);
    background-color:  rgb(192, 25, 25);
    background-size: contain;
    position: relative;
    border-radius: 15px;
    margin-right: 0px;
    margin-left:0px;

}
h1 {
    font-size: larger;
    font-display: 10px;
    margin-bottom: 5px;
    color: rgb(255, 255, 255);
    background-color:rgb(192, 25, 25);
    background-size: contain;
    position: relative;
    border-radius: 15px;
    margin-right: 0px;
    margin-left:0px;

}