*,
*::before,
*::after {
    box-sizing: border-box;
}
body{
    margin: 0 ; 
    display : flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Source Sans 3",sans-serif;
    padding : 0 .5rem;
    background-color: #1c1c1c;
    color : #ffffff;
}
nav{
    display: none;
}
header{
    display : flex;
}
#usInfo{
    display : flex;
    align-items: center;
    justify-content: flex-start;
    gap : 2rem ;

}
#avatar{
    width : 7rem ; 
    height: 7rem;
    border-radius: 50%;
}
#overView{
    display : flex;
    flex-direction: column;
    gap : .8rem
}
.usprojectsCon , #usProjects .container{
    display : flex; 
    justify-content: left;
    width: 100%;
    align-items: center;
    gap: 1rem;
}
.usprojectsCon div{
    width: fit-content;
    height: 7rem;
    background-color: #2a2a2a;
    padding: .5rem .5rem;
    text-align: center;
    font-size: 1.1rem;
    border-radius: 3px;
}


.num{
    font-size: 1.6rem;
    margin-bottom: 0;
    margin-top: 2px;
}
.num1{
    color : #fc3f37;
}
.num2{
    color : #b7dfb6;
}
.num3{
    color : #ffff00;
}

#usProject .container{
    justify-content: space-between;
}
#usProjects , #usProjects .usProjectsCon , #settings{
    display: flex;
    flex-direction: column;
    padding : .7rem .9rem;

}
.logo{
    width : 30%;
}
header{
    display : flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;

}
h1{
    margin-bottom: 0;
    font-size: 1.5rem;
}

.user{
    width: 75%;
    color: #fc3f37;
    background-color: #1c1c1c;
    padding: .2rem .6rem;
    border: solid 2px #fc3f37;
    font-weight: 600;
    border-radius: 2px;
}
#usProjects , #settings{
    width: 95%; 
    height: fit-content;
    min-height: 6.37rem;
    background-color: #2a2a2a;
    margin: 2rem 0;
    
}
#usProjects .container{
    justify-content: space-between;
}
#usProjects .container button{
    width : 32%; 
    background: #fc3f37;
    color :#ffffff;
    padding : .3rem .6rem;
    border :solid 2px #2a2a2a;
    border-radius: 4px;
    font-weight: 500;
    transition: all .5s;
    cursor: pointer;
}
#usProjects .container button:hover{
    border-color: #ffffff;
    background-color:#f05751 ;
}
.red{
    color:#fc3f37;
    transition: color .5s;
    cursor: pointer;
}
.red:hover{
    color:#f05751;
}

