*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
body{
    padding-top: 55px;
    min-height: calc(100% - 155px);
    background-image: linear-gradient(45deg, white 0%, #f0f0f0 0%, white 1%, #f0f0f0 1%, white 2%, #f0f0f0 2%, white 3%, #f0f0f0 3%, white 4%, #f0f0f0 4%, white 5%, #f0f0f0 5%, white 6%, #f0f0f0 6%, white 7%, #f0f0f0 7%, white 8%, #f0f0f0 8%, white 9%, #f0f0f0 9%, white 10%, #f0f0f0 10%, white 11%, #f0f0f0 11%, white 12%, #f0f0f0 12%, white 13%, #f0f0f0 13%, white 14%, #f0f0f0 14%, white 15%, #f0f0f0 15%, white 16%, #f0f0f0 16%, white 17%, #f0f0f0 17%, white 18%, #f0f0f0 18%, white 19%, #f0f0f0 19%, white 20%, #f0f0f0 20%, white 21%, #f0f0f0 21%, white 22%, #f0f0f0 22%, white 23%, #f0f0f0 23%, white 24%, #f0f0f0 24%, white 25%, #f0f0f0 25%, white 26%, #f0f0f0 26%, white 27%, #f0f0f0 27%, white 28%, #f0f0f0 28%, white 29%, #f0f0f0 29%, white 30%, #f0f0f0 30%, white 31%, #f0f0f0 31%, white 32%, #f0f0f0 32%, white 33%, #f0f0f0 33%, white 34%, #f0f0f0 34%, white 35%, #f0f0f0 35%, white 36%, #f0f0f0 36%, white 37%, #f0f0f0 37%, white 38%, #f0f0f0 38%, white 39%, #f0f0f0 39%, white 40%, #f0f0f0 40%, white 41%, #f0f0f0 41%, white 42%, #f0f0f0 42%, white 43%, #f0f0f0 43%, white 44%, #f0f0f0 44%, white 45%, #f0f0f0 45%, white 46%, #f0f0f0 46%, white 47%, #f0f0f0 47%, white 48%, #f0f0f0 48%, white 49%, #f0f0f0 49%, white 50%, #f0f0f0 50%, white 51%, #f0f0f0 51%, white 52%, #f0f0f0 52%, white 53%, #f0f0f0 53%, white 54%, #f0f0f0 54%, white 55%, #f0f0f0 55%, white 56%, #f0f0f0 56%, white 57%, #f0f0f0 57%, white 58%, #f0f0f0 58%, white 59%, #f0f0f0 59%, white 60%, #f0f0f0 60%, white 61%, #f0f0f0 61%, white 62%, #f0f0f0 62%, white 63%, #f0f0f0 63%, white 64%, #f0f0f0 64%, white 65%, #f0f0f0 65%, white 66%, #f0f0f0 66%, white 67%, #f0f0f0 67%, white 68%, #f0f0f0 68%, white 69%, #f0f0f0 69%, white 70%, #f0f0f0 70%, white 71%, #f0f0f0 71%, white 72%, #f0f0f0 72%, white 73%, #f0f0f0 73%, white 74%, #f0f0f0 74%, white 75%, #f0f0f0 75%, white 76%, #f0f0f0 76%, white 77%, #f0f0f0 77%, white 78%, #f0f0f0 78%, white 79%, #f0f0f0 79%, white 80%, #f0f0f0 80%, white 81%, #f0f0f0 81%, white 82%, #f0f0f0 82%, white 83%, #f0f0f0 83%, white 84%, #f0f0f0 84%, white 85%, #f0f0f0 85%, white 86%, #f0f0f0 86%, white 87%, #f0f0f0 87%, white 88%, #f0f0f0 88%, white 89%, #f0f0f0 89%, white 90%, #f0f0f0 90%, white 91%, #f0f0f0 91%, white 92%, #f0f0f0 92%, white 93%, #f0f0f0 93%, white 94%, #f0f0f0 94%, white 95%, #f0f0f0 95%, white 96%, #f0f0f0 96%, white 97%, #f0f0f0 97%, white 98%, #f0f0f0 98%, white 99%, #f0f0f0 99%, white 100%, #f0f0f0 100%);
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
    margin-top: 50px;
}

header{
    width: 100%;
    height: 55px;
    background-color: white;
    box-shadow: 0 1px 3px #1c83c7;
    position: fixed;
    top: 0;
    z-index: 999;
}
.head{
    width: 100%;
    height: 100%;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.head h1 {
    font-size: 27px; 
    color: #1c83c7;
    font-family:jooza;
    text-shadow: 1px 1px 0 black;
}
.logo-tt{
    display: flex;
    align-items: center;
    text-decoration: none;
}
.head img {
    width: 50px;
}

.index-link,.coli-ext-link,.tool-link,.contact-me,.about-link{
    padding: 0 20px;
    color:#1c83c7;
    text-decoration: none;
    font-size: 18px;
    font-family: jooza;
    line-height: 18px;
}

.index-link:hover,.coli-ext-link:hover,.tool-link:hover,.contact-me:hover,.about-link:hover{
    color: black;
    border-bottom: 3px solid #1c83c7 ;

}


.footerNavBar{
    width: 100%;
    height: 100px;
    display: flex;
    border: 3px solid #1c83c7;
    background-color: white;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

.footerNavBar div{
    width: 50%;
    height: 100%;
    text-align: center;
    padding-top: 5px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
}


.footerNavBar div h6{
    font-size: 15px;
    font-family: rabar;
    line-height: 15px;
    color: #1c83c7;
}

.footernavbarA{
    font-size: 15px;
    font-family: althawra-fikra-bold;
    line-height: 12px;
    color: #1c83c7 ; 
    transition: 0.2s;
    margin:5px;
}
#fbicon{
    font-size: 30px;
    color: rgb(84, 136, 248);
}
#fbicon:hover{
    color: rgb(43, 110, 255);
}
#igicon{
    font-size: 30px;
    color: rgb(245, 27, 129);
}
#igicon:hover{
    color: rgb(255, 67, 161);
}


.footernavbarA:hover{
    color: black;
}

.footerInfo{
    width: 100%;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footerInfo p{
    font-size: 11px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 900;
}

@media only screen and (max-width: 767px) {
    body{
        padding-top: 35px;

    }

    header{
        height: 35px;
    }
    
    .head img {
        width: 35px;
    }
    
    .index-link,.coli-ext-link,.tool-link,.contact-me,.about-link{
        padding: 0 2px;
        font-size: 10px;
        font-family: jooza;
        line-height: 18px;
    }
    

    .footerNavBar div h6{
        font-size: 12px;

    }
    
    .footernavbarA{
        font-size: 12px;

        margin:3px;
    }
    
}