/* Global */
.main {
    width: inherit;
    background-color: #353232;
    background-repeat: no-repeat;
    background-position: top;
    object-fit: cover;
    height: auto;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

a {
    color: white;
}

/* class to visually hide content on screen */
.hide {
    display: none;
}

/* NavBar */
#topBar {
    height: 7rem;
    font-family: 'Bebas Neue', cursive;
    font-size: 1.2rem;
    color: white;
    margin-bottom: 3rem;
    justify-content: center;
}

#topBar a:hover {
    color: white;
    border-bottom: 2px solid #dca4b4;
}

.navCustom {
    background-color: #1f1e1e;
}

#homeNav {
    font-size: 1.4rem;
    font-family: 'Rajdhani', sans-serif;
    color: #dca4b4;
    text-transform: uppercase;
}

#btnShow {
    color: #dca4b4;
    margin-top: .6rem;
    margin-left: .7rem;
}

#logo {
    width: 39px;
    height: 30px;
}

.navLogo {
    justify-content: center;
    margin-left: -0.5rem;
}

.mainWrapper {
    width: inherit;
}

/* Desktop Display */
@media(min-width:768px) {
    #topBar {
        font-size: 1.2rem;
        justify-content: space-between;
    }

    #homeNav {
        font-size: 1.8rem;
        margin-top: 0rem;
    }

    #logo {
        width: 69px;
        height: 50px;
    }

    .navLogo {
        justify-content: start;
    }

    .mainWraper {
        width: 100%;
    }

    .main {
        width: 100%;
    }
}

/* Sidebar */
#sidebarSm {
    width: 40px;
    height: 100%;
    color: white;
    background-color: #3b3737;
    position: fixed;
    left: 0%;
    visibility: hidden;
}

#sidebarSm a {
    padding-bottom: 1.5rem;
    font-size: 1.2rem;
}

#sidebarSm a:hover {
    color: black;
}



/* Home View */
.home {
    width: 100%;
    background-color: #353232;
    height: auto;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(/img/coverCell.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: top, top 9% left 0%;

}

#homeView {
    margin: 0;
    width: inherit;
    margin-top: 10rem;
}


#mainLoad {
    height: 100%;
    width: inherit;

}

/* Index View */
#homePage {
    width: 95%;
    height: auto;

}

#homeGraphicDiv {
    margin-top: -13rem;
    padding-left: -5rem;
}

.homeIcons {
    color: white;
    font-size: .6rem;
    padding: 2rem;
    margin-bottom: 9rem;
}


.homeGreeting {
    color: white;
    color: #dca4b4;
    color: white;
    font-family: 'Playfair Display', serif;
    margin-top: 4rem;
    margin-left: 2rem;
    font-size: 2rem;
    margin-bottom: 20rem;
}

.homeFocus {
    font-family: 'Varela', sans-serif;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #dca4b4;
    color: white;
    text-decoration: underline #f8ad0b;
    -webkit-text-decoration: underline #f8ad0b;
    /* color: black; */
}

.homeSub {
    font-family: 'Varela', sans-serif;
    font-family: 'Playfair Display', serif;
    color: white;
    font-size: 1.2rem;
}

.homeMiniFocus {
    background-color: rgba(0, 0, 0, .7);
    color: white;
    font-size: 0.8rem;
    width: 70%;

}

#starterBtn {
    color: black;
    font-size: 0.6rem;
}