a{
    text-decoration: none;
}
.Favorites-cotainer{
    display : none;
}
.show ,.messages{
    text-align: center;
    display: block;
    width: 96% ;
    margin: .5rem auto;
    background-color: #3A3A3A;
    color: #ffffff;
    font-weight:600;
    border: none;
    padding : .5rem .6rem;
    border-radius: 3px;
    cursor:pointer;
    transition: all .5s;
}
.show:hover , .messages:hover {
    color:#fc3f37;
    box-shadow: 3px 3px 1px #3A3A3A;
}
#settings{
    padding: .4rem;
}
#logOut , #start{
    display: block;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 1rem;
    padding: .8rem 1.1rem;
    background-color: #fc3f37;
    color: #ffffff;
    border: none;
    border-radius: 3px;
    font-weight: 600;
    font-size: 1.2;
    transition:all .6s;
    cursor: pointer;
}
#logOut:hover , #start:hover , #copyLinkBtn:hover{
    background-color: #f05751;
    box-shadow: 1px 1px 15px #fc3f37;
}
/* Service style */
main .desc{
    margin-top: 0;
}
main a{
    text-decoration: none;
    color: #ffffff;
}
.price{
    
    width: 40%; 
    padding : .4rem .5rem;
    color : #fc3f37;
    font-weight: 600;
    background-color: #2a2a2a;
    border : 1px solid #fc3f37;
    border-radius: 3px;

}
main .del{
    display: flex;
    gap : 2rem; 
}
.time{
    width: 43%; 
    padding : .7rem .9rem;
    background-color: #2a2a2a;
}
.del i{
    font-size: 2.5rem;
}
#service h1{
    font-size: 2.5rem;
}
#start{
    margin-top: 1rem;
    width: 90%;
    text-align: center;
}
#start:hover{
    box-shadow: 1px 1px 15px greenyellow;
}
main img{
    display: block;
    width: 95% ;
    margin: 1rem 0; 
}
.marketerInfo{
    display : flex;
    flex-direction: column;
    margin-left: 0;
    justify-content: left;
    text-align: left;
}
.marEmail{
    display: flex; 
}
.marProjects{
    width : 100% ; 
    display: flex;
    flex-direction: column;
}
.marProjects div{
    width : 90%; 
}
.project-card{
    display : flex; 
    gap : 3rem; 
    font-size: 1.2rem;
    border-bottom:solid 2px #fc3f37;
}
#copyLinkBtn{
    width: 8.5rem;
    color : #ffffff;
    background-color: #fc3f37;
    border: none; 
    border-radius: 3px;
    transition: all .5s;
}
@media(min-width : 740px){
    #avatar{
        width: 14rem ;
        height: 14rem;
        border-radius: 50%;
    }
    body{
        margin: 0;
        padding : 0; 
        display : grid;
        grid-template-columns: 20% 1fr;
        grid-template-areas: 'nav content';
    }
    #overView .usprojectsCon{
        width: 95%;
        font-size: 1.5rem;
        margin-bottom: .5rem;
    }
    #overView .usprojectsCon div{
        width: 32%;
    }
    nav{
        grid-area: nav;
        display: flex;
        flex-direction: column;
        background-color: #2a2a2a;
        padding: 4rem 1rem;
        min-height: 100vh;
        height: 100%;
        margin: 0;
        width: 100%;
        gap : 4rem;
        margin: 0;
    }
    header{
        height: 100%;
    }
    nav a{
        color : #ffffff;
        background-color: #fc3f37;
        font-weight: 500;
        text-align: center;
        padding: .5rem .8rem;
        border-radius: 3px;
        transition:all .5s;
    }
    nav a:hover{
        background-color: #f05751;
        box-shadow: 1px 1px 15px greenyellow;
    }
    #bell,
    #bars,
    .logo {
        display: none ;
    }
    main{
        grid-area:content ;
        padding: 0 .9rem;
        display :grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-areas:'user user'
                            'stats setting'
                            'projects projects';
        gap : 0;
        }
        #usInfo{
            grid-area:user;
        }
        #overView{
            grid-area:stats;
        }
        #settings{
            grid-area: setting;
            margin-top: 5rem; 
        }
        #usProjects{
            grid-area:projects ;
        }
        .nav-logo{
            display: block;
            width: 90%;
            margin: 0 auto;
        }
        /* Service page */
        #serPage {
            display: block;
            padding: 3rem .9rem;
        }
        #serPage h1{
            margin-top: 4px;

        }
        #service{
            display : grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 25% 50% 20%;
            grid-template-areas:'intro intro'
                                'image including'
                                'delivery start';
            gap : 2rem;
            align-items: start;
                            }
        .descCon{
            grid-area: intro;
        }
        .serv-image{
            grid-area: image;
            width: 100%;
            border-radius: 10px;
            object-fit: cover;
        }
        .include{
            grid-area: including;
            margin-left: 2rem;
        }
        .del{
            display: block;
            grid-area:delivery ;
            margin-bottom: 3rem;
        }
        #start{
            grid-area: start;
            margin-top: 3rem;
            padding: 1rem 1.5rem; 
        }
        body #introb{
            display: none;
        }
        h2{
            font-size: 2rem;
        }
        #includes{
            font-size: 1.3rem;
        }
        .descCon #price{
            padding: 1rem 1.5rem;
            font-size: 1.3rem;
            border: solid 2px #fc3f37;
        }
        .marProjects{
            display : flex; 
            flex-direction: row;
        }
        .marketerInfo  , .marEmail{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
}