:root {
    --black: #2b2a2c;
    --gray: #6a696b;
    --gray-light: #dedede;
    --white: #ffffff;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BASE STYLES */
body {
    padding: 20px;
    background-color: var(--white);
}

.main_container {
    margin: 0 auto;
}

.services , .projects {
    text-align: center;
}
/* end BASE STYLES */


/*.header {*/
/*    background-color: #0d6996;*/
/*    width: 1200px;*/
/*    height: 200px;*/
/*    margin: 0 auto;*/
/*}*/
.header {
    padding: 1.2rem 0;
    position: relative;
}

.service {
    width: 290px;
    height: 300px;

    display: inline-block;
    margin: 5px;
    font-size: 0;
}

.proj {
    width: 300px;
    height: 200px;
    background-color:  #494d87;
    display: inline-block;
    margin-right: 5px;
}

.intro {
    width: 400px;
    height: 400px;
    background-color:  var(--white);
    display: inline-block;
    margin-right: 5px;
}

/* Start STYLES */
.container {
    align-items: center;
    max-width: 1200px;
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0 auto;
}

.header_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.user {
    display: flex;
}

.user_avatar {
    border-radius: 50%;
}

.user_content {
    padding-left: 9px;
}

.user_name {
    font-size: 1rem;
    color: var(--black);
    font-weight: bold;
    margin-bottom: 3px ;

}

.course_photo {
    max-width: 100%;
}

.user_prof {
    font-size: 0.75rem;
    color: var(--black);
    opacity: 0.7;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
}

.nav_link {
    margin-left: 2rem;
    position: relative;

    font-size: 0.9rem;
    color: var(--black);
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;


}

.nav_link:hover {
    border-bottom: 2px solid black;
    padding: 0 0 4px;
}

/* start intro */

.intro_inner {

    padding-top: 1rem;
    padding-bottom: 3rem;
    position: relative;

    border-bottom: 1px solid black
}


.intro_subtitle {
    color: var(--black);
    font-weight: 200;
    font-size: 2rem;
}

.intro_title {
    color: var(--black);
    font-weight: bold;
    font-size: 3rem;
    margin-bottom: 5px;
}

.intro_text {
    color: var(--black);
    font-size: 2rem;
    opacity: 0.7;
}

.social {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}

.social_link {
    margin-right: 0.75rem;
    text-decoration: none;
}

.social_link:hover {
    transform: translateY(-2px);
}

.btn {
    display: inline-block;
    vertical-align: top;
    padding: 1rem 2rem;
    width: 12.5rem;

    border: 1px solid black;
    border-radius: 1.8rem;
    background: none;
    cursor: pointer;

    font-size: 1rem;
    color: var(--black);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    opacity: 0.7;
}

.btn:hover {
    background: black;
    color: white;
}

.intro_photo {
    max-width: 100%;
    max-height: 100%;
}

.text_center {
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    text-align: center;

    font-size: 2.8rem;
    color: var(--black);
    font-weight: bold;
}

/* end intro */


/* start work*/

.work {
    overflow: hidden;
    box-shadow: 0 0 4px black;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.work_photo {
    width: 100%;
}

.work:hover {
    box-shadow: 0 0 25px black;
}

.work_content {
    padding: 1rem 0.8rem;
}

.work_cat {
    font-size: 0.75rem;
    color: var(--black);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.work_title {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: var(--black);
    font-weight: bold;
    text-transform: uppercase;
}

/* end work*/

/* start About*/

.about_photo {
    max-width: 80%;
    max-height: 80%;
}

.about_inner {
    margin-top: 1rem;
}

.about_content {
    margin-top: 1rem;
    padding-left: 1rem;
}

.about_title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--black);
    text-transform: uppercase;
}

.about_bigtitle {
    font-size: 3rem;
    font-weight: bold;
    color: var(--gray-light);
    text-transform: uppercase;
}

.about_text {
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;

    font-size: 1rem;

    color: var(--gray);
}
/* end About*/


/* start course */

.courses_inner {
    margin-top: 3.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.course {
    width: 100%;
    padding: 0 1rem;
}

.course_name {
    margin-top: 1.3rem;
    margin-bottom: 0.6rem;

    font-size: 1.1rem;
    color: var(--black);
    font-weight: bold;
}

.course_cat {
    margin-bottom: 1.5rem;

    font-size: 0.75rem;
    color: var(--gray);
}

.course_text {
    font-size: 0.75rem;
    color: var(--gray);
    font-weight: 300;
}

.btn_edit {
    margin-top: 1.5rem;
    width: 130px;
    height: 34px;

    font-size: 0.9rem;
    font-weight: bold;
    padding: 0.5rem 0.75rem;
}

.link {
    margin-top: 8rem;
    text-align: center;
}

.course_link {
    font-size: 0.9rem;
    color: var(--gray);
}

.subtitle {
    text-align: center;

    font-size: 1.1rem;
    color: var(--gray);
    font-weight: 300;
}

/* end course */
/* start footer */

.footer {
    padding: 1rem 0;

    background-color: var(--white);
}

.footer_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer_info {
    display: flex;
    align-items: center;
}

.footer_copyright {
    font-size: 0.9rem;
    color: #79797a;

    padding-right: 1rem;
    margin-right: 1rem;

    border-right: 1px solid #79797a;
}

.footer_social {
    align-items: center;
}

.footer_link {
    margin-right: 1rem;
    text-decoration: none;
}

.footer_nav {
    display: flex;
    align-items: center;
}

.footer_nav_link {
    margin-left: 1rem;

    font-size: 0.9rem;
    color: var(--gray);

    text-decoration: none;
}

/* end footer */