/*
    This is a project for Internet Engineering Course - Fall 2022
    Mid-term Exam.
    @author : Mahdi Rahmani
*/

/* 
    some features must be apllied on html body.
    setting the background image and its settings, font, display layout.
    minimum height is set to 100v and our display is flex. we dont want
    background image to be repeated. we want the element that will placed inside it
    are in center.
*/
body {
    background-image: url("../img/background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;

    display: flex;
    font-family: Tahoma;
    justify-content: center;
    align-items: center;
}

/*
    for texts we have inside divs, we can set some settings on them.
    I set white color. the font size is set medium. this block operate on
    all dives.
*/
div {
    color: white;
    font-family: Arial, sans-serif;
    font-size: medium;
}

/*
    bold classes have same properties so we set them seperate here
    the font of the classes specify by bold should be bold.
*/
.bold{
    font-weight: bold;
    font-size: large;
}

/*
    also we have same properties for text class. if the text are too much
    we say go to next line and if they have space we can break according to that.
    also alow long words to be able to be broken and wrap onto the next line.
*/
.text{
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

/*
    flex-container is a section in our html code. It contains two blocks:
    the search box and user information. also we can say all other elements
    appear inside this container. also we want this container has transparent background
    and flex display layout. also it must be vertical and horizontal align
*/
.flex-container {
    background-color: #877cec21;
    box-shadow: 0 0 100px #c3eaf0b0;
    border-radius: 35px;

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

    height: 70vh;
    width: 140vh;
    max-width: 1500px;
}

/*
    We can set padding and margine for search box div.
*/
div.search-box {
    padding: 10px;
    margin: 110px;
    margin-left: 170px;
}

/*
    search box has a buttom and an input area
    here we set the properties of search box class
    set the back ground color and its radius.
    also we should set its alignment(center of parent) and set display as flex
*/
.search-box {  
    background-color: #877cec21;
    box-shadow: 0 0 40px #a5ebf5a1;
    border-radius: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 25%;
    height: 50%;
}

/*
    for username id that related to input area we can set border radius and
    also its padding and width. its width is equal to 75% of its parent
*/
#username {
    border-radius: 5px;
    padding: 5px;
    width: 75%;
}

/*
    for submit id that related to submit button we can set border radius.
    also we set that if cursor is going on that we can channge in showing
    its width is 80% of its parent. also set margin on top section
*/
#submit{
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: .1s ease-in;
    
    outline: none;
    font-weight: bold;
    
    margin-top: 15px;
    padding: 5px 10px;
    width: 80%;
}

/*
    we can set that if cursor go on submit button and also if selected the 
    back ground of that is going to be changed
*/
#submit:hover {
    background-color: #7cb7bd;
}

#submit:active {
    background-color: #2973af; 
}

/*
    We can set padding and margine for user information div.
*/
div.user-information {
    padding: 10px;
    margin: 80px;
}

/*
    user-information class contain two div. header and footer. 
    we can set for this class some properties like back ground color
    also I set a light shadow for that. the flex direction is set to column
    and its alignment is center(elements inside that place in center of this class)
    its width is 75% of its parent
*/
.user-information {
    background-color: #877cec21;
    box-shadow: 0 0 40px #a5ebf5a1;
    border-radius: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: white;
    font-weight: bold;
    font-size: 26px;

    width: 40%;
    height: 80%;
}

/* 
    header is the upper div inside user-information box.
    it contains user image and fullname and blog and location.
    we set its size based on the info box size.
    also we set some text and display settings here.
*/
.header{
    background-color: #958af362;
    border-radius: 20px;

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

    height: 40%;
    width: 100%;

}

/* 
    footer contains Bio and intrested programming language of the user.
    it's a child of the info box.
    we set it's size based on its parent.
*/
.footer{
    display: flex;

    margin-left: 10px;
    
    padding: 22px;
    line-height: 2em;

    height: 50%;
    width: 100%;
}

/* 
    also we set border-radius to 60% for having a semi circular image.
    we set the size of the user image based on the height of the header div class.
*/
#avatar{
    border-radius: 35%;

    height: 60%;
    width: auto; 
    padding: 10px;
}

/*
    I set its size based on its parent. also we set some text and display settings here.
    also prof info is a child of the info header.
*/
.information{
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 10px;
    margin: 5px;
    line-height: 1.7em;

    height: 90%;
    width: 60%; 
}

/*
    for bio and prog-lang id set color beacuse it helps to be more attractive
    and also to be distingushable
*/
#bio{
    color: coral;
}

#prog-lang{
    color: cornflowerblue;
}

/* 
    error div settings.
    if an error ocurred we show it by red background in the search box.
    the color of text is white and in the center of background. fontsize is14px,
    at the begining we dont want to show it so display is set to none.
*/
.error {
    width: 70%;
    height: 30%;

    margin-top: 15px;
    padding: 5px 10px;
    border-radius: 5px;

    display: none;
    align-items: center;
    justify-content: center;
    
    color: white;
    background-color: rgb(205, 51, 51);

    font-size: 14px;
}

/* 
    catch div settings.
    if data read from catch we show a message at the bottum of info box.
    the message has red color and at the begining we dont want to show it 
    so display is set to none.
*/
.catch {
    width: 70%;
    height: 30%;

    margin-top: 15px;
    padding: 5px 10px;
    border-radius: 5px;

    display: none;
    align-items: center;
    justify-content: center;
    
    color: rgb(239, 77, 77);

    font-size: 13px;
}