@import url("https://use.typekit.net/jbm2upn.css");
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
@import url("https://use.typekit.net/jbm2upn.css");


:root {
    --background-color  : #F2F7F5;
    --background-color-2: #f6d499;
    --headline-color    : #00473e;
    --paragraph-color   : #475d5b;
    --button-color      : #faae2b;
    --button-text-color : #00473e;
    --theme-blue-color  : #DCEFED;

    --stroke-color   : #00332c;
    --secondary-color: #ffa8ba;
    --tertiary-color : #fa5246;

    --section-color : var(--stroke-color);
    --contrast-color: #f7faf9;

    --s1: 8px;
    --s2: 16px;
    --s3: 24px;
    --s4: 32px;
    --s5: 40px;
    --s6: 64px;
    --s7: 80px;
    --s8: 128px;
    --s9: 200px;

    --content-width: 700px;

    --roomy-height  : 200%;
    --cozy-height   : 150%;
    --default-height: 110%;
}

body#portfolio {
    background-color: var(--background-color);
    color           : var(--paragraph-color);
    overflow-x      : hidden;
}

::selection {
    background-color: var(--button-color);
    color           : var(--button-text-color);
}

#portfolio .bg-light {
    background-color: var(--contrast-color);
}

#portfolio .bg-blue {
    background-color: var(--theme-blue-color);
}

#portfolio .bg-dark {
    background-color: var(--button-text-color);
}


#portfolio .logo-s {
    width: var(--s5);
}

#portfolio .logo-m {
    max-width: var(--s9);
}

#portfolio .center {
  display: flex;
  justify-content: center;
}

.content {
    position : relative;
    left     : 50%;
    transform: translateX(-50%);
    max-width: var(--content-width);
}

div.inverse {
    background-color: var(--section-color);
}

.f-img {
    width: 100%;
    /* USED FOR ABOUT ME IMAGE */
}

#portfolio blockquote {
    font-size     : 1.9rem;
    font-weight   : 500;
    text-align    : center;
    display       : block;
    margin-left   : auto !important;
    margin-right  : auto !important;
    margin-top    : 3rem;
    margin-bottom : 2rem;
    line-height   : 2.5rem;
    letter-spacing: -0.05rem;
}

#portfolio .flex-middle {
    display        : flex;
    align-items    : center;
    justify-content: center;
}

#portfolio .cover-slide {
    height  : calc(70vh);
    overflow: visible;
}

#portfolio .cover-img {
    max-height: 440px;
    overflow: visible;
}

#about-align {
    width: 420px;
}

#about-portrait-align {
    width: 400px;
    max-height: 360px;
}

.parent {
    position       : relative;
    display        : flex;
    flex-direction : row;
    justify-content: center;
    align-items    : center;
}

/* 
 * PAGE FADE IN TRANSITIONS START
 */

body {
    animation                : fadeInAnimation ease .5s;
    animation-iteration-count: 1;
    animation-fill-mode      : forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 
 * SPACING START
 */
#portfolio .line-spacing {
    width : var(--s2);
    height: var(--s2);
}

#portfolio .paragraph-spacing {
    width : var(--s3);
    height: var(--s3);
}

#portfolio .page-spacing {
    width : var(--s4);
    height: var(--s4);
}

#portfolio .chapter-spacing {
    width : var(--s6);
    height: var(--s6);
}

#portfolio .book-spacing {
    width : var(--s8);
    height: var(--s8);
}



/* SPACING END */

/* 
 * TYPOGRAPHY START
 */
body#portfolio {
    font-size: 13.5pt;
}

#portfolio div.hero {
    font-family   : 'futura-pt', Helvetica, sans-serif;
    font-size     : 84pt;
    font-weight   : 600;
    letter-spacing: -0.4rem;
    line-height   : var(--default-height);
    color         : var(--stroke-color);

}

#portfolio div.tagline {
    font-family   : 'Poppins', Helvetica, sans-serif;
    font-size     : 26pt;
    font-weight   : 500;
    letter-spacing: -0.1rem;
    line-height   : var(--cozy-height);
    color         : var(--headline-color);

}

#portfolio h1 {
    font-family   : 'futura-pt', Helvetica, sans-serif;
    font-size     : 44pt;
    font-weight   : 600;
    letter-spacing: -0.15rem;
    color         : var(--headline-color);
    line-height   : var(--default-height);
    padding       : 0px;
    margin        : 0px;
}

#portfolio h2 {
    font-family   : 'futura-pt', Helvetica, sans-serif;
    font-size     : 32pt;
    font-weight   : 600;
    letter-spacing: -0.1rem;
    color         : var(--headline-color);
    line-height   : var(--default-height);
    padding       : 0px;
    margin        : 0px;
}

#portfolio h3 {
    font-family   : 'futura-pt', Helvetica, sans-serif;
    font-size     : 18pt;
    font-weight   : 500;
    letter-spacing: 0rem;
    color         : var(--paragraph-color);
    opacity       : 0.9;
    line-height   : var(--cozy-height);
    padding       : 0px;
    margin        : 0px;
    text-transform: uppercase;
}

