body {
                        font-family: Arial, Helvetica, sans-serif;
                    }
                    * {
                        box-sizing: border-box;
                    }
                    /* set css for invalid entry */
                    .invalid {
                        color: brown;
                        align-items: right;
                    }

                    .dsbl {
                        color: #36c500;
                    }

                    .required {
                        color: red;
                    }

                    input::-webkit-outer-spin-button,
                    input::-webkit-inner-spin-button {
                        -webkit-appearance: none;
                        margin: 0;
                    }

                    /* Firefox */
                    input[type=number] {
                        -moz-appearance: textfield;
                    }

                    /* Set a style for all buttons */
                    select,
                    .radio_btn,
                    input[type=file],
                    input[type=date],
                    input[type=email],
                    input[type=tel],
                    input[type=text],
                    input[type=password],
                    input[type=number] {
                        width: 95%;
                        padding: 0px;
                        margin: 0 0px 2px 21px;
                        display: inline-block;
                        border: none;
                        background: #eaeaea;
                        border-radius: 2px;
                        /* font-family: 'Chewy'; */
                        font-size: 20px;
                    }

                    select:focus,
                    .radio_btn :focus,
                    /* input[type=radio]:focus, */
                    input[type=file]:focus,
                    input[type=number]:focus,
                    input[type=email]:focus,
                    input[type=tel]:focus,
                    input[type=date]:focus,
                    input[type=text]:focus,
                    input[type=password]:focus {
                        background-color: #ddd;
                        outline: none;
                    }

                    /* Set a style for the submit button */
                    .registerbtn {
                        background-color: #1dea25;
                        color: white;
                        padding: 16px 20px;
                        margin: 8px 0;
                        border: none;
                        cursor: pointer;
                        width: 100%;
                        opacity: 0.9;
                        border-radius: 10px;
                    }

                    .registerbtn:hover {
                        opacity: 25;
                        transform: scale(1.05);
                    }

                    /* Set a style for the reset button */
                    .resetbtn {
                        background-color: red;
                        color: white;
                        padding: 16px 20px;
                        margin: 8px 0;
                        border: none;
                        cursor: pointer;
                        width: 100%;
                        opacity: 0.9;
                        border-radius: 10px;
                    }

                    .resetbtn:hover {
                        transform: scale(1.05);
                    }

                    button {
                        background-color: #00ff00f6;
                        color: white;
                        padding: 14px 20px;
                        margin: 10px 0;
                        border: none;
                        cursor: pointer;
                        width: 100%;
                    }

                    button:hover {
                        opacity: 0.8;
                    }

                    /* Extra styles for the cancel button */

                    .cancelbtn {
                        width: auto;
                        padding: 10px 18px;
                        background-color: #f44336;
                    }

                    /* Center the image and position the close button */

                    .imgcontainer {
                        text-align: center;
                        margin: 24px 0 12px 0;
                        position: relative;
                    }

                    img.avatar {
                        width: 20%;
                        border-radius: 50%;
                    }

                    .container {
                        padding: 16px;
                    }

                    span.psw {
                        float: right;
                        padding-top: 16px;
                    }

                    /* The Modal (background) */

                    .modal {
                        /* Hidden by default */
                        /* Stay in place */
                        z-index: 1;
                        /* Sit on top */
                        left: 0;
                        top: 0;
                        width: 100%;
                        /* Full width */
                        height: 100%;
                        /* Full height */
                        overflow: auto;
                    }

                    /* Modal Content/Box */

                    .modal-content {
                        background-color: #fefefe;
                        margin: 5% auto 15% auto;
                        /* 5% from the top, 15% from the bottom and centered */
                        border: 1px solid #888;
                        width: 80%;
                        /* Could be more or less, depending on screen size */
                    }

                    /* The Close Button (x) */

                    .close {
                        position: absolute;
                        right: 25px;
                        top: 0;
                        color: #000;
                        font-size: 35px;
                        font-weight: bold;
                    }

                    .close:hover,
                    .close:focus {
                        color: red;
                        cursor: pointer;
                    }

                    /* Add Zoom Animation */

                    .animate {
                        -webkit-animation: animatezoom 0.6s;
                        animation: animatezoom 0.6s
                    }

                    @-webkit-keyframes animatezoom {
                        from {
                            -webkit-transform: scale(0)
                        }

                        to {
                            -webkit-transform: scale(1)
                        }
                    }

                    @keyframes animatezoom {
                        from {
                            transform: scale(0)
                        }

                        to {
                            transform: scale(1)
                        }
                    }

                    /* Change styles for span and cancel button on extra small screens */

                    @media screen and (max-width: 300px) {
                        span.psw {
                            display: block;
                            float: none;
                        }

                        .cancelbtn {
                            width: 100%;
                        }
                    }

                    /* Index.php CSS codes */
                    /* navbar area */

                    ul {
                        list-style-type: none;
                        margin: 0;
                        padding: 0;
                    }

                    li {
                        float: left;
                        margin: 10px;
                        padding: 0px;
                    }

                    a {
                        text-decoration: none;
                        color: #fefefe;
                    }

                    #navbar {
                        position: sticky;
                        height: 40px;
                        width: 100%;
                        border: #fefefe solid 2px;
                        border-radius: 10px;
                        background-color: rgba(230, 11, 77, 0.027);
                        padding: 0px;
                    }

                    /* background image */

                    body {
                        /* background-image: url('images/image.jpg'); */
                        background-repeat: no-repeat;
                        background-size: cover;
                    }

                    /* ParaGraf design */
                    /* login box */

                    #loginbox {
                        align-self: center;
                    }

                    /* Signup area */
                    /* global css */

                    .center {
                        text-align: center;
                        align-content: center;
                    }