@font-face{font-family:'NotoSansKufiArabic-Bold';src:url('./fonts/NotoSansKufiArabic-Bold.eot');src:url('./fonts/NotoSansKufiArabic-Bold.eot?#iefix') format('embedded-opentype'),url('./fonts/NotoSansKufiArabic-Bold.woff') format('woff'),url('./fonts/NotoSansKufiArabic-Bold.ttf') format('truetype');font-weight:normal;font-style:normal}@font-face{font-family:'NotoSansKufiArabic-Regular';src:url('./fonts/NotoSansKufiArabic-Regular.eot');src:url('./fonts/NotoSansKufiArabic-Regular.eot?#iefix') format('embedded-opentype'),url('./fonts/NotoSansKufiArabic-Regular.woff') format('woff'),url('./fonts/NotoSansKufiArabic-Regular.ttf') format('truetype');font-weight:normal;font-style:normal}@font-face{font-family:GUNPLAYRG;src:url(./fonts/gunplayrg.ttf);src:url(./fonts/gunplayrg.ttf) format('truetype');}
html { 
    background:rgba(0,0,0,0.3) url("../img/background2.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}
img{
    width: 256px;
}
.box{
    float: left;
    background-color: #fbac4b63;
    margin: 0 10px;
    color: #0f3b71;
    font-size: 48px;
    padding: 31px;
    margin-top: 20px;
    width: 164px;
    
    font-family: GUNPLAYRG;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 35px;
    text-transform: uppercase;
    border:1px solid #fbac4b4a;
    border-bottom: solid #fbac4b63 14px;
}
div{
    text-align: center;
}
.box:hover{
    float: left;
    background-color: #0f3b719c;
    margin: 0 10px;
    color: #faab4a;
    font-size: 48px;
    padding: 31px;
    margin-top: 20px;
    width: 164px;
    font-family: GUNPLAYRG;
    border-top-right-radius: unset;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: 35px;
    border-top-left-radius: 20px;
    border:1px solid #00469b70;
    border-bottom: solid #00469b 14px;
}