#portfolio h4 {
    font-family   : 'poppins', Helvetica, sans-serif;
    font-size     : 14pt;
    font-weight   : 600;
    letter-spacing: 0.01rem;
    color         : var(--headline-color);
    opacity       : 0.9;
    line-height   : var(--default-height);
    padding       : 0px;
    margin        : 0px;
    text-transform: uppercase;
}

#portfolio p,
#portfolio table {
    font-weight: 300;
}

#portfolio th {
    font-weight: 500;
}

#portfolio p,
#portfolio ol,
#portfolio table {
    font-family   : 'Poppins', Helvetica, sans-serif;
    letter-spacing: -0.03rem;
    line-height   : var(--roomy-height);
    color         : var(--paragraph-color);
}

#portfolio p {
    padding: 0px;
    margin : 0px;
}

#portfolio ol,
#portfolio ul {
    padding-left: 64px;
}

#portfolio section blockquote {
    font-family   : 'futura-pt', Helvetica, sans-serif;
    font-size     : 32pt;
    font-weight   : 400;
    letter-spacing: -0.02rem;
    line-height   : var(--cozy-height);
    padding       : 0px;
    margin        : 0px;
    text-align    : left;
}

#portfolio .caption {
    font-size  : 1rem;
    text-align : center;
    padding-top: 0.5rem;
    font-family: 'Poppins', sans-serif;
}

/* TYPOGRAPHY END */

/* 
 * BUTTONS START 
 */
.button-group {
    display       : inline-flex;
    flex-direction: row;
    flex-wrap     : wrap;
    gap           : var(--s2);
}

#portfolio .primary-button,
#portfolio .secondary-button,
#portfolio .tertiary-button {
    font-family    : 'Poppins', sans-serif;
    font-weight    : 500;
    letter-spacing : -0.01rem;
    padding        : var(--s3) var(--s4);
    border-radius  : 10px;
    text-decoration: none;
    height         : 100%;
}

#portfolio .primary-button {
    background-color: var(--button-color);
    color           : var(--button-text-color) !important;
}

#portfolio .primary-button:hover {
    color          : var(--button-text-color);
    text-decoration: none;
}

#portfolio .secondary-button {
    background-color: var(--background-color);
    color           : var(--button-text-color) !important;
}

#portfolio .secondary-button:hover {
    color          : var(--button-text-color);
    text-decoration: none;
}

/* BUTTONS END */

/* 
 * LINKS START
 */
#portfolio a {
    font-family          : 'Poppins', sans-serif;
    font-size            : 1.2rem;
    font-weight          : 500;
    letter-spacing       : -0.02rem;
    color                : var(--button-text-color);
    text-decoration      : none;
    display              : inline-block;
    position             : relative;
    padding-bottom       : 4px;
    text-underline-offset: 8px;
}

#portfolio a::after {
    content         : '';
    position        : absolute;
    width           : 100%;
    transform       : scaleX(0);
    height          : 5px;
    bottom          : 0;
    left            : 0;
    background-color: var(--button-text-color);
    transform-origin: bottom right;
    transition      : transform 0.25s ease-out;
}

#portfolio a:not(.imgLink, .primary-button, .secondary-button):hover::after {
    transform       : scaleX(1);
    transform-origin: bottom left;
}

/* LINKS END */

/* 
 * SLIDE1 START 
 */
#slide1 {
    position        : relative;
    height          : calc(100vh - 80px);
    background-color: #DCF3F0;
    background-image: linear-gradient(#dcf3f0, #a6e7df);
}

#sakura {
    position         : absolute;
    background-image : url('../images/sakura.png');
    background-repeat: no-repeat;
    background-size  : calc(40vw);
    width            : calc(40vw);
    height           : 400px;
}

#hero {
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-top     : calc(50vh - 350px);
}

#heroText {
    text-align: center;
}

#divider {
    position     : absolute;
    bottom       : 0px;
    background   : url('../images/seigaiha.png') repeat-x;
    height       : 160px;
    min-width    : 100%;
    border-bottom: 10px solid var(--stroke-color);
}

#button-group {
    position : absolute;
    left     : calc(50vw - 65px);
    bottom   : 220px;
    height   : 32px;
    min-width: 100%;
}

/* SLIDE1 END */

/* 
 * SLIDE2 START 
 */
#slide2 {
    position: absolute;
    top     : calc(100vh - 80px);
}

.cover {
    object-fit: cover;
    width     : 100%;
}

.coverLarge {
    max-width   : 1400px;
    height      : 700px;
    display     : block;
    margin-left : auto;
    margin-right: auto;
}

.coverMedium {
    max-width   : 1000px;
    display     : block;
    margin-left : auto;
    margin-right: auto;
}

