* {
    margin: 0px;
    padding: 0px;
}

body {
    overflow: hidden;
}

@font-face {
src: url("../font/MicroExtendFLF.ttf");
font-family: "nidal_logo"
}

@font-face {
src: url("../font/nidal_footer.ttf");
font-family: "nidal_footer"
}

div.bg{
    width : 100%;
    height: 100vh;
    position : absolute;
    left : 0px;
    background-image : url("../img/bg.jpg");
    background-size : cover;
    opacity : 0}

#container{
    width: 100vw;
    margin: 0 auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
}
.logo img{
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}
.logo {
    color: black;
    font-family: impact;
    letter-spacing: 2px;
    font-size: 100px;
    width: 100%;
    text-align: center;
    text-shadow: 1px 1px 10px #595959;
}

.slogan {
    font-size: 2em;
    font-weight: bold;
    text-shadow: 1px 1px 2px #595959;
    font-family: nidal_logo;
    width: 100%;
    margin: 0px auto;
    text-align: center;
    color: #cccccc;
    letter-spacing: 2px;
}

.slogan span {
    color: #FE2E2E;
    text-shadow: 1px 1px 2px #ff0d00;
}
@media all and (max-width: 590px) {
    .logo {
        font-size: 3em;
    }

    .slogan {
        font-size: 1.5em;
    }
    .slogan span{margin-top: 20px; display: block}

}
/*@media all and (max-width: 480px) {*/
    /*.logo {*/
    /*font-size: 60px;*/
/*}*/

    /*.slogan {*/
    /*font-size: 26px;*/
    /*margin-top: -30px;*/
/*}*/
    /*.slogan span{margin-top: 20px; display: block}*/

/*}*/
@media all and (max-width: 370px) {
    .logo {
        font-size: 1.7em;
    }

    .slogan {
        font-size: .9em;
    }
    .slogan span{margin-top: 20px; display: block}

}