body {
    background: url(https://tareq.website/src/images/bg.jpg) no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-color: #739fb1;
    font-family: architects daughter, cursive
}

.header {
    margin: 0 auto;
    margin-top: 120px
}

@media all and (max-width:767px) {
    body {
        background-size: 260%
    }

    .header {
        margin-top: 80px
    }
}

@media all and (min-width:768px) and (max-width:1199px) {
    body {
        background-size: 190%
    }
}

@media all and (min-width:1199px) {
    body {
        background-size: 100%
    }
}

.center {
    margin: 0 auto;
    text-align: center
}

.header h1 {
    margin: 0 auto;
    padding-top: 10px;
    text-align: center;
    font-size: 42px;
    color: #fff3f2;
    text-shadow: 0 0 10px rgba(0, 0, 0, .8)
}

.sec-text {
    text-align: center;
    margin: 8px;
    margin-top: 60px;
    font-size: 32px;
    color: #20293b;
    text-shadow: 0 0 1px #fff
}

.footer {
    margin-top: 80px;
    text-align: center
}

.footer a {
    text-decoration: none;
    color: #d60000;
    text-shadow: 1px 1px 1px #fff
}

.footer a:hover {
    text-decoration: none;
    color: #d60000;
    text-shadow: 1px 1px 4px #f88
}

.hiden {
    display: none
}

.social-icons {
    margin: 36px;
    text-align: center
}

.social-icons img {
    width: 48px;
    height: 48px;
    opacity: .65
}

.social-icons img:hover {
    opacity: 1
}

footer a {
    text-decoration: none;
    color: #d60000;
    text-shadow: 1px 1px 1px #fff
}

footer a:hover {
    text-shadow: 1px 1px 4px #fbb
}