.img-hover-zoom {
    height      : 660px;
    overflow    : hidden;
    display     : block;
    margin-left : auto;
    margin-right: auto;
}

.img-hover-zoom--basic img {
    transition: transform .5s ease;
}

.img-hover-zoom--basic:hover img {
    transform: scale(1.02);
}

#portfolio .img-hover-zoom {
    object-position: 100% 0%;
    border         : 8px solid var(--stroke-color);
}

/* SLIDE2 END */

/* 
 * SECTIONS START 
 */
section {
    width           : 100vw;
    text-align      : left;
    padding         : var(--s8) var(--s8);
    background-color: var(--background-color);
}

section.variation {
    background-color: var(--background-color-2);
}

section.inverse {
    background-color: var(--button-text-color);
}

#portfolio section.inverse h1,
#portfolio section.inverse h2,
#portfolio section.inverse h3,
#portfolio div.inverse h1,
#portfolio div.inverse h2,
#portfolio div.inverse h3 {
    color: var(--contrast-color);
}

#portfolio section.inverse p,
#portfolio section.inverse ol,
#portfolio section.inverse a,
#portfolio section.inverse .caption,
#portfolio div.inverse p,
#portfolio div.inverse ol,
#portfolio div.inverse a {
    color: #ddedeb;
}

#portfolio section blockquote {
    color: var(--paragraph-color);
}

#portfolio section.inverse blockquote {
    color: var(--contrast-color);
}

#portfolio .card {
    background-color: #FFFFFE;
    padding         : var(--s7) var(--s6);
}

#portfolio .card p {
    font-size  : 13.5pt;
    line-height: var(--roomy-height);
}

#portfolio div.section-border {
    border-top   : 10px solid var(--stroke-color);
    border-bottom: 10px solid var(--stroke-color);
}

/* SECTIONS END */

/* 
 * IMAGE STYLES START 
 */
.largePreview {
    width          : 100%;
    max-width      : 1900px;
    max-height     : calc(100vh - 90px);
    display        : block;
    margin-left    : auto;
    margin-right   : auto;
    object-fit     : cover;
    object-position: 100% 50%;
}

.longPreview {
    width          : 100%;
    display        : block;
    margin-left    : auto;
    margin-right   : auto;
    object-fit     : cover;
    object-position: 100% 50%;
}

img.avatar {
    height: 150px;
}

img.small {
    height: 80px;
}

/* IMAGE STYLES END */

/* 
 * NAV START 
 */
nav.navbar {
    position : relative;
    left     : calc(50%);
    transform: translateX(-50%);
    padding  : 1rem 2rem;
}

#primary-nav {
    display    : flex;
    flex-grow  : 1;
    margin     : 0;
    padding-top: 0.8rem;
}

#primary-nav li {
    padding-left : 2.6rem;
    padding-right: .5rem;
}

#primary-nav ul {
    list-style-type: none;
    display        : inline-flex;
    flex-grow      : 1;
    justify-content: right;
}

#primary-nav li a {
    font-size               : 1.1rem;
    letter-spacing          : 0.1rem;
    /* text-underline-offset: 0.5rem !important; */
    font-weight             : 500;
    text-transform          : uppercase;
}

#primary-nav a {
    font-family    : 'Poppins', sans-serif;
    color          : var(--paragraph-color);
    text-decoration: none;
}

#primary-nav ul li a.active {
    color: #fa5246;
}

/* NAV END */


/*
 * Support css animations on scroll
 */

section .cs-text-container {
    display      : flex;
    flex-flow    : column-reverse;
    margin-bottom: 2rem;
    gap          : 20px;
}

.revealR {
    position  : relative;
    transform : translateX(150px);
    opacity   : 0;
    transition: 1s all ease;
}

.revealL {
    position  : relative;
    transform : translateX(-150px);
    opacity   : 0;
    transition: 1s all ease;
}

.revealL.active,
.revealR.active {
    transform: translateX(0);
    opacity  : 1;
}

/*
 * Support y-axis image stacking in CSS
 */
.image-stack {
    display : grid;
    position: relative;
}

.image-stack>div>img {
    display  : block;
    max-width: 400px;
    width    : 90%;
    padding  : 2rem 0;
}

.image-stack-top {
    grid-row   : 1;
    grid-column: 4 / span 5;
    z-index    : 1;
}

.image-stack-bottom-left {
    grid-column: 1 / span 4;
    grid-row   : 1;
}

.image-stack-bottom-right {
    grid-column: 8 / span 4;
    grid-row   : 1;
}

.image-stack-left {
    grid-row   : 1;
    grid-column: 1 / span 6;
    z-index    : 1;
}

.image-stack-right {
    grid-row   : 1;
    grid-column: 7 / span 6;
    z-index    : 1;
}

.image-stack-left-large {
    grid-column: 1 / span 11;
    grid-row   : 1;
}

.image-stack-right-small {
    grid-column: 9 / span 4;
    grid-row   : 1;
    z-index    : 1;
    margin-top : -20px;
}