.Intro {
    padding-top: 30vh;
    text-align: center;
    height: 65vh;
}

.AboutWrapper {
    padding: 10vh 0vw 10vh 10vw;
    height: 75vh;
}

.AboutPageLeft {
    float: left;
    width: calc(37.5vw - 2vh);
    height: 73vh;
    background-color: #454545;
    box-shadow: inset 1vw 1vw 1vw #232323, inset -1vw -1vw 1vw #232323;
    border-radius: 1vw;
    padding:1vh;
    transition: background-image 0.5s;
    background-image: url("Images/About/Pic2.jpg");
    background-size: cover;                      
    background-repeat: no-repeat;
    background-position: center center; 
}

.AboutPageRight {
    float: left;
    width: calc(37.5vw - 4vw);;
    height: calc(75vh - 4vw);
    background-color: #454545;
    box-shadow: inset 1vw 1vw 1vw #232323, inset -1vw -1vw 1vw #232323;
    border-radius: 1vw;
    text-align: center;
    padding:2vw;
    overflow-wrap: break-word;
    overflow: auto;
    scrollbar-width: none;
}

.ProjectsPageLeft {
    float: left;
    width: calc(37.5vw - 4vw);
    height: calc(75vh - 4vw);
    background-color: #454545;
    box-shadow: inset 1vw 1vw 1vw #232323, inset -1vw -1vw 1vw #232323;
    border-radius: 1vw;
    padding:2vw;
    transition: background-image 0.5s;
    background-image: url("Images/About/Transparent.png");
    background-size: cover;                      
    background-repeat: no-repeat;
    background-position: center center; 
}

.ProjectPageRight {
    float: left;
    width: calc(37.5vw - 8vh);
    height: 67vh;
    background-color: #454545;
    box-shadow: inset 1vw 1vw 1vw #232323, inset -1vw -1vw 1vw #232323;
    border-radius: 1vw;
    text-align: center;
    padding:4vh;
    overflow-wrap: break-word;
    overflow: auto;
    scrollbar-width: none;
    cursor: row-resize;
}

.ProjectLink {
    height: calc(10vh - 2vh);
    width: calc(37.5vw - 8vh - 4vh);
    background-color: #343434;
    border-radius: 1vw;
    padding: 1vh 2vh 1vh 2vh;
    box-shadow: 4px 4px 2px #232323;
    transition: background-color 0.5s;
}

.ProjectLink:hover {
    background-color: #656565;
    cursor: pointer;
}

.ProjectLink > .ProjectPic {
    height: 8vh;
    width: 8vh;
    float: left;
    border-radius: 0.5vw;
    background-image: url("Images/GamesLinks/DelvingDeep.png");
    background-size: cover;                      
    background-repeat: no-repeat;
    background-position: center center; 
    image-rendering: pixelated;
    margin-right: 1.5vw;
    box-shadow: 4px 4px #232323;
}

.ProjectLink > .ProjectDiv {
    height: calc(8vh - 1vh);
    float: left;
    width: calc(37.5vw - 8vh - 4vh - 8vh - 1.5vw);
    border-radius: 0.5vw;
    padding-top: 1vh;
    margin: 0;
    text-align: left;
    font-size: 2.0vw;
    font-family: "Open Sans", sans-serif;
    color: #F7FFF7;
    text-shadow: 2px 2px 1px #232323;
}

.ProjectDivider {
    height: 1vh;
    width: 33.5vw;
}

.ProjectDivider2  {
    float: left;
    vertical-align:top;
    width: 2.5vw;
    height: 80vh;
}

.ProjectSortTab  {
    float: left;
    vertical-align:top;
    width: 10vh;
    height: 80vh;
}

.ProjectSortTabDivider {
    width: 9.375vh;
    height: 7.5vh;
}

.ProjectSortTabButton {
    width: 9.375vh;
    height: 9.375vh;
    background-color: #454545;
    border-radius: 0.5vw;
}

.AboutPageRight > p {
    font-size: 2.7vh;
}

.AboutDivider {
    float: left;
    vertical-align:top;
    width: 5vw;
    height: 80vh;
}

.LinksButtonsTab {
    height: calc(42.5vh * 0.25);
    padding-top: 1vh;
}

.LinksImage {
    float: left;

}

.Links {
    padding-top: calc(5vh * 0.25);
    text-align: center;
    height: calc(85vh * 0.25);
}

.Links > h1 {
    margin-bottom: 0;
}

.LinksButtonsDivider {
    float: Left;
    width: calc(100vw * 0.92 / 3);
    height: calc(42.5vh * 0.25);
}

.LinksButtonsButton {
    float: Left;
    width: calc(100vw * 0.08 / 2);
    height: calc(100vw * 0.08 / 2);
    background-size: cover;                      
    background-repeat: no-repeat;
    background-position: center center;
    transition: background-image 0.5s;
}

.ItchButton {
    background-image: url("Images/WebsiteLinks/ItchIo.svg");
}
.ItchButton:hover {
    background-image: url("Images/WebsiteLinks/ItchIoLight.svg");
    cursor: pointer;
}

.LinkedInButton {
    background-image: url("Images/WebsiteLinks/LinkedIn.svg");
}
.LinkedInButton:hover {
    background-image: url("Images/WebsiteLinks/LinkedInLight.svg");
    cursor: pointer;
}

.Contact {
    padding-top: calc(5vh * 0.75);
    text-align: center;
    height: calc(85vh * 0.75);
}

.Divider {
    height: 5vh;
    background-color: #454545;
    box-shadow: 0 1vh 1vh #232323;
}

body {
    background-color: #343434;
    margin: 0;
    font-family: "Open Sans", sans-serif;
}

h1 {
    font-family: "Open Sans", sans-serif;
    font-size: 5vh;
    color: #F7FFF7;
    text-shadow: 3px 3px 2px #232323;
}

p {
    font-family: "Open Sans", sans-serif;
    font-size: 2.5vh;
    color: #F7FFF7;
    text-shadow: 3px 3px 2px #232323;
}

.FormDiv {
    align-items: center;
    display: flex;
    justify-content: space-evenly;
}

.ContactForm {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1vh;
}

.ContactInputs {
    width: 23vw;
    height: calc(5vh - 2vw);
    border-radius: 1vw;
    padding: 1vw; 
    transition: border 0.5s;
    font-family: "Open Sans", sans-serif;
}

.ContactTextArea {
    width: 23vw;
    height: calc(8vh - 2vw);
    border-radius: 1vw;
    padding: 1vw; 
    transition: border 0.5s;
    font-family: "Open Sans", sans-serif;
}

.ContactInputs:focus {
    border: 0.3vw solid #ff994f;
}

.ContactTextArea:focus {
    border: 0.3vw solid #ff994f;
}

.SubmitButton {
    display: flex;
    align-items: center;
    border-radius: 1vw;;
    width: 8vw;
    height: calc(5vh - 2vw);
    padding: 1vw; 
    background: linear-gradient(270deg, #ff994f,#fa6d86);
    font-family: "Open Sans", sans-serif;
    font-size: 0.9vw;
    font-weight: bold;
}