@font-face {
 font-family: 'alkhalili manjourhad';
 src : url('fontSO/alkhalili manjourhad.ttf') format('truetype');}
  @font-face {
 font-family: 'alkhalili nasnas';
 src : url('fontSO/alkhalili nasnas.ttf') format('truetype');}
 
 body{
    background-color:black;
}

#cadre-content{
    position: relative;
    margin: 0 auto;
}
body{background-color:black;}

#grille
{width:320px;height:500px;position:absolute;top:50px;left:50px;overflow:auto;}
#grille::-webkit-scrollbar{width:6px;}
#grille::-webkit-scrollbar-thumb{background:red;border-radius:6px;}

#img1{width:300px;height:300px;position:absolute;top:0px;left:0px;border-bottom:1px solid red;}
#img2{width:300px;height:300px;position:absolute;top:301px;left:0px;border-bottom:1px solid red;}
#img3{width:300px;height:300px;position:absolute;top:603px;left:0px;border-bottom:1px solid red;}
#img4{width:300px;height:300px;position:absolute;top:905px;left:0px;border-bottom:1px solid red;}
#img5{width:300px;height:300px;position:absolute;top:1207px;left:0px;border-bottom:1px solid red;}
#img6{width:300px;height:300px;position:absolute;top:1509px;left:0px;border-bottom:1px solid red;}
#img7{width:300px;height:300px;position:absolute;top:1811px;left:0px;border-bottom:1px solid red;}
#img8{width:300px;height:300px;position:absolute;top:2113px;left:0px;border-bottom:1px solid red;}
#img9{width:300px;height:300px;position:absolute;top:2415px;left:0px;border-bottom:1px solid red;}
#img10{width:300px;height:300px;position:absolute;top:2716px;left:0px;border-bottom:1px solid red;}
#img11{width:300px;height:300px;position:absolute;top:3017px;left:0px;border-bottom:1px solid red;}
#img12{width:300px;height:300px;position:absolute;top:3318px;left:0px;border-bottom:1px solid red;}
#img13{width:300px;height:300px;position:absolute;top:3619px;left:0px;border-bottom:1px solid red;}
#img14{width:300px;height:300px;position:absolute;top:3920px;left:0px;border-bottom:1px solid red;}
#img15{width:300px;height:300px;position:absolute;top:4221px;left:0px;border-bottom:1px solid red;}
#img16{width:300px;height:300px;position:absolute;top:4522px;left:0px;border-bottom:1px solid red;}
#img17{width:300px;height:300px;position:absolute;top:4823px;left:0px;border-bottom:1px solid red;}
#img18{width:300px;height:300px;position:absolute;top:5124px;left:0px;border-bottom:1px solid red;}
#img19{width:300px;height:300px;position:absolute;top:5425px;left:0px;border-bottom:1px solid red;}
#img20{width:300px;height:300px;position:absolute;top:5726px;left:0px;border-bottom:1px solid red;}






.message{width:300px;height:361px;position:absolute;top:20px;left:635px;font-size:48px;color:red;font-family:alkhalili nasnas;text-align:right;text-shadow:1px 1px 0px white;}

.basicsA{color:white;position:absolute;top:432px;left:825px;font-size:14px;font-weight:bold;text-decoration:underline;
         font-family:alkhalili manjourhad;}
.basicsA:hover{color:magenta;}
.basicsE{color:white;position:absolute;top:480px;left:830px;font-size:18px;font-weight:bold;text-decoration:underline;}
.basicsE:hover{color:magenta;}

.samplesA{position:absolute;top:456px;left:823px;font-size:14px;font-weight:bold;text-decoration:underline;
       color:white;font-family:alkhalili manjourhad;text-align:center;}
.samplesA:hover{color:magenta;}
.samplesE{position:absolute;top:504px;left:815px;font-size:18px;font-weight:bold;text-decoration:underline;color:white;text-align:center;}
.samplesE:hover{color:magenta;}

.preview{color:white;position:absolute;top:504px;left:440px;font-size:14px;font-weight:bold;text-decoration:underline;
         font-size:18px;font-family:alkhalili manjourhad;}
.preview:hover{color:magenta;}
.index{position:absolute;top:480px;left:440px;font-size:14px;font-weight:bold;text-decoration:underline;
       font-size:18px;color:white;font-family:alkhalili manjourhad;text-align:center;}
.index:hover{color:magenta;}