/* Larger view Home styling */
@media(min-width:768px) {
    .home {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(/img/coverSm.jpg);
        background-repeat: no-repeat, no-repeat;
        background-position: top, top 5% left 30rem;
        ;
    }

    #homePage {
        width: inherit;
        height: auto;
        /* background-image: none; */
    }

    #homeGraphicDiv {
        margin-top: 8rem;
        margin-left: 5rem;
        outline: 8000px solid rgba(0, 0, 0, 0.5) !important;
        outline-offset: -3000px;

    }

    .homeGreeting {
        color: #dca4b4;
        padding-top: 4rem;
        margin-left: 7rem;
        font-size: 1.2rem;
        padding-bottom: 10rem;
    }

    .homeFocus {
        font-family: 'Varela', sans-serif;
        font-family: 'Playfair Display', serif;

        font-size: 3rem;
        color: #dca4b4;
        color: white;
    }

    .homeSub {
        font-size: 3rem;
        font-family: 'Playfair Display', serif;
        color: #f8ad0b;
    }

    #homeView {
        width: inherit;
    }

    .homeMiniFocus {
        background-color: rgba(0, 0, 0, .7);
        color: white;
        font-size: 1rem;
        width: 35%;
    }

    #starterBtn {
        color: white;
        font-size: 1.2rem;
    }

    #sidebarSm {
        width: 40px;
        height: 100%;
        color: white;
        background-color: #3b3737;
        position: fixed;
        left: 0%;
        visibility: visible;
    }

}

/* About View */
.about {
    background-color: rgba(44, 42, 42, 1);
}

#aboutWrap {
    width: inherit;
    height: auto;
    margin-top: -3rem;
    margin-bottom: -1rem;
    background-image: linear-gradient(to top, rgba(44, 42, 42, 1), rgba(14, 13, 13, .4)), url(/img/headshot2_tiny.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: top, top;
    color: white;
}

.about_border {
    border: 0.7rem solid white;
}

.about_row1 {
    margin-top: 2rem;
}

#about_head {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: white;
    border-bottom: 2rem solid #6b2643;
    padding-bottom: 10rem;
}

.vertical_l {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    font-size: 0.5rem;

}

.vertical_r {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.5rem;

}

#aboutContent {
    font-size: 0.8rem;
    text-indent: 10%;
    padding-bottom: 2rem;
}

.aboutCol2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 90%;
}

/* Larger view About styling */
@media(min-width:768px) {
    #aboutWrap {
        width: 95%;
        margin-left: 3rem;
        margin-top: -1rem;
        margin-right: 4rem;
        background-image: linear-gradient(to right, rgba(44, 42, 42, 1), rgba(14, 13, 13, .4)), url(/img/headshot2_tiny.jpg);
        background-repeat: no-repeat, no-repeat;
        background-position: top, top right;

    }

    .about_border {
        border: 1.5rem solid white;
    }

    .about_row1 {
        margin-top: 10rem;
    }

    #about_head {
        font-family: 'Playfair Display', serif;
        font-size: 4rem;
        color: white;
        border-bottom: 2rem solid #6b2643;
        padding-bottom: 10rem;
    }

    .vertical_l {
        writing-mode: vertical-lr;
        text-orientation: mixed;
        font-size: inherit;

    }

    .vertical_r {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-size: inherit;
    }

    #aboutContent {
        font-size: inherit;
        margin-left: 0rem;
        margin-right: 0rem;
    }

    .aboutCol2 {
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}


/* Resume View */
.resume {
    width: 100%;
    background-color: black;
    height: auto;
}

.topGrids {
    overflow: hidden;
    margin-top: -7rem;
    margin-left: 1rem;
}

.headingSection {
    flex-direction: column;
}

#resumeContent {
    margin-top: 1rem;
    height: auto;
}

.resumeNav {
    box-shadow: 0 .5rem 1rem rgba(255, 255, 255, 0.15);
    background-color: black;
}

#boxGraphic3 {
    margin-bottom: 2rem;
    margin-right: -50rem;
    overflow: hidden;
}

#boxGraphic2 {
    overflow: hidden;

}

#resumeGrid {
    background-image: linear-gradient(to bottom, black, #313030);
    overflow: hidden;
}

#gridImg {
    margin-top: -7rem;
    margin-bottom: -4rem;
}


#resumeHeader {
    margin-top: 2rem;
}

