/* script for styling TITLES and LINES on a side */

/* content titles */
#aboutTitle, #expTitle, #edTitle, #skillsTitle, #hobTitle, #proTitle, #contactTitle {
    position: relative;
    width: 35%;
    left: 10%;
    font-family: 'Playball', cursive;
    font-size: 52px;
    color: #BFB45C;
    border-bottom: solid 6px #E96252;
    border-top: solid 6px #E96252;
    padding-right: 15px;
    padding-left: 15px;
}

#expTitle, #skillsTitle, #contactTitle{
    color: #252E40;
}

/* position contact title at the middle of the page */
#contactTitle{
    border-bottom: 0px;
    width: 80%;
    text-align: center;
}

/* lines on a side */
/* draw lines before titles */
#aboutTitle::before, #expTitle::before, #edTitle::before, #skillsTitle::before, #hobTitle::before, #proTitle::before, #contactTitle::before{
    content: "";
    background: #E96252;
    height: 400px;
    width: 7px;
    position: absolute;
    bottom: 70px;
    left: 0;
}

#aboutTitle::before{
    height: 150px;
}

#edTitle::before{
    height: 1200px;
}

#hobTitle::before {
    height: 600px;
}

#proTitle::before{
    height: 100px;
}

#contactTitle::before {
    height: 1000px;
}

/* draw lines after titles */
#aboutTitle::after, #expTitle::after, #edTitle::after, #skillsTitle::after, #hobTitle::after, #proTitle::after{
    content: "";
    background: #E96252;
    height: 500px;
    width: 7px;
    position: absolute;
    top: 70px;
    left: 0;
}

#aboutTitle::after{
    height: 700px;
}

#expTitle::after{
    height: 1200px;
}

#edTitle::after{
    height: 400px;
}

#proTitle::after {
    height: 1000px;
}

#hobTitle::after {
    height: 51px;
}

/* iPad screen size adjustments */
@media screen and (max-width: 768px) {
    #aboutTitle, #expTitle, #edTitle, #skillsTitle, #hobTitle, #proTitle, #contactTitle {
        width: 45%;
        font-size: 36px;
        padding: 12px 15px;
    }    

    #edTitle::before{
        height: 1500px;
    }

    #hobTitle::after {
        height: 40px;
    }

    #proTitle::before{
        height: 82px;
    }

    #contactTitle{
        border-bottom: 0px;
        width: 80%;
        text-align: center;
    }
}
  
/* phone screen size adjustments */
@media screen and (max-width: 570px) {
    #aboutTitle, #expTitle, #edTitle, #skillsTitle, #hobTitle, #proTitle, #contactTitle {
        font-size: 26px;
        padding: 17px 20px;
    }   

    #hobTitle::after {
        height: 30px;
    }

    #proTitle::before{
        height: 80px;
    }

    #contactTitle{
        border-bottom: 0px;
        width: 80%;
        text-align: center;
    }
}