:root {
    --primary-bg-color: rgb(75, 75, 75);
    --secondary-bg-color: rgb(15, 15, 15);
    --primary-bg-color-80t: rgba(207, 207, 207, 0.8);
    --secondary-bg-color-80t: rgba(82, 82, 82, .80);
    --secondary-bg-color-0t: rgba(35, 35, 35, 0.0);
    --primary-button-color: rgb(50, 0, 0);
    --primary-button-color-hover: rgb(73, 0, 0);
    --secondary-button-color: rgb(50, 50, 50);
    --secondary-button-color-hover: rgb(90, 90, 90);
    --project-entries-bg-color: rgba(116, 0, 0, .50);
    --project-entries-bg-color-hover: rgba(116, 0, 0, 0.80);
}

body {
    background-color: rgb(116, 0, 0);
}

#homeHeader {
    height: 35rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-image: url("/Assets/Images/Portraits/HeaderImage2.png");
    background-size: cover;
    background-position-y: 42%;
    background-repeat: no-repeat;
}

.blendPortraitToProjects {
    height: 150px;
    width: 100%;
    background-image: linear-gradient(to bottom, var(--secondary-bg-color-0t) 0%, var(--primary-bg-color) 75%, var(--primary-bg-color) 100%);
}

.underliningSeparatorBar {
    border-style: solid none none none;
    border-color: white;
    border-radius: 5px;
    width: 100%;
    height: 0;
}

.homeHeaderH1 {
    text-align: center;
    color: white;
    font-size: 6rem;
}

.homeHeaderH3 {
    text-align: center;
    color: white;
    font-size: 1.5rem;
}

.verticalSpacer {
    display: table-column;
    width: 50%;
    position: relative;
    bottom: -15%;
}

#projectSection {
    background-color: var(--primary-bg-color);
    width: 100%;
    height: auto;
    align-content: center;
    justify-content: center;
    color: white;
    padding: 30px 0 30px 0;
}

.pTypeBox {
    display: flex;
    flex-direction: row;
    width: 100%;
}

#cTypeBox {
    flex-direction: row;
    width: 100%;
}

.projectSortBar {
    display: flex;
    flex-direction: row;
    background-color: darkgrey;
    height: fit-content;
    width: 95%;
    margin: auto;
    justify-content: space-evenly;
    padding: 5px;
    border-radius: 5px;
}

#projectSortBy, #classSortBy {
    background-color: white;
    height: 25px;
    width: 150px;
    margin: 0 0 0 5px;
}

#classSortBy, #labelClassSortBy {
    visibility: hidden;
}

.H2 {
    text-align: center;
    font-size: 1.5rem;
}

#projectsContainer {
    display: grid;
    padding: 1rem;
    grid-template-columns: repeat(auto-fit, 350px);
    justify-content: space-around;
    grid-auto-flow: dense;
    grid-gap: 1rem;
    height: auto;
}

.projectEntry {
    display: flex;
    flex-direction: column;
    width: 350px;
    height: auto;
    background-color: var(--project-entries-bg-color);
    background-size: cover;
    justify-content: center;
    align-content: center;
    margin: 15px;
    padding: 5px;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

.projectEntrySpacer {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.projectEntry:hover {
    background-color: var(--project-entries-bg-color-hover);
    transition: background-color 0.2s ease;
}

.projectEntry img {
    width: 250px;
    height: 250px;
    border-radius: 5px;
}

.projectEntry h4 {
    text-align: center;
    font-size: 28px;
    text-wrap: wrap;
}

.projectEntryFooter {
    text-align: center;
    border-style: solid none none none;
    border-width: 1px;
    padding-top: 5px;
    width: 95%;
}

#noResultsText {
    display: none;
    position: relative;
    bottom: 250px;
    text-align: center;
}

#aboutSection {
    display: flex;
    width: 100%;
    color: white;
    flex-direction: column;
    background-color: var(--secondary-bg-color);
    align-content: center;
    justify-content: center;
    padding: 30px 0 30px 0;
}

#aboutMeParagraphs {
    display: grid;
    text-align: center;
    align-content: inherit;
    justify-content: inherit;
}

#aboutMeParagraph, .aboutMeParagraph, #finalAboutMeParagraph {
    text-wrap: auto;
    max-width: 850px;
    width: auto;
    font-size: large;
    padding: 15px;
    border-bottom: solid lightgray;
}

#finalAboutMeParagraph {
    border-bottom: none;
}

#educationSection {
    display: flex;
    color: white;
    background-color: var(--primary-bg-color);
    flex-direction: column;
    justify-items: center;
    align-items: center;
    padding: 30px 0 30px 0;
}

.classes {
    display: grid;
    grid-template-columns: auto auto;
    margin: 15px;
    width: 100%;
}

.computerScienceCourse {
    border: solid lightgray;
    padding: 15px;
    height: auto;
    border-radius: 15px;
    background-color: var(--secondary-bg-color);
    margin: 15px;
}

