/*#### FONTS ####*/
@font-face {
    font-family: M-Gothic;
    src: url(fonts/Oshidashi-M-Gothic.otf);
}

@font-face {
    font-family: Florence;
    src: url(fonts/Florence-Regular.otf);
}

@font-face {
    font-family: Champagne;
    src: url(fonts/Champagne-&-Limousines.ttf);
}




/*#### GLOBAL STYLING ####*/
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Implemenets smooth scrolling */
}

/* Colour Variables */
:root{
    --BGColour: #f7f3ed;
    --HeaderBGColour: white;
    --NavBGColour: #f9edea;
    --PortfolioBGColour: blue;
    --AboutBGColour:orange;
    --ContactBGColour:green;

    --NavHoverBGColour: #d0c1be; 
    --NavActiveBGColour: #ba9ea6;

    --DividerColour: #f9edea;
}

body {
    background-color: var(--BGColour);
}




/*#### WEBSITE STYLING ####*/

/* ## GENERAL STYLING ## */
body{
    margin: 0;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

main{
    margin: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ImageContainer{
    display: flex;
    justify-content: center;
}

.ImageContainer img{
    height: 100%;
}

.Webpage{
    width: 100vw;

    transition: 2s;
}

.PageDivider{
    width: 100%;
    height: 6px;

    margin: 0;

    background-color: var(--DividerColour);
}

.BigText{
    font-family: Champagne;
}

.LittleText{
    font-family: Florence;
}

.JapText{
    font-family: M-Gothic;
}




/*#### HEADER ####*/
header{
    height: 30vh;
    width: 100vw;

    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: var(--HeaderBGColour);
}

#HeaderLogo{
    height: 100%;
}




/*#### NAVIGATION ####*/
nav{
    height: 6vh;
    width: 100vw;

    display: flex;
    justify-content: center;
    align-items: center;

    position: sticky;
    top: 0;

    border-style: solid;
    border-color: var(--DividerColour);
    border-width: 5px;

    background-color: var(--NavBGColour);

    z-index: 999;
}

.NavDivider{
    height: 100%;
    width: 5px;

    background-color: var(--DividerColour);
}

.NavButton{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: 100%;

    padding-left: 2%;
    padding-right: 2%;

    transition: 0.5s;
}

.inactive:hover{
    background-color: var(--NavHoverBGColour);
}

.active{
    background-color: var(--NavActiveBGColour);
}

.NavButton h2{
    font-size: 2.5vh;
}




/*#### PORTFOLIO PAGE ####*/
#PortfolioPage{
    width: 97vw;

    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.PortfolioSection{
    height: 97vh;
    width: 100%;
    
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* Portfolio Section 1 */
#PortfolioSection1{
    justify-content: center;
    flex-direction: column;
}

#PortfolioSection1ImageContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: 70%;
}



/* Portfolio Section 2 */
#PortfolioSection2{
    justify-content: center;
    align-items: center;

    width: 75%;
}

.PortfolioSection2Item{
    height: 100%;
    width: 30%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#PortfolioSection2ImageContainer1, #PortfolioSection2ImageContainer2, #PortfolioSection2ImageContainer3{
    height: 50%;
}

.PortfolioSection2Text{
    font-size: 4vh;
}





/* Portfolio Section 3 */
#PortfolioSection3{
    display: flex;
    align-items: center;

    width: 80%;
}

.PortfolioSection3Area{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: 90%;
    width: 45%;

    position: relative;
}

/* Move images up slightly */
#PortfolioSection3LeftImage, #PortfolioSection3RightImage{
    height: 76%;
}

#PortfolioSection3LeftText img, #PortfolioSection3RightText img{
    height: 65%;
}

#PortfolioSection3LeftText h1, #PortfolioSection3RightText h1{
    font-size: 6vh;
}



/* Portfolio Section 5 */
#PortfolioSection5{
    width: 80%;
}

.PortfolioSection5Area{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    height: 70%;
    width: 45%;

    position: relative;
}

.PortfolioSection5LeftLayer{
    height: 40%;
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

#PortfolioSection5LeftBottom{
    justify-content: center;
    align-items: center;

    transform: translateY(-10vh);
}

#PortfolioSection5Left h1{
    position: absolute;
    bottom: 0;
    margin: 0;

    font-size: 7vh;
}

.PortfolioSection5LeftImageContainerShort{
    height: 100%;
}

.PortfolioSection5LeftImageContainerLong{
    height: 100%;
}

.PortfolioSection5LeftImageContainerLong img{
    height: 100%;
    width: 100%;
}

#PortfolioSection5Right h1{
    position: absolute;
    bottom: 0;

    font-size: 5vh;
}



/* Portfolio Section 6 */
#PortfolioSection6{
    width: 85%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.PortfolioSection6ImageContainer{
    width: 45%;
    height: 75%;

    position: relative;
}

.PortfolioSection6ImageContainer h1{
    position: absolute;
    bottom: -6%;
    right: 18%;
    margin: 0;

    font-size: 5vh;
}



/* Portfolio Section 7 */
#PortfolioSection7{
    justify-content: center;
    flex-direction: column;
}

#PortfolioSection7ImageContainer{
    height: 70%;
}






/*#### ABOUT PAGE ####*/
#AboutPage{
    height: 60vh;
    width: 80%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

#AboutSectionImageContainer{
    height: 75%;
    width: 50%;
}

#AboutSectionInfo{
    height: 75%;
    width: 50%;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;

    margin: 0;
}

#AboutSectionInfo p, h2{
    font-size: 3vh;

    margin: 0;
}






/*#### CONTACT PAGE ####*/
#ContactPage{
    height: 60vh;
    width: 80vw;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#ContactSectionImageContainer{
    height: 50%;

    margin-top: 2%;
}

form{
    height: 42%;
    width: 50%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

form h2{
    font-size: 3.5vh;
    margin-bottom: 3%;
}

#FooterNameEmailContainer{
    height: 15%;
    width: 80%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 3%;
}

#ContactInputName, #ContactInputEmail{
    height: 100%;
    width: 50%;

    flex: 1 1 auto;

    margin: 2%;
}

#ContactInputMessage{
    width: 80%;
    height: 40%;

    resize: none;
}

#ContactSubmit{
    height: 15%;
    width: 20%;
}




/*#### ANIMATIONS ####*/
.hidden{
    display: none !important;
}