/* reset styles */
head, body{
border: 0;
padding: 0;
margin: 0;
}

/* styling for all form fields */
input[type=text], input[type=password], input[type=date]{
    border: 3px solid #000000;
    border-radius: 4px;
    
}
input[type=submit]{
    padding: 10px 30px;
    border-radius: 10px;
    background-color:#008000;
    font-size: 16.8px;
}

input:focus{
    border-color: #008000;
}

.logout_button{
    /* styling the link to registration page */
    position: absolute;
    margin-left: 87%;
    margin-top: -50px;
    color:white;
    font-family: "Poppins", 'Times New Roman', sans-serif;
    font-size: 24px;
    float:right;
    border: 5px solid red;
    border-radius: 10px;
    padding: 5px;
}

.logout_button a:hover{
    color:green;
    transition-duration: 0.3s;
}

/* styling for all links (excluding navigation bar and website logo) */
.contact_info a:link, .pass_change_link a:link, .FAQ_body a:link, .index_body a:link, footer a:link, .web_desc a:link 
,.contact_info a:visited, .pass_change_link a:visited, .FAQ_body a:visited, .index_body a:visited, footer a:visited, .web_desc a:visited   {
    color: blue;
    font-size: 20.8px;
    font-family: "Source Sans Pro", 'Times New Roman', Times, serif;
    text-decoration: underline;
}


/* styling for images used */
.reg_page_pic{
    width:512px;
    height:300px;
    border-radius: 10px;
}

.selfie{
    width: 577px;
    height: 300px;
    margin: auto;
    border-radius: 10px;
}


#subject{
    /* styling of message form in .email_form */
    width:243px;
    height:146px;
    border: 3px solid #000000;
    border-radius: 4px;
}

.reg_h1{
    text-align: left;
}

.reg_header{
    margin-top: -70px;
    margin-bottom: -70px;
}

.index_body, .reg_form, .contact_info, .aboutus_desc, .gift_info_mgmt, .acc_info_edit, .item_status, .pass_change_box, .email_form, .FAQ_body{  
    /* gives body boxes the standardised border, background color and font */
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 25px;
    border: 5px solid #ff0000;
    padding: 20px;
}

/* styling for body text of home page */
.index_body{
    width: 80%;
    margin:auto;
    margin-top: 20px;
}



.reg_form_fields, .login_form_fields, .pass_change_fields, .gift_info_fields, .acc_edit_fields, .step_no, .index_FAQ{
    /* styling for special body text that has to be distinguished from normal body text*/
    color:#ff0000;
    font-family: "Poppins", 'Times New Roman', sans-serif;
    font-size: 20.8px;
}

.index_FAQ{
    font-weight: 800;
}

.reg_form{
    margin-right: 50px;
    float: right;
    margin-top: -10px;
}

.login_form{
    text-align: left;
    float: right;
    margin-top: -240px;
}

body{
    /* for background image */
    background-image: url("images/pexels-photo-1303094.jpeg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0px -150px;  
}

/* css for fonts not from google fonts */
@font-face {
    font-family: header_font;
    src: url(MetroRetroNF.ttf);
}

@font-face{
    font-family: nav_font;
    src: url(Capriola-Regular.ttf);
}

/* styling for the logo of the website */
header{
    text-align: center;
    font-size: 3.5em;
    font-family: header_font, 'Times New Roman', sans-serif;
    color: #ff0000;
    padding: 40px 30px;
    border-top: 3px solid #ff0000;
    border-bottom: 3px solid #ff0000;
    margin-top: 10px;  
    margin-bottom: 30px;
}

nav.sitenav {
    text-align: center; 
    border: 3px solid green;
    max-width: 90%;
    margin: auto;
 }

 nav.sitenav p {
    margin: 0.3em 2em;
    display: inline-block;
    color: 	#ffffff;
    font-size: 24px;
    font-family: nav_font, cursive;
 }

header a:link , header a:visited, header a:hover, header a:active{
    color: #ff0000;
    text-decoration: none;

}

 nav.sitenav a:visited, nav.sitenav a:link{
    padding: 5px 50px;
    text-decoration: none;
    color:  #008000;
 }

 nav.sitenav a:hover {
    color: #ff0000;
    transition-duration: 0.3s;
 }


.web_desc, .aboutus_desc_body, .contact_info, .item_status, .before_gift_body, 
.after_gift_body, .FAQ_body_box, .email_form, .recipient_body{ 
    /* styling font for normal body text */
    font-family: "Source Sans Pro", 'Times New Roman', Times, serif;
    font-weight: 200;
    font-size: 1.3em;
    color: #000000;
}

.web_desc{
    width: 40%;
    margin-left: 30px;
}

footer{
    /* styling font for footer */
    background-color: rgba(255, 255, 255, 0.7);
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: center;
    clear: both;
    

}
.reg_form_title, .email_form_title, .login_form_title, .before_gift_title, .after_gift_title, .recipient_title,
.aboutus_desc_title, .contact_info_title, .gift_info_title, .acc_edit_title, .item_status_title, .pass_change_box_title, .FAQ_body_title{ 
    /* style for div headers */
    font-size: 2rem; 
    font-family: "Poppins", 'Times New Roman', Times, serif;
    font-weight: 600;
    text-align: center;
    color:#008000;
}

.reg_form_title{
    text-align:left;
}

.contact_info, .gift_info_mgmt, .item_status, .email_form{
    float: right;
    margin-right: 80px;
}

.contact_info{
    width: 400px;
    float: right;
    margin-top: 20px;
}

.contact_info_business_title, .contact_info_customer_title{ 
    /* sub-headers of contact-info require different styling compared to those of main headers */
    color: 	#008000;
    font-weight: 400;
    text-decoration: underline;
}



.aboutus_desc, .acc_info_edit, .FAQ_body{
    /* styling for all boxes on the left of the page, excluding registration */
    margin-top: 20px;
    margin-left: 80px;
}

.aboutus_desc{
    width: 45%;
}

.acc_info_edit{
    width: 40%;

}

.gift_info_mgmt{
    width: 30%;
    margin-top: 20px;
}

.completion_bar{

    background-color:#ffffff;
    width: 300px;
    border: 3px solid #000000;
    border-radius: 25px;
    overflow: hidden; /* the bar pokes out of the rounded edges */
    margin:auto;
}

.completion_bar_title, .percentage{
    text-align: center;
}

.completion_bar_color{
    background: repeating-linear-gradient(
        45deg,
        #df1313,
        #df1313 10px,
        #ffffff 10px,
        #ffffff 20px
      );
    height:24px;
    width:100px;
    
    
}

.item_status{
    width: 30%;
    margin-top: -250px;
}

.pass_change_box{
    width: 40%;
    margin:auto;
    margin-top: 20px;
}

.pass_change_box input[type = text]{
    width: auto;
}

.txtmsg{
    height:100px;
    width:100px;
}

.email_form{
    width: 20%;
    margin-top: 20px;
}

.FAQ_body{
    width: 55%;
    
}

.FAQ_body_question, .FAQ_body_answer{
    border-left: 3px solid black;
    padding-left: 5px;
}

.FAQ_body_box{
    border-top: 2px solid red;
}