.computerScienceCourse p {
    text-wrap: wrap;
    text-indent: 30px;
}

#contactMeSection {
    display: flex;
    color: white;
    background-color: var(--secondary-bg-color);
    flex-direction: column;
    justify-items: center;
    align-items: center;
    padding: 30px 0 30px 0;
}

.contactMe {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 50%;
}

.contactMeElement {
    display: grid;
    padding: 15px;
    margin: 15px;
    width: fit-content;
    align-items: center;
    border: solid lightgray;
    color: white;
    border-radius: 15px;
    grid-template-columns: auto auto auto;
}

.contactMeElement svg {
    display: flex;
    margin: 5px;
    align-items: center;
}

.mainFooter a {
    display: flex;
    padding: 5px;
    color: white;
    font-style: normal;
    align-items: center;
}

.mainFooter p {
    padding: 5px;
}

.ProjectFullScreenWidget {
    height: 95%;
    width: 95%;
    display: none;
    position: fixed;
    top: 2.5%;
    left: 3%;
    z-index: 2;
    background-color: var(--secondary-bg-color);
    color: white;
    border-radius: 15px;
    overflow-y: scroll;
    border: 1px solid var(--primary-bg-color-80t);
}

.projectNameBox {
    display: flex;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 25px;
}

.centerContent {
    display: flex;
    align-content: center;
    justify-content: center;
}

.projectContent {
    display: grid;
    grid-template-columns: repeat(auto-fit, 500px);
    justify-content: space-between;
    padding: 15px;
}

.projectExitButton {
    display: flex;
    height: 55px;
    position: relative;
    bottom: 5%;
}

.exitProject {
    width: 85%;
    transition: background-color 0.2s ease;
    background-color: var(--secondary-button-color);
    color: white;
    border-radius: 5px;
    border: none;
    margin: 5px;
    font-size: 14px;
}

.exitProject:hover {
    width: 85%;
    background-color: var(--secondary-button-color-hover);
    border-radius: 5px;
    border: none;
    margin: 5px;
    font-size: 14px;
}

.exitProject:active {
    width: 85%;
    background-color: black;
    border-radius: 5px;
    border: none;
    margin: 5px;
    font-size: 14px;
}

.projectImageDiv {
    align-content: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    grid-template-rows: auto auto;
    min-height: 500px;
    max-width: 500px;
}

.projectImageDiv img {
    align-content: center;
    justify-content: center;
    max-height: 500px;
    max-width: 500px;
    border: solid lightgray;
}

.imgButtons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.photoBarButtonRight {
    width: 35px;
    height: 100px;
    background-color: rgba(137, 0, 0, 0.10);
    color: white;
    border: lightgray solid 1px;
    transition: background-color 0.2s ease, border 0.2s ease;
    border-radius: 5px 0 0 5px;
    font-size: 24px;
}

.photoBarButtonLeft {
    width: 35px;
    height: 100px;
    background-color: rgba(137, 0, 0, 0.10);
    color: white;
    border: lightgray solid 1px;
    transition: background-color 0.2s ease, border 0.2s ease;
    border-radius: 0 5px 5px 0;
    font-size: 24px;
}

.photoBarButtonRight:hover {
    border: lightgray solid 2px;
    background-color: rgba(137, 0, 0, 0.35);
    border-radius: 5px 0 0 5px;
}

.photoBarButtonLeft:hover {
    border: lightgray solid 2px;
    background-color: rgba(137, 0, 0, 0.35);
    border-radius: 0 5px 5px 0;
}

.photoBarButtonRight:active {
    border: lightgray solid 2px;
    background-color: rgba(137, 0, 0, 0.5);
    border-radius: 5px 0 0 5px;
}

.photoBarButtonLeft:active {
    border: lightgray solid 2px;
    background-color: rgba(137, 0, 0, 0.5);
    border-radius: 0 5px 5px 0;
}

.projectImageDiv .imgButtons {
    position: absolute;
    justify-content: space-between;
    width: 500px;
}

.projectDesc {
    display: flex;
    flex-direction: column;
    text-wrap: wrap;
    max-width: 650px;
    height: auto;
}

.projectData {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 15px 15px 0 15px;
}

.projectLink {
    color: white;
    text-align: center;
    margin: 16px;
}

.projectInTextLink {
    color: white;
    text-align: center;
}

p, a, button, input, textarea, label, select, h1, h2, h3, h4, h5, h6, footer, header, ul {
    font-family: "Inter", "sans-serif";
}

.descText {
    font-size: 14px;
}

