:root 
{
    --primary: #6C63FF;
    --secondary: #0a00cf;
    --tertiary: #e84843;
    --tertiary-light: #ff2f00;
    --tertiary-hover: #f16762;
    --white-shadow: #00000028;
    --blue-shadow: #4e3ff080;
 }

 body
 {
    scroll-behavior: smooth;
 }

.pd
{
    padding: 50px 0px;
}
a
{
    text-decoration: none;
    color: inherit;
}
h1,h2,h3,h4,h5,h6
{
    margin-bottom: 0px;
}
button a:hover
{
    color: inherit;
}
.color
{
    color: white;
}
.c1
{
    color: var(--primary);
}
.c2
{
    color: var(--tertiary);
}
.c3
{
    color: var(--secondary);
}
.c4
{
    color: black;
}
.c5
{
    color: var(--tertiary-light);
}
.bg
{
    background-color: var(--secondary);
}
.bg2
{
    background-color: var(--primary);
}
/* navbar */
/* #mynav
{
    background-color: var(--secondary);
    
} */
.navbar-toggler
{
    background-color: white!important;
    box-shadow: none;
}
a.navbar-brand
{
    font-size: 45px;
    color: var(--tertiary);
    font-family: Candara;
    font-weight: 800;
}
.navbar-nav li
{
    font-size: 25px;
}
.navbar-nav li a
{
    color: var(--tertiary);
}
.nav-item:hover a
{
    color:var(--secondary);
}
a.navbar-brand:hover
{
    color:var(--secondary);
}
/* banner */

#banner .content
{
    margin-top: 160px;
}

.head
{
    font-size: 80px!important;
    color: var(--tertiary);
}

.head2
{
    font-size: 40px!important;
}

.bimg
{
    margin-top: 18%;
    height: 500px;
}
/* about */
/* #about
{
    background-image: url(../images/abt.gif);
    background-size: 30%;
    background-repeat: no-repeat;
    background-position-x: 70%;
    background-position-y: 70%;
} */
.abcontent
{
    padding-left: 100px!important;
    /* padding-top: 100px; */
}
#about p
{
    font-size: 30px;
    color: white;
}
.dp
{
    border-top: 5px solid var(--tertiary);
    border-bottom: 5px solid var(--tertiary);
}
/* skills */
#skills
{
    background-image: url(../images/back.gif);
    background-size: 40%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 70%;
}
a.skillbtn
{
    background-color: var(--primary);
    padding: 10px 30px;
    text-decoration: none;
    color: white;
    /* border: 2px solid var(--tertiary); */
    border-radius: 15%;
    transition: all 0.2s linear;
}
#skills .ski
{
    padding-top: 150px;
}
a.skillbtn:hover
{
    background-color: var(--tertiary);
    color: white;
}
/* projects */
#projects .p1
{
    background-color: white;
    margin-left: 50px;
    cursor: pointer;
    /* transition: background-color 0.2s linear;
    transition: box-shadow 0.2s linear;
    transition: transform 0.2s linear; */
}
#projects .p1:hover
{
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-8px);
    box-shadow: 5px 10px 18px #3e3e3e;
}
#projects .p1 p
{
    font-size: 16px;
}
#projects .p1 h4
{
    font-size: 16px;
}
#projects .p1 h2
{
    font-size: 23px;
}
#projects .p1 a
{
    font-size: 13px;
}
#projects .p1 a.except
{
    margin-top: 120px!important;
}
/* experience */
.expi
{
    background-color: var(--secondary);
    padding: 60px 0px;
    color: white;
    border-top: 5px solid var(--tertiary);
    border-bottom: 5px solid var(--tertiary);
}
.expi2
{
    padding: 90px 30px;
}
.exp
{
    margin-right: 50px;
}
a.expibtn
{
    background-color: var(--tertiary);
    padding: 10px 30px;
    text-decoration: none;
    color: white;
    /* border: 2px solid var(--tertiary); */
    border-radius: 15%;
    transition: all 0.2s linear;
}
a.expibtn:hover
{
    background-color: var(--tertiary-hover);
    color: white;
}
.expi-img
{
    margin-top: 150px;
}
/* contact me */
a i
{
    color: white;
    font-size: 25px;
    margin-right: 30px;
    align-items: center;
    transition: all 0.2s linear;
}
a i:hover
{
    color: var(--tertiary);
}
.cnt
{
    /* margin-left: 530px; */
    text-align: center;
}