#resumeTitle {
    margin-top: 5rem;
    margin-bottom: 15rem;
    font-family: 'Varela', sans-serif;
    font-size: 3rem;
    color: white;
}

.profile {
    display: none;
    color: rgb(131, 127, 127);
    width: 95%;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
}

#profileSm {
    display: inline-flex;
    flex-direction: column;
    font-size: 0.6rem;
    padding: 0 0.5rem 0 0.5rem;

}

#resumeSubTitle,
#resumeSubTitle2,
#certificationSm {
    color: #dca4b4;
    font-family: 'Varela', sans-serif;
    margin-left: 1rem;
}

#profileP,
#resumeSubTitle {
    display: none;
}

#resumeSubTitle2,
#certificationSm {
    font-size: 0.8rem;
}

#profileP2,
#scrumSmContent {
    font-size: 0.6rem;
}

#scrumDesSm {
    color: #afabab;
    padding-left: 1rem;
}



#leftSide {
    background-color: black;
    color: white;
    display: flex;
    flex-direction: flex-row;
    justify-content: start;
    margin-left: 0.5rem;

}

#darkHead {
    background-image: url(/img/dark_mainSm.jpg);
    background-repeat: no-repeat;
    background-position: center;
    width: 180px;
    height: 270px;
    font-size: 0.5rem;
    margin-top: -1rem;


}

.firstName {
    color: white;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
}

.lastName {
    font-family: 'Bebas Neue', cursive;
    color: white;
    font-size: 1rem;
}


#downloadBtn a {
    text-decoration: none;
    color: white;
    border-radius: 90%;
}

#downloadBtn a:link {
    text-decoration: none;
    color: white;
}

#downloadBtn i {
    color: white;
}

.p_info {
    margin-bottom: -0.2rem;
}

.h_title {
    color: white;
    font-size: 0.8rem;
}

.h_titleSub {
    color: white;
    font-size: 0.7rem;
    margin-left: 0.5rem;
}

.h_title2 {
    color: white;
    font-size: 0.8rem;
    padding: .5rem;
    border-top: 1px solid #dca4b4;
}

.h_body {
    color: #afabab;
    font-size: 0.6rem;
    margin-bottom: 0.8rem;
    padding-left: .5rem;
    border-left: .3rem dotted #dca4b4;


}

#resumeBody {
    background-color: #313030;
}



#rightSkillsSide,
#resumeBody {
    color: #afabab;
    font-size: 0.7rem;
}

#rightSkillsSide {
    background-color: black;
    font-size: 0.6rem;
}

#resumeBody h4,
#resumeBody h5 {
    color: white;
    font-size: 0.8rem;
}

#rightSkillsSide h4,
#rightSkillsSide h5 {
    color: white;
    margin-top: 0.5rem;
    padding: .5rem;
    font-size: 0.8rem;

}

.rightHeads {
    border-top: 3px solid white;
    margin-bottom: 1rem;
}

.rightHeads2 {
    border-top: 3px solid white;
}

#certification {
    margin-top: none;
}

#scrum,
#certLg,
#certification,
.scrumLgContent {
    display: none;
}

#scrumSm {
    width: 40px;
    height: auto;
}

#experienceHead {
    font-size: 1rem;
    margin-bottom: 1rem;
    background-color: transparent;
    color: white;
}

.mainIcons {
    color: #dca4b4;
    font-size: 1.2rem;
}

.mainIconsR {
    color: #dca4b4;
    font-size: 0.8rem;
    margin-top: 1.2rem;
}

.subIcons {
    color: #313030;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}

.subIconsR {
    color: #313030;
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
}

.bullets {
    font-size: .3rem;
    margin-right: .4rem;
    color: #dca4b4;
}

.hardSkills {
    margin-top: -0.5rem;
}

.resumeDate {
    color: #dca4b4;
    font-size: 0.7rem;
}

#education {
    background-color: #252424;
    padding-left: 1rem;
}

.resumeLine1 {
    display: none;
}

.resumeLine {
    height: 17px;
    overflow: hidden;
}

.educationBullets {
    border-left: .2rem dotted #dca4b4;
}

#keyClasses {
    border-right: 1px solid #524e4e;
    padding-left: 2rem;
}

#resumeLineBottom,
#portfolioLineBottom {
    width: 461px;
    height: 50px;
}

#resumeTopBtn,
#portfolioTopBtn {
    color: #dca4b4;
    width: 20%;
}

/* Larger view Resume styling */
@media(min-width:768px) {
    #resumeContent {
        width: 95%;
        margin-top: 5rem;
        margin-left: 3rem;
    }

    .topGrids {
        margin-top: 0rem;
        margin-left: 0rem;
    }

    #resumeHeader {
        margin-top: 5rem;
    }

    .profile {
        display: inline;
        margin-left: 4rem;
        padding: 3rem;
    }

    #resumeSubTitle,
    #profileP,
    #certification,
    .scrumLgContent {
        display: inline;
    }

    #profileSm,
    #resumeSubTitle2,
    #profileP2 {
        display: none;
    }

    #leftSide {
        margin-left: 0;
        padding-bottom: 5rem;
    }

    #darkHead {
        background-image: url(/img/dark_main.jpg);
        background-repeat: no-repeat;
        background-position: center;
        width: 450px;
        height: 740px;
        font-size: 1.4rem;

    }

    .firstName {
        font-size: 2.4rem;
    }

    .lastName {
        font-size: 2.4rem;
    }

    #rightSkillsSide,
    #resumeBody,
    .h_titleSub,
    .resumeDate {
        font-size: 1rem;
    }

    #rightSkillsSide h4,
    #rightSkillsSide h5 {
        font-size: 1.5rem;
        margin-top: 1rem;
    }

    #scrum {
        display: inline;
        width: 80px;
        margin-left: 2rem;
        padding-top: 2rem;
        padding-left: 0rem;
        padding-right: 0rem;
    }

    #scrumSm,
    #certSm,
    #certificationSm,
    .scrumSmContent {
        display: none;
    }

    .mainIconsR {
        font-size: 2rem;
        margin-top: 1.5rem;
    }

    .subIconsR {
        font-size: 1.4rem;
        margin-bottom: 1.5rem;
    }

    .rightHeads,
    .rightHeads2 {
        margin-bottom: 5rem;
    }

    .hardSkills {
        margin-top: 2rem;
    }

    .h_title2 {
        font-size: 1rem;
        padding: .5rem;
    }

    .h_title {
        color: white;
        font-size: 1rem;
    }

    .headingSection {
        flex-direction: row;
    }

    .h_body {
        font-size: 1rem;
        margin-bottom: 3rem;
        padding-left: .5rem;
        border-left: .5rem dotted #dca4b4;
    }

    .h_body {
        font-size: 1rem;
        margin-bottom: 3rem;
        border-left: .5rem dotted #dca4b4;
    }

    #experienceHead {
        font-size: 2rem;
        margin-bottom: 3rem;
        margin-right: 3rem;

    }

    .mainIcons {
        font-size: 2rem;
    }

    #gridImg {
        margin-bottom: -2rem;
        margin-top: 0rem;
    }

    #resumeBody h4,
    #resumeBody h5 {
        font-size: 1.5rem;
    }

    #education,
    #keyClasses {
        padding-left: 4rem;
    }

    .educationBullets {
        border-left: .5rem dotted #dca4b4;
    }

    .resumeLine1 {
        height: 17px;
        overflow: hidden;
        display: inline;
    }

}

/* Portfolio */
.portfolio {
    width: 100%;
    background-image: linear-gradient(to bottom, black, #292424, black);
    color: white;
    height: auto;
}

#folioGraphicDiv,
#resumeGraphicDiv {
    margin-top: -3rem;
    width: auto;
}

.folioIcons {
    font-size: .4rem;
    padding: 2rem;
    color: white;
}

#port_header {
    margin-top: 2rem;
    margin-bottom: 5rem;
}

#port_head {
    font-family: 'Varela', sans-serif;
    font-size: 3rem;
    color: white;
}

#portSubHead {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #dca4b4;
}

.gitI {
    height: 70%;
}

#gitBtn a {
    color: white;
}

#gitBtn i,
.gitI i {
    color: green;

}

.gitI a {
    text-decoration: none;
}

#gitBtn a:hover,
.gitI a:hover {
    color: black;
}

#gitBtn a:link,
.gitI a:link {
    text-decoration: none;
}

#organic,
#fashion,
#property {
    margin-top: 0rem;
    padding-top: 2rem;
}

.projectImg {
    width: 400px;
    height: 400px;
    object-fit: contain;
    justify-items: center;
}

.projectView {
    display: flex;
    flex-direction: column;
}

.projectContent {
    border-top: 3px solid white;
}

#django,
#microsoft {
    width: 96px;
}

#react {
    width: 80px;

}

#static {
    width: 40px;
}


.bullet {
    color: #dca4b4;
    font-size: 0.5rem;
    margin-right: 1rem;
}

.projectSub {
    color: #afabab;
}

.projectSubDate {
    color: #dca4b4;
    font-family: 'Varela', sans-serif;
}

.projectTitle {
    font-family: 'Varela', sans-serif;
    object-fit: cover;
    font-size: 1.5rem;
}


.card_tab {
    color: black;
    font-size: 4rem;
    object-position: right;
}

.mainIconsP {
    color: #dca4b4;
    font-size: 1.2rem;
    margin-top: 0.4rem;
}

.port_cards p {
    font-size: 1rem;
    margin-bottom: 0.7rem;
}

#portfolioGrid1 {
    overflow: hidden;
}

.companySite {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
}

#portfolioLineBottom {
    display: none;
}

#carouselBtns {
    position: relative;
    left: 3%;
}

#indicators {
    position: relative;
    top: 0%;
}

#swipe,
.cellProgress,
.cellProgress i {
    display: inline;
}

.cellProgress {
    color: rgb(131, 127, 127);
    color: #f8ad0b;
    font-size: 0.8rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: -3rem;
}

#swipe {
    font-size: 1rem;
    color: #f8ad0b;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Larger view Portfolio styling */
@media(min-width:768px) {

    #port_header {
        margin-top: 5rem;
        margin-bottom: 10rem;

    }

    #portSubHead {
        font-size: 3rem;
        margin-bottom: 4rem;
    }

    #gitBtn {
        margin-bottom: 2.6rem;
        width: 15%;
        font-size: 1rem;
    }

    .projectView {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    #portfolioLineBottom {
        display: inline;
    }

    #carouselBtns {
        position: relative;
        left: 3%;
    }

    #indicators {
        position: relative;
        top: 0%;
    }

    .mainIconsP {
        font-size: 2rem;
        margin-top: 0rem;
    }

    #swipe,
    .cellProgress,
    .cellProgress i {
        display: none;
    }
}


/* Contact Page */
.contact {
    width: 100%;
    background-color: white;
    height: auto;
}

#contactDiv {
    width: inherit;
}

#contactWrap {
    width: inherit;
    overflow: hidden;
    height: auto;
    margin-top: -3rem;
    margin-bottom: -1rem;
    margin-left: none;
    background-image: linear-gradient(to top, rgba(44, 42, 42, 1), rgba(14, 13, 13, .4)), url(/img/contact5.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: top, top left;
    color: white;
}


#contactContent {
    width: 100%;
    height: auto;
    color: #313030;
}

#contact_header {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: white;
    justify-content: center;
    padding-bottom: 10rem;
}

#contactInfo {
    margin-top: -3rem;
    columns: 1 auto;
    margin-bottom: 3rem;
}

.infoDiv {
    width: 100%;
    column-span: all;
    column-width: 100%;
}

.contactGreeting {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: white;
    margin-bottom: 1.7rem;
}

.contactGreetingSub {
    color: #969292;
    color: white;

}

.contactLastRow {
    flex-direction: column-reverse;
    justify-content: center;
    margin-top: 5rem;
    padding-top: 5rem;
    padding-bottom: 3rem;
    border-top: 2rem solid #6b2643;
}

.contactMain {
    color: white;
    color: #313030;
}

.contactIcons {
    color: #dca4b4;
    font-size: 1.7rem;
}

.contactSubIcons {
    font-size: 1.5rem;
    color: #5f5d5d;
    padding: 3rem 1rem 1rem 1rem;

}

.contactSubIcons:hover {
    color: #dca4b4;

}

.subIcon2 {
    font-size: 1.5rem;
    color: #666363;
}

.directContact {
    width: auto;
    font-size: 1.2rem;
    color: white;

}

#contact_form {
    width: 105%;
    margin-bottom: 4rem;
}

#extra_name,
#reply_to,
#subject,
#message {
    color: white;
}

#postmail {
    color: rgb(150, 146, 146);
    font-size: .8rem;
}

#postmail a {
    color: rgba(255, 255, 255, 0.4)
}

.contactBtn {
    flex-direction: column;
    justify-content: center;
}

.webSite {
    color: rgb(78, 76, 76)
}

/* Larger view Contact styling */
@media(min-width:768px) {
    #contactDiv {
        width: 100%;
        padding: 2rem;
        margin-top: -1rem;
    }

    #contactWrap {
        background-image: linear-gradient(to top, rgba(44, 42, 42, 1), rgba(14, 13, 13, .4)), url(/img/contact4.jpg);
        background-repeat: no-repeat, no-repeat;
        background-position: top, top left;
        /* padding: 9rem; */
        margin-top: 0rem;
        margin-left: 1rem;
    }

    #contact_header {
        justify-content: end;
        font-size: 4rem;
        border-bottom: 2rem solid #6b2643;
        padding-bottom: 10rem;
    }

    #contactInfo {
        margin-top: -3rem;
        margin-bottom: 0rem;
        columns: 2 auto;
    }

    .infoDiv {
        width: 50%;
        margin-left: -2rem;
    }

    .contactGreeting {
        font-size: 2rem;
        color: white;
        margin-bottom: .5rem;
    }

    .contactGreetingSub {
        color: #969292;
    }

    .contactLastRow {
        flex-direction: row;
        justify-content: evenly;
        padding-top: 0rem;
        border-top: none;
        margin-top: 2rem;
    }

    .contactBtn {
        flex-direction: row;
        justify-content: start;
    }

    .contactSubIcons {
        padding: 3rem 2rem 1rem 2rem;
    }
}

/* Footer */
.mainFooter {
    color: white;
    padding-top: 2rem;
}

.contactFooter {
    color: #474646;
    padding-top: 2rem;
}

.mainFooter i {
    padding: 1rem;
    font-size: 1.5rem;
}

.contactFooter i {
    color: #474646;
    padding: 1rem;
    font-size: 1.5rem;
}

#footer i:hover {
    color: #dca4b4;
}

#footer a {
    font-family: 'Varela', sans-serif;
    text-decoration: underline;
    padding: 1rem;

}

#footer a:hover {
    color: #dca4b4;

}

.logoName2 {
    width: 100%;
    border: 2px solid #5c5656;
    padding-top: 1rem;
    overflow: hidden;
}

.logoNameFirst2 {
    color: #5c5656;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
}

.logoNameLast {
    font-family: 'Bebas Neue', cursive;
    color: #5c5656;

}

#websiteGit {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #5c5656;
}

#websiteGit a {
    color: green;
    font-size: 1.2rem;
    text-decoration: none;
}

/* Larger View Footer */
@media(min-width:768px) {
    #footer {
        margin-left: 2.4rem;
    }

}