@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Poppins:wght@200;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

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

body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header{
    display:flex;
    justify-content:space-around;
    margin:12 auto;
}

img{
    height:auto;
    max-width:100%
}

header a{
    text-decoration: none;
    color: black;
    font-size: large;
    font-weight: 700;
    font-family: Montserrat;
}

.header-a:hover{
    color:rgb(37, 12, 161);
}

.header-btn{
    color: #7510F7;
    background-color: white;
    border:2px #7510F7 solid;
    border-radius: 24px;
    padding:10px 12px;
    font-weight:800;
}
.header-btn:hover{
    background-color: #7510F7;;
    color:white;
}
header div{
    margin-top:16px;
}
/********************
    FIRST DIV IN MAIN
*********************/
main div.first{
    text-align:center;
    margin:24px auto;
}

main div.first h1{
    font-family: 'Poppins', sans-serif;
    color:rgb(11, 3, 49);
    padding:12px;
}

div.first div.avatar{
    margin:20px auto;
}
div.first div.avatar img{
    height:30%
}

div.first div.extra-image{
    margin:auto 12px;
}
div.first p{
    padding:12;
    font-size:18px;
}
/********************
    SECOND DIV IN MAIN
*********************/
div.second{
    text-align:center;
    background-color:rgb(24, 81, 238);
    color:white;
    font-family:'Montserrat', sans-serif;
    margin-top:-20px;
}

div.second h1{
    padding:24px;
}

div.second p{
    padding:0px 48px 20px;
    font-size:18px;
    letter-spacing:2.5;
    line-height:2;
    font-weight:600;
}


/********************
    THIRD DIV IN MAIN
*********************/
div.third{
    text-align:center;
    margin-top:20px;
    font-family: Poppins;
}

div.third ul{
    list-style-type:none;
    padding-bottom:24px
}

div.third .lang-card{
    margin:20px;
    margin-bottom:50px;
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    cursor:pointer;
}

div.third .lang-card:hover{
    transform:scale(0.95)
}

div.third .lang-card img{
    padding-top:20;
}

div.third .lang-card p{
    padding:10px 50px;
}

div.third .lang-card h3, div.third .lang-card h4{
    padding:8px;
}

div.third .lang-card-last{
    margin:20px;
    margin-bottom:50px;
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    cursor:pointer
}
div.third .lang-card-last:hover{
    transform:scale(0.95)
}

div.third .lang-card-last h3, div.third .lang-card-last h4{
    padding:8px;
}

div.third .lang-card-last img{
    padding-top:20;
}

div.third .lang-card-last p{
    padding:10px 50px;
}

div.third .card-head{
    color:rgb(43, 43, 207);
}

/********************
    FORTH DIV IN MAIN
*********************/
.rw{
    background-color: #0d314b;
}
.rw a{
    text-decoration: none;
    color: #e310cb;
    font-weight:700;
}
.rw a:hover{
    color:deeppink;
}

.rw-head{
    color:#c9c5d3;
    text-align:center;
    margin:12px auto;
    padding:12px;
    font-family: Poppins;
}

.prj{
    display:flex;
    flex-direction:column;
    margin:20px;
}

div.forth img{
    border-radius:10px;
    cursor:pointer;
}

div.forth img:hover{
    transform:scale(1.01)
}
.prj-details, .prj-details-2, .prj-details-3{
    margin-top:12px;
    text-align:justify;
    color:rgb(26, 201, 201);
    font-family:monospace;
    font-size:18px;
    padding-bottom:10px;
    border-bottom:1px solid;
    margin-bottom:50px;
}

div.forth p{
    padding-top:12px;
    text-align:start;
}
.prj-details-3{
    padding-bottom:30px;
    margin-bottom:0;
}

/********************
    FOOTER
*********************/
footer{
    background-color: rgb(0, 30, 60);
    text-align: center;
    margin-top:-20px;
}

footer ul{
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

footer li{
    margin-top:10;
    margin-bottom:10px;
    padding:12px;
}
footer h2{
    color:whitesmoke;
    padding-top: 24px;
    font-family: monospace;
}

footer a:hover{
    color:white;
    transform: scale(1.2);
}

/**********************
 START A PROJECT 
 **********************/
.start-project{
    padding:20px;
    border-bottom:0.5px solid rgb(13, 142, 228)
}

.start-project p{
    padding:20px;
    color: bisque;
    font-family: monospace;
    font-weight: 700;
    font-size:18;
    line-height:1.6;
    letter-spacing:1;
}

.start-project a{
    border:2px solid #7510F7;
    border-radius: 24px;
    padding:10px 12px;
    text-decoration: none;
    font-size:1rem;
    color: wheat;
    background-color: inherit;
}

.start-project a:hover{
    background-color: #7510F7;
    color:white
}