/* media query */
@media only screen and (max-width:991px)
{
    #banner .content
    {
        margin-top: 60px;
        /* margin-left: 80px; */
    }
    .head
    {
        font-size: 50px!important;
        color: var(--tertiary);
    }

    .head2
    {
        font-size: 30px!important;
    }
    .head3
    {
        font-size: 25px;
    }
    /* about */
    .abcontent
    {
        padding-left: 20px!important;
        /* padding-top: 100px; */
    }
    #about p
    {
        font-size: 20px;
        color: white;
    }
    .dp
    {
        border-top: 5px solid var(--tertiary);
        border-bottom: 5px solid var(--tertiary);
    }
    /* my work */
    #projects .p1
    {
        background-color: white;
        margin-left: 0px;
        border-radius: 5%;
        cursor: pointer;
        /* transition: all 0.2s linear; */
    }    
    .exp
    {
        margin-right: 0px;
    }
    /* about */
    /* #about
    {
        background-image: url(../images/abt.gif);
        background-size: 50%;
        background-repeat: no-repeat;
        background-position-x: 80%;
        background-position-y: 80%;
    } */
    /* skills */
    #skills
    {
        background-image: url(../images/back.gif);
        background-size: 50%;
        background-repeat: no-repeat;
        background-position-x: 50%;
        background-position-y: 85%;
    }
    /* projectx */
    #projects .p1
    {
        border-radius: 0%;
    }
    #projects .p1 p
    {
        font-size: 16px;
    }
    #projects .p1 h4
    {
        font-size: 19px;
    }
    #projects .p1 h2
    {
        font-size: 25px;
    }
    #projects .p1 a
    {
        font-size: 13px;
    }
}

@media only screen and (max-width:273px)
{
    /* #about*/
    
    #about p
    {
        font-size: 10px;
        color: white;
    }
    /* skills */
    #projects a.skillbtn
    {
        padding: 5px 10px;
        margin-top: 0%;

    }
    /* experience */
    a.expibtn
    {
        background-color: var(--tertiary);
        padding: 5px 10px;
        text-decoration: none;
        color: white;
        /* border: 2px solid var(--tertiary); */
        border-radius: 15%;
        transition: all 0.2s linear;
    }
    /* projects */
    #projects .p1
    {
        border-radius: 0%;
    }
    #projects .p1 p
    {
        font-size: 12px;
    }
    #projects .p1 h4
    {
        font-size: 13px;
    }
    #projects .p1 h2
    {
        font-size: 18px;
    }
    #projects .p1 a
    {
        font-size: 10px;
    }
}
@media only screen and (max-width:580px)
{
    /* navbar */
    a.navbar-brand
    {
        font-size: 30px;
    }
    .bimg
    {
        margin-top: 18%;
        height: 300px;
    }
    /* skills */
    #skills
    {
        background-image: url(../images/back.gif);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position-x: 100%;
        background-position-y: 100%;
    }
    /* about */
    #about p
    {
        font-size: 15px;
        color: white;
    }
    /* projects */
    #projects .p1
    {
        border-radius: 0%;
    }
    #projects .p1 p
    {
        font-size: 12px;
    }
    #projects .p1 h4
    {
        font-size: 13px;
    }
    #projects .p1 h2
    {
        font-size: 18px;
    }
    #projects .p1 a
    {
        font-size: 10px;
    }
    
}

@media only screen and (max-width:767px)
{
    /* about */
    .dp
    {
        margin-left: 50%;
    }
}

@media only screen and (max-width:315px)
{
    a.skillbtn
    {
        padding: 10px 15px;
    }

    #contact a i
    {
        font-size: 1em;
        margin-right: 10px;
    }
}

@media only screen and (max-width:396px)
{
    /* expibtn */
    a.expibtn
    {
        background-color: var(--tertiary);
        padding: 10px 15px;
        text-decoration: none;
        color: white;
        /* border: 2px solid var(--tertiary); */
        border-radius: 15%;
        transition: all 0.2s linear;
    }
}

@media only screen and (max-width:306px)
{
    /* expibtn */
    a.expibtn
    {
        background-color: var(--tertiary);
        padding: 5px 10px;
        text-decoration: none;
        color: white;
        /* border: 2px solid var(--tertiary); */
        border-radius: 15%;
        transition: all 0.2s linear;
        font-size: 0.6em;
    }
}