@media only screen and (min-width: 393px) and (orientation: portrait) {
    #homeHeader {
        height: 75vh;
        background-image: url("/Assets/Images/Portraits/HeaderImage2.png");
        background-size: 250%;
        background-position-x: 50%;
        background-repeat: no-repeat;
    }

    .verticalSpacer {
        width: 75vw;
    }

    .homeHeaderH1 {
        text-align: center;
        color: white;
        font-size: 12vw;
        height: auto;
    }

    .underliningSeparatorBar {
        border-style: solid none none none;
        border-color: white;
        border-width: 1vh;
        border-radius: 5px;
        width: 100%;
        height: 0;
    }

    .homeHeaderH3 {
        text-align: center;
        color: white;
        font-size: 8vw;
        height: auto;
    }

    .blendPortraitToProjects {
        width: 100%;
        background-image: linear-gradient(to bottom, var(--secondary-bg-color-0t) 0%, var(--primary-bg-color) 75%, var(--primary-bg-color) 100%);
    }

    #projectsContainer {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        height: auto;
    }

    .projectEntry {
        display: flex;
        flex-direction: column;
        width: auto;
        height: auto;
        background-color: var(--project-entries-bg-color);
        background-size: cover;
        justify-content: center;
        align-content: center;
        margin: 15px;
        border-radius: 25px;
        transition: background-color 0.2s ease;
    }

    .projectEntry img {
        width: 500px;
        height: 500px;
        border-radius: 5px;
    }

    .projectEntry h4 {
        text-align: center;
        font-size: 8vw;
        text-wrap: wrap;
    }

    .projectEntryFooter {
        font-size: 10vw;
        border-width: 1px;
        padding-top: 5px;
    }

    .H2{
        font-size: 8vw;
    }

    .projectSortBar {
        height: auto;
        flex-direction: column;
        justify-content: center;
        padding: 5px;
    }

    .pTypeBox {
        display: flex;
        height: auto;
        border-style: solid;
        justify-content: space-between;
    }

    #cTypeBox {
        height: auto;
        border-style: solid;
        justify-content: space-between;
    }

    .projectSortBar label {
        font-size: 6vw;
    }

    #projectSortBy, #classSortBy {
        background-color: white;
        height: 6vh;
        width: auto;
        font-size: 4vw;
        margin: 0 0 0 5px;
    }

    #classSortBy, #labelClassSortBy {
        visibility: hidden;
    }

    .aboutMeParagraph {
        font-size: 5vw;
        text-wrap: wrap;
    }

    #finalAboutMeParagraph {
        font-size: 5vw;
        text-wrap: wrap;
    }

    .classes {
        display: flex;
        flex-direction: column;
        margin: 15px;
        width: 100%;
    }

    .computerScienceCourse p {
        text-wrap: wrap;
        text-indent: 30px;
        font-size: 4vw;
    }

    .computerScienceCourse h3 {
        text-wrap: wrap;
        font-size: 5vw;
    }

    .computerScienceCourse {
        padding: 1vw;
    }

    .contactMe {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50%;
    }

    .contactMeElement {
        display: grid;
        padding: 15px;
        margin: 15px;
        width: 75vw;
        height: 15vh;
        align-items: center;
        border: solid lightgray;
        color: white;
        border-radius: 15px;
        grid-template-columns: auto auto auto;
    }

    .contactMeElement svg {
        display: flex;
        margin: 5px;
        height: 250px;
        width: 250px;
        align-items: center;
    }

    .contactMeElement p {
        font-size: 5vw;
    }

    .contactSubtext {
        font-size: 3vw;
    }

    .mainFooter a {
        display: flex;
        padding: 5px;
        color: white;
        font-size: 4vw;
        justify-content: center;
        width: fit-content;
        margin: auto;
    }

    .mainFooter svg {
        width: 75px;
        height: 75px;
    }

    .mainFooter p {
        justify-self: center;
        padding: 5px;
        font-size: 5vw;
    }

    .ProjectFullScreenWidget {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        border-radius: 0;
    }

    .projectNameBox {
        font-size: 4vw;
        height: auto;
    }

    .projectContent {
        display: flex;
        height: auto;
        flex-direction: column;
        padding: 15px;
    }

    .projectDesc {
        max-width: 100%;
    }

    .projectDesc h4 {
        font-size: 4vw;
    }

    .descText {
        font-size: 4vw;
    }

    .projectExitButton {
        display: flex;
        height: 15vw;
        margin: 15px 0 0 0;
        width: 99vw;
        position: relative;
        bottom: 5%;
    }

    .exitProject {
        font-size: 4vw;
    }

    .projectData {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: auto;
        padding: 15px 15px 0 15px;
        font-size: 5vw;
    }

    .projectLink {
        color: white;
        text-align: center;
        margin: 16px;
        font-size: 5vw;
    }

    .projectImageDiv {
        align-content: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        max-width: 700px;
        max-height: 700px;
        margin: 0 15% 0 15%;
    }

    .projectImageDiv img {
        align-content: center;
        justify-content: center;
        min-width: 700px;
        min-height: 700px;
        border: solid lightgray;
    }

    .projectImageDiv .imgButtons {
        justify-content: space-between;
        width: 700px;
    }

    .photoBarButtonRight {
        width: 75px;
        height: 250px;
    }

    .photoBarButtonLeft {
        width: 75px;
        height: 250px;
    }
}