* {
    box-sizing: border-box
}

:root {
    --AccentColor: rgb(71, 12, 8);
}

html {
    overflow: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    background-image: url("../img/BackgroundPortfolio.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100vh;
    background-color: black;
}

button {
    font-family: 'Times New Roman', Times, serif;
    border: none;
}

p {

    font-family: 'Times New Roman', Times, serif;
}

.titleCard {
    margin: 1.5vh auto 0 auto;
    padding: 2vh 0 3vh 0;
    width: 35vw;
    height: auto;
    border: 5px solid var(--AccentColor);
    border-radius: 15px;
    text-align: center;
    font-size: 32px;
    background-image: initial;
    background: radial-gradient(black, 80%, var(--AccentColor));
}

.titleCard>p {
    color: white;
    margin-top: 1vh;
    font-size: 18pt;
    font-weight: 500;
    margin-bottom: 0;
}

.titleCard>.titleCardTitle {
    font-size: 120%;
}

.screenSelection {
    display: flex;
    justify-content: center;
    gap: 7vw;
}

.backButtonContainer {
    gap: 7vw;
    padding-left: 6.8%;
}

.screenSelection>button,
.backButtonContainer>button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10vw;
    height: auto;
    margin: 2vh 1vw 2vh 1vw;
    padding: 1% 0 1% 0;
    font-size: 18px;
    border-radius: 10px;
    transition: all 1s;
    background: radial-gradient(rgb(0, 0, 0), 50%, rgb(71, 12, 8));
}


.screenSelection>button:hover,
.backButtonContainer>button:hover {
    cursor: pointer;
    text-decoration: underline;
}

.screenSelection>button>a {
    width: 100%;
    text-decoration: none;
    color: white;
}

.backButtonContainer {
    height: 5vh;
    margin-bottom: 1vh;
}

.backButtonContainer>button {
    margin: 0;
    height: 100%;
}

.backButtonContainer>button>p {
    color: white;
}

.mainText {
    margin: 0 auto 0 auto;
    padding-bottom: 10px;
    width: 85vw;
    height: 70vh;
    flex-direction: column;
    align-items: center;
    border: 8px solid var(--AccentColor);
    border-radius: 20px;
    background: radial-gradient(black, 90%, var(--AccentColor));
    transition: all 1s;
    overflow: hidden;
    -ms-overflow-style: none;
}

#projectPage {
    height: 75vh;
    overflow-y: scroll;
    scrollbar-color: var(--AccentColor) rgba(0, 0, 0, 0);
}

.mainText>.panelScroller {
    width: 100%;
    height: 68vh;
    overflow: hidden;
    position: relative;
}

.mainText>.panelScroller>.projectListContainer {
    padding: 5px;
    width: 100%;
    height: 99%;
    position: absolute;
    transition: all 1s;
    overflow: hidden scroll;
    -ms-overflow-style: none;
    scrollbar-color: var(--AccentColor) rgba(0, 0, 0, 0);
}

.mainText>.panelScroller>.projectListContainer>.projectList {
    margin: 0 auto 0 auto;
    padding-top: 1%;
    width: 90%;
    height: 80vh;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3%;
}

.mainText>.panelScroller>.projectListContainer>.projectList>li {
    max-width: 31%;
    height: 60vh;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border: 2px solid var(--AccentColor);
    border-radius: 15px;
    padding: 15px 5px 10px 5px;
    background: black;
}

.mainText>.panelScroller>.projectListContainer>.projectList>li:hover {
    cursor: pointer;
    background: radial-gradient(black, 90%, var(--AccentColor));
}

.mainText>.panelScroller>.projectListContainer>.projectList>li>img {
    margin-top: 1%;
    min-width: 70%;
    height: 80%;
    object-fit: cover;
    border-radius: 15px;
    padding: 0 2% 0 2%;
}

#verticalImage {
    min-width: 0;
}

.mainText>.panelScroller>.projectListContainer>.projectList>li>p {
    margin: 0;
    width: 90%;
    max-height: 10vh;
    color: white;
    font-size: 14pt;
    position: relative;
}

.mainText>.panelScroller>.projectListContainer>.projectList>li>p::first-line {
    font-size: 125%;
    line-height: 35pt;
    font-weight: bold;
}

.mainText>.panelScroller>.aboutMe {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    position: absolute;
    left: 100%;
    overflow: hidden scroll;
    scrollbar-color: var(--AccentColor) rgba(0, 0, 0, 0);
    transition: all 1s;
    font-size: 18pt;
}

.introductionTextContainer {
    padding-left: 5vw;
    width: 60%;
}

.introductionTextContainer>p {
    margin: 1vh 0 1vh 0;
    width: 100%;
    font-size: 100%;
    color: white;
}

.mainAboutMe {
    width: 100%;
    height: auto;
    display: flex;
    font-size: 100%;
    flex-direction: row;
    gap: 1vw
}

.mainAboutMeTextContainer {
    font-size: 100%;
    width: 70%;
    height: auto;
}

.mainAboutMeTextContainer>article {
    padding: 0 0 0 5vw;
    width: 100%;
    color: white;
    font-size: 100%;
}

.mainAboutMePersonalDescription {
    margin-bottom: 2vh;
}

.skillsList>u {
    font-size: 100%;
}

.skillsList>a {
    color: #c9c9c9;
}

.mainAboutMeImageContainer {
    max-width: 40%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.mainAboutMeImageContainer>img {
    margin: 0 auto 0 auto;
    width: 70%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    border-radius: 15px;
}

.mainAboutMeImageContainer>div {
    width: 100%;
    display: flex;
    justify-content: center;
}

.mainAboutMeImageContainer>div>a {
    margin-top: 20px;
    font-size: 100%;
    color: white;
}

.aboutMeClosing {
    margin: 0 auto 0 auto;
    width: 75%;
    font-size: 100%;
    text-align: center;
    color: white;
}

.mainText>.panelScroller>.contacts {
    width: 100%;
    height: 92%;
    position: absolute;
    left: 200%;
    transition: all 1s;
}

.contactsContainer {
    margin: 0 auto 0 auto;
    width: 100%;
    max-width: 90vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5vh;
}

.contactsContainer>.clickableImages {
    max-height: 20vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1vw;
}

.clickableImg {
    font-size: 100%;
}

.clickableImg>a {
    height: 100%;
}

.clickableImg>a>img {
    height: 100%;
}

.contactMail {
    width: 100%;
    color: white;
    font-size: 175%;
    text-align: center;
}

.mainText>.pdfEmbedContainer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.mainText>.pdfEmbedContainer>embed {
    width: 100%;
    height: 100%;
}

#cvPage {
    padding: 0;
}

.projectIntroductionContainer {
    margin: auto;
    color: white;
    width: 87%;
    text-align: center;
    font-size: 18pt;
}

.projectIntroductionContainer>.projectTitle>p {
    margin: 1vh 0 1vh 0;
    font-size: 175%;
}

.projectSummaryContainer {
    width: 100%;
    padding: 1%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 1vw;
    flex-direction: row;
    border: 2px solid var(--AccentColor);
    border-radius: 15px;
}

.projectSummary {
    width: 65%;
    padding-bottom: 1%;
}

.projectSummary>p {
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: 70%;
}

.projectSummaryContainer>.projectAspects {
    width: 30%;
    text-align: left;
    font-size: 80%;
    letter-spacing: 1pt;
    line-height: 150%;
    font-weight: bold;
}

.projectAspects>p {
    margin: 0;
}

.projectGithub {
    width: fit-content;
    height: 10vh;
    margin: 1vh 0 1vh 0;
    display: flex;
    font-size: 14pt;
}

.projectGithub>a {
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.githubButton {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5%;
    background: radial-gradient(black, 80%, var(--AccentColor));
    font-weight: bold;
    color: white;
    border: 2px solid var(--AccentColor);
    border-radius: 15px;
}

.githubButton:hover {
    background: radial-gradient(black, 50%, var(--AccentColor));
    text-decoration: underline;
}

.githubButton>img {
    max-height: 90%;
    margin-right: 10px;
}

.githubButton>p {
    margin-right: 5vw;
    font-size: 100%;
}

.projectImageAndTitleContainer {
    width: 90%;
    margin: 3vh auto 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5vh;
}

.projectImageList {
    padding: 2%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1vh 2%;
    border: 2px solid var(--AccentColor);
    border-radius: 15px;
}

.projectImageList>div {
    flex-basis: 45%;
    flex-grow: 1;
    align-items: center;
    object-fit: cover;
    border-radius: 15px;
    max-width: 70%;
}

#fullWidth {
    flex-basis: 70%;
    flex-grow: 0;
}

#verticalList {
    gap: 7%;
}

#verticalList>div {
    max-width: 25%;
    flex-grow: 2;
}

.projectImageList>div>a>img,
.projectImageList>div>video {
    width: 100%;
}

.projectTextContainer {
    padding: 1%;
    width: 100%;
    height: fit-content;
    border: 2px solid var(--AccentColor);
    border-radius: 15px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 3%;
    font-size: 18pt;
}

.projectTextContainer>article {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20%;
    text-align: center;
    width: 100%;
    color: white;
}

.projectTextContainer>article>.featureHolder {
    width: 90%;
    margin: 1.5vh 0 1.5vh 0;
    border: 2px solid var(--AccentColor);
    border-radius: 15px;
    padding: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.projectTextContainer>article>.notableFeatures {
    font-size: 110%;
    margin: 1.5vh 0 1.5vh 0;
}

.projectTextContainer>article>.featureHolder>.featureImageHolder {
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.projectTextContainer>article>.featureHolder>.featureImageHolder>a>img {
    width: 100%;
}

.projectTextContainer>article>.featureHolder>.featureText::first-line {
    font-size: 120%;
    text-decoration: underline;
    line-height: 1.5;
}

.projectTextContainer>article>.featureHolder>.featureText {
    width: 70%;
    margin-top: 0;
    font-size: 70%;
}

.projectTextContainer>article>.featureHolder>.featureImageCollection {
    margin-bottom: 1vh;
    height: fit-content;
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.projectTextContainer>article>.featureHolder>.featureImageCollection>.featureImageHolder {
    flex-basis: 45%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


.projectTextContainer>article>.featureHolder>.featureImageCollection>.featureImageHolder>a>img {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
}

#fitImage>a>img {
    width: 100%;
}


@media screen and (max-width:1600px) {

    body {
        background-size: 200vh;
    }

    .mainText>.panelScroller>.projectListContainer>.projectList>li>a>p {
        font-size: 12pt;
    }


}

@media screen and (max-width:1439px) {

    html::-webkit-scrollbar {
        display: none;
    }

    .projectListContainer {
        padding: 0;
    }

    .projectList {
        padding: 0;
    }

    .screenSelection>button {
        width: 20vw;
    }

    .backButtonContainer>button {
        height: 5vh;
    }

    .mainText>.panelScroller>.projectListContainer>.projectList>li>img {
        min-height: 85%;
    }

    .mainText>.panelScroller>.projectListContainer>.projectList>li>p {
        font-size: 10pt;
    }

    .mainText>.panelScroller>.aboutMe {
        font-size: 16pt;
        padding-left: 10px;
    }

    .introductionTextContainer>p {
        margin: 0;
    }

    .introductionTextContainer>p {
        margin: 0;
    }

    .mainAboutMe {
        padding: 0 10px 0 10px;
    }

    .mainAboutMeTextContainer {
        padding: 0;
    }

    .mainAboutMeTextContainer>article {
        padding: 0;
        width: 90%;
    }

    .mainAboutMeImageContainer {
        height: auto;
    }

    .mainAboutMeImageContainer>img {
        width: 100%;
    }

    .aboutMeClosing {
        width: 90%;
    }

    .contacts {
        font-size: 16pt;
    }

}

@media screen and (max-width:1023px) {

    .titleCard>.titleCardTitle {
        font-size: 80%;
    }

    .titleCard>p {
        font-size: 10pt;
    }

    .projectListContainer {
        padding: 0;
    }

    .projectList {
        padding: 0;
    }

    .screenSelection>button {
        font-size: 100%;
    }

    .backButtonContainer>button {
        width: 15vw;
    }

    .mainText {
        height: 75vh;
    }

    #projectPage {
        height: 78vh;
    }

    .mainText>.panelScroller {
        height: 73vh;
    }

    .mainText>.panelScroller>.projectListContainer>.projectList>li {
        min-width: 45%;
        min-height: 70%;
    }

    .mainText>.panelScroller>.projectListContainer>.projectList>li>img {
        min-width: 80%;
        max-height: 60%;
    }

    .mainText>.panelScroller>.projectListContainer>.projectList>li>p {
        font-size: 10pt;
    }

    .mainText>.panelScroller>.aboutMe {
        font-size: 13pt;
    }

    .screenSelection>button {
        width: 20vw;
    }

    .projectIntroductionContainer {
        width: 90%;
        font-size: 14pt;
    }

    .projectGithub {
        height: 7vh;
    }

    .projectImageAndTitleContainer {
        font-size: 14pt;
        gap: 2vw;
        width: 90%;
    }

    .contactsContainer>.clickableImages {
        max-height: 20vw;
    }

}

@media screen and (max-width:700px) {

    .titleCard {
        width: 40vw;
    }

    .titleCard>.titleCardTitle {
        font-size: 70%;
    }

    .titleCard>p {
        font-size: 8pt;
    }

    .projectListContainer {
        padding: 0;
    }

    .projectList {
        padding: 0;
    }

    .mainText {
        height: 77vh;
    }

    #projectPage {
        height: 79vh;
    }

    .mainText>.panelScroller {
        height: 75vh;
    }

    .mainText>.panelScroller>.projectListContainer>.projectList>li {
        min-width: 90%;
        height: 35vh;
    }

    .mainText>.panelScroller>.projectListContainer>.projectList>li>img {
        min-width: 80%;
        max-height: 60%;
    }

    .mainText>.panelScroller>.projectListContainer>.projectList>li>p {
        font-size: 12pt;
    }

    .projectTitle {
        margin-bottom: 1vh;
    }

    .projectSummaryContainer {
        flex-direction: column-reverse;
        align-items: center;
        padding: 2%;
    }

    .projectSummaryContainer>.projectSummary,
    .projectSummaryContainer>.projectAspects {
        width: 100%;
    }

    .projectSummary>p,
    .projectAspects>p {
        font-size: 85%;
        padding: 1% 5% 1% 5%;
        margin: 0;
    }

    .githubButton {
        font-size: 80%;
    }

    .projectTextContainer {
        font-size: 12pt;
    }

    .screenSelection>button {
        font-size: 10pt;
    }

    .mainText>.panelScroller>.aboutMe {
        font-size: 10pt;
    }

    .contactMail {
        font-size: 125%;
    }

}

/* begin phone UI */

@media screen and (max-width: 450px) {

    .titleCard {
        width: 50vw;
    }

    .titleCard>.titleCardTitle {
        font-size: 60%;
    }

    .titleCard>p {
        font-size: 7pt;
    }

    .screenSelection {
        gap: 5vw;
    }

    .screenSelection>button {
        width: 32vw;
    }

    .mainText {
        height: 78vh;
    }

    .mainText>.panelScroller {
        height: 75vh;
    }

    .mainText>.panelScroller>.projectListContainer>.projectList {
        width: 100%;
    }

    .mainText>.panelScroller>.projectListContainer>.projectList>li>p {
        font-size: 10pt;
    }

    .mainText>.panelScroller>.projectListContainer>.projectList>li>p::first-line {
        font-size: 125%;
    }

    .mainText>.panelScroller>.aboutMe {
        font-size: 10pt;
        gap: 0;
    }

    .introductionTextContainer {
        width: 100%;
    }

    .mainAboutMe {
        flex-direction: column-reverse;
        align-items: center;
        gap: 2vh;
        margin-bottom: 2vh;
        padding: 0;
    }

    .mainAboutMeImageContainer {
        max-width: 100%;
        max-height: 60%;
        padding: 0 25% 0 25%;
    }

    .mainAboutMeImageContainer>img {
        object-fit: cover;
        border-radius: 50%;
    }

    .mainAboutMeImageContainer>div>a {
        font-size: 130%;
    }

    .mainAboutMeTextContainer {
        padding: 0;
        width: 100%;
    }

    .mainAboutMeTextContainer>article {
        padding: 0;
    }

    .mainAboutMeTextContainer>.mainAboutMePersonalDescription {
        text-align: center;
        font-size: 100%;
        height: auto;
    }

    .mainAboutMeTextContainer>.skillsList {
        width: 100%;
        font-size: 100%;
        line-height: 95%;
        color: white;
    }

    .aboutMeClosing {
        width: 100%;
    }

    .githubButton>p {
        margin-right: 8vw;
    }

    .projectImageAndTitleContainer {
        flex-direction: column;
        width: 88%;
    }

    .projectImageAndTitleContainer>div {
        margin: auto;
        width: 100%;
    }

    #verticalList {
        width: 100%;
    }

    #fullWidth {
        flex-basis: 90%;
    }

    .projectTextContainer>article>.notableFeatures {
        font-size: 80%;
        margin-bottom: 0;
    }

    .projectTextContainer {
        font-size: 14pt;
    }

    .projectTextContainer>article>.featureHolder>.featureText {
        padding: 0 1% 0 1%;
        width: 90%;
        font-size: 70%;
    }

    .contactMail {
        font-size: 100%;
    }
}

@media screen and (max-width: 320px) {

    .titleCard {
        width: 70vw;
    }

    .screenSelection {
        gap: 5vw;
    }

    .screenSelection>button {
        font-size: 60%;
    }

    .projectTextContainer {
        font-size: 12pt;
    }

    .contactMail {
        font-size: 80%;
    }
}