*{
    padding: 0px;
    margin: 0px;
    font-family: sans-serif;   
}
body{
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
    background-image: linear-gradient(rgba(53, 47, 51, 0.5),rgba(180, 178, 174, 0.6)),url(background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/*===========================================================================*/
/* style the toolbar */
.toolbar{
    background-color: rgb(255, 255, 255,0.6);

    width: 100%;
    height: 10%;

    position: fixed;
    top: 0px; 
    left: 0px;

    display: flex;
    align-items: center;
    justify-content: space-between;

}

/*=============================================================================*/
/* style the title box(div) */
.toolbar div.title{
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-left: 5%;
}

.toolbar .title img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    margin-right: 10px;
}


/*=============================================================================*/
/* style the toolbar options */
/* About Us   , Contact Us  , Log in/ Sign in */


.toolbar ul{
    list-style-type: none;
}

.toolbar ul li{
    display: inline-block;
    padding-right: 50px;
}

.toolbar ul li a{
    color: black;
    text-decoration: none;
    font-weight: bolder;
    font-size: 110%;
}

.toolbar ul li a:hover{
    color: rgb(35, 89, 176);
    transition: 0.2s;
}

/*===========================================================================*/
/*===========================================================================*/
/*===========================================================================*/



.contentBox{
    width: 650px;
    height: 550px;
    background-color: rgb(255, 255, 255,0.7);
    border-radius: 30px;

    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);

    padding: 5px;
}

/* a way to do it in another way */

/* .contentBox{
    background-color: rgb(255, 255, 255,0.7);
    border-radius: 30px;

    width: 30%;
    height: 70%;
    margin-left: 20%;

    position: fixed;
    top: 20%; 
    left: 0px;

} */


/*===========================================================================*/
.contentBox h1{
    display: grid;
    text-align: center;

    padding: 5px;
    padding-bottom: 20px;
    margin: 5%;
}

.contentBox img{
    width: 59%;
    height: 40%;

    position: relative;
    left: 50%;
    top: 80px;
    transform: translate(-50%,-50%);

}
.contentBox p{
    display: grid;
    text-align: center;
    font-size: 20px;

    padding: 5px;
    line-height: 1.5;
}