/* Structural */

html, body {
  font-family: "Open Sans", sans-serif;
  scroll-behavior: smooth;
  cursor: default;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Fredoka", sans-serif;
}

body {
    height:100vh;
    max-width:100vw;
    width:100vw;
}

a.text-link {
    text-decoration: none;
}

a.text-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    color:#F27059;
} 

a.hero-link {
    text-decoration: none;
}

a.hero-link:hover {
    text-decoration: none;
}

a.icon-link {
    text-decoration: none;
}   
a.icon-link:hover {
    color:#F27059;
}

a.next-link {
    text-decoration: none;
}

a.next-link:hover {
    color:#016469;
}

.interior-buffer {
    width:15%; 
    height:100vh;
    margin: 0;
    padding: 0;
}

.interior-container {
    min-height:100vh;
    width:70%;
    vertical-align:middle;
    padding:0;
    margin:0;
}

.section-row {
    min-height:100vh;
    padding:0;
    margin:0;
    width:100%;
    max-width: 100vw;
}

.next-row {
    padding:0;
    margin:0;
}

.section-cell {
    min-height:100vh;
    padding:0;
    margin:0;
}

.site-nav {
    display:table;
    height:fit-content;
    padding: 5px 0 5px 0;
    position: sticky; 
    top: 0;
    z-index: 1;
    width:100%;
}

.mobile-nav {
    display: none;
}

hr.section-rule {
    border: 8px;
    border-style: solid;
    border-color: #F27059;
    width: 60%;
    margin-top:0;
}

hr.split-rule {
    border: 4px;
    border-style: solid;
    border-color: #2B2C62;
    width: 80%;
    z-index: 0.5;
    margin-top:0;
}

.title-col {
    margin: 0;
    width:250px; 
    position: sticky; 
    top: 0;
    height:100%;
}

.title-container {
    margin:0;
    padding:0;
    height:100%;
}

.title-row {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

.title-cell {
    height:100%;
    margin:0;
    padding:0;
}

h1.site-title {
    color:#863D5D;
    font-size:2.5em;
    font-weight:700;
    padding: 0 0 0 0;
    margin:0 0 5px 0;
    line-height:1.25em;
    float:right;
}

h2.site-subtitle {
    color:#863D5D;
    font-size:2.1em;
    text-align:right;
    font-weight:700;
    padding: 0 0 0 0;
    margin:0 0 5px 0;
    line-height:1.25em;
    float:right;
}

.site-header {
    padding-right: 20px;
    width:100%;
    min-height:155px;
}

hr.site-rule {
    border:2px solid #016469;
    margin: 0 0 3px 0;
    width:100%;
    float:right;
}

.main-container {
    height:100vh;
    overflow:hidden;
}

h1.section-title {
    z-index: 0.75;
    color:#FFC952;
    background-color:#2B2C62;
    padding: 0 15px 5px 15px;
    margin: 0;
    font-weight: 900;
    font-size: 48pt;
}

img.site-logo {
    width:82px;
    padding: 12px 0 0 0;
    margin-right: 20px;
}

.full-height {
    height: 100%!important;
}

.section-container {
    margin: 0 0;
    padding: 0 auto;
    width:100%;
}

.scroll-section {
    scroll-snap-align: start;
}

.section-head {
    text-align: center;
    margin:1em 0 2em 0;
    font-size:36px;
    min-height:3em;
    width:100%;
}   

.next {
    color:#F27059;
    margin: auto;
    text-align: center;
    font-size: 64pt;
    padding:0;
    margin:0;
}

.next h2 {
    font-size:1.5em;
}

.navbar {
    width: 100%;
    font-family: "Fredoka", sans-serif;
    font-size: 14pt;
    font-weight: 600;
    height:100%;
    padding:0 15% 0 15%;
    display:flex;
    justify-content: center;
    align-items:center;
    flex-flow: wrap;
}

.navbar-item {
    display:inline-flex;
    padding:0.01em 0.6vw;
}

.navbar-item:nth-child(1) {
    padding-left:0;
}

.navbar-item:last-child {
    padding-right:0;
}

ul.navlist {
    padding: 0 0;
    display: inline-block;
    margin:  0 0 0 0;
}

ul.navlist li {
    color:#016469;
    display: inline-block;
}

.list-head {
    color:#863D5D;
    padding-right:0.25vw;
    display: inline-block;
}

ul.navlist li + li::before {
    content: " • ";
    color: #863D5D;
}

.scroll-container {
    position:fixed;
    margin: 0;
    padding: 0;
    height:100%;
    overflow:scroll;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scroll-snap-stop: always;
}

/* Games Section */

img.game-art {
    max-width:100%;
    padding:0;
    margin:0;
}

h3.game-title {
    background-color:#F27059;
    color: black;
    font-weight: 700;
    font-size: 24pt;
    width:fit-content;
    padding: 0px 10px;
    margin: -0.85em 0 0 15px;
    position:absolute;
    border-radius: 5px 5px 5px 5px;
}

h4.studio-name {
    color: #016469;
    font-weight:600;
    text-align: left;
    margin:0 0 0.5em 0;
    line-height: 0.75em;
    display:inline;
}
h4.game-links {
    color: #016469;
    font-weight:600;
    text-align: left;
    margin:0 0 0.5em 0;
    line-height: 0.75em;
    display:inline;
}

h5.game-subsection {
    color: #863D5D;
    font-weight: 900;
    margin:0;
}

a.game-link {
    text-decoration: none;
}

a.game-link:hover {
    color:#F27059;
}

.game-grid {
    display:grid;
    grid-template-columns: 49% 49%;
    gap: 3rem 2%;
    grid-auto-rows: minmax(fit-content,100%);
    align-items: stretch;
    overflow:visible;
}

.game-grid-cell {
    justify-self:center;
    width:100%;
}

.game-callout {
    background-color: #FFC952;
    border-radius: 0 0 0 15px;
    border: 3px solid #F27059;
    padding: 0 15px;;
    height:100%;
    width:auto;
}

.games-row {
    width:100%;
    height: 100%;
}

.game-subhead {
    padding:0;
    margin:0;
}

.game-img-container {
    margin:0;
    padding:0;
    background-position: center;
    background-size: cover;
    border-radius: 0 15px 15px 0;
    width:250px;
    min-height:250px;
    height:inherit;
    overflow:hidden;
    height:100%;
    float:right;
}

.mobile-game-img {
    display: none;
}

.ys-img {
    background-image: url('../img/games/YS_KeyArt.png');
}
.ys-banner {
    background-image: url('../img/games/YS_Banner.png');
}
.hitc-img {
    background-image: url('../img/games/HopeInTheCity_KeyArt.png');
}
.hitc-banner {
    background-image: url('../img/games/Hope_Banner.png');
}
.sot-img {
    background-image: url('../img/games/SkyofTides_KeyArt.png');
}
.sot-banner {
    background-image: url('../img/games/Tides_Banner.png');
}
.gvh-img {
    background-image: url('../img/games/GVH_KeyArt.png');
}
.gvh-banner {
    background-image: url('../img/games/GVH_Banner.png');
}
.hssb-img {
    background-image: url('../img/games/Hardspace_KeyArt.png');
}
.hssb-banner {
    background-image: url('../img/games/Hardspace_Banner.png');
}
.wh-img {
    background-image: url('../img/games/who_hacked.png');
}
.wh-banner {
    background-image: url('../img/games/WhoHacked_Banner.png');
}
.neb-img {
    background-image: url('../img/games/dr_neb.png');
}
.neb-banner {
    background-image: url('../img/games/DrNeb_Banner.png');
}
.nda-img {
    background-image: url('../img/games/nda.png');
}
.nda-banner {
    background-image: url('../img/games/NDA_Banner.png');
}


.game-text-container {
    padding: 1.75em 0 0 0;
    margin:0;
}

.game-text-container p {
    color:black;
    margin: 0.25vw 0 0.25vw 0;
    text-indent:1em;
}

.job-description {
    color:black;
    padding-left:0;
    padding-right:0;
}

.job-description ul {
    padding-left:15px;
    margin-top: 0;
    font-size: 10pt;
    line-height: 1.25em;
    columns:2;
}

.job-description li {
    margin-top:2px;
}


/* Tools Section */

.tools-grid {
    display:grid;
    grid-template-columns: 49% 49%;
    gap: 1.5rem 2%;
    grid-auto-rows: minmax(fit-content,100%);
    align-items: stretch;
    overflow:visible;
}

.tool-grid-cell {
    justify-self:center;
    width:100%;
}

.tools-row {
    width:100%;
    height:100%;
}

h1.tool-icon {
    color: #016469;
    font-weight:700;
    font-size:32pt;
    display:inline-block;
}

h3.tool-title {
    font-weight: 700;
    color:black;
    font-size: 20pt;
    font-family: "Fredoka", sans-serif;
    display:inline-block;
    line-height:1.25em;
}

.tool-cell {
    width:20%;
    text-align:center;
}


.tool-head {
    background-color: #FFC952;
    border: 3px solid #F27059;
    border-radius: 0 0 0 15px;
    padding:0.5vw;
    width:40%;
    min-width:300px;
}

.tool-body {
    background-color:transparent;   
    border: 3px #F27059;
    border-style: dashed dashed dashed none;
    border-radius: 0 15px 15px 0;
    height:100%;
}

.tool-body ul {
    columns: 2;
    padding-left:10px;
    font-size: 1.125em;
}


/* Skills Section */

.skills-grid {
    display:grid;
    grid-template-columns: 49% 49%;
    gap: 1.5rem 2%;
    grid-auto-rows: minmax(fit-content,100%);
    align-items: stretch;
    overflow:visible;
}

.skills-grid-cell {
    justify-self:center;
    width:100%;
}

.skills-row {
    width:100%;
    height:100%;

}

h1.skill-icon {
    color: #016469;
    font-weight:700;
    font-size:32pt;
    display:inline-block;
}

h3.skill-title {
    font-weight: 700;
    color:black;
    font-size: 20pt;
    font-family: "Fredoka", sans-serif;
    display:inline-block;
    line-height:1.25em;
}

.skill-cell {
    width:20%;
    text-align:center;
}

.skill-head {
    background-color: #FFC952;
    border: 3px solid #F27059;
    border-radius: 0 0 0 15px;
    padding:0.5vw;
    width:40%;
    min-width:300px;
}

.skill-body {
    background-color:transparent;   
    border: 3px #F27059;
    border-style: dashed dashed dashed none;
    border-radius: 0 15px 15px 0;
    height:100%;
}

.skill-body ul {
    padding-left:10px;
    font-size: 1.125em;
}

/* Portfolio Section CSS */

/* Portfolio Navigation */

.portfolios-nav {
    background-color: #FFC952;
    border-radius: 15px;
    width:fit-content;
    margin:0 auto;
    padding: auto auto;
    text-align: center;
}

.portfolios-button {
    font-family: 'Fredoka', sans-serif;
    font-size:16pt;
    font-weight:500;
    color:#016469;
    margin: auto auto;
    padding-right:1.125em;
    text-decoration:none;
    cursor:pointer;

}

.portfolios-button:hover, .pb-active {
    color:#863D5D;
    font-family: 'Fredoka', sans-serif;
    font-size:16pt;
    font-weight:600;
    margin: auto auto;
    padding-right:1.125em;
    text-decoration: underline; 
    text-decoration-thickness:2px;
}


.portfolios-button::before {
    color:#FFC952;
    font-family: "Font Awesome 5 Free";
    content: "\f0a4 \00a0";
}

.portfolios-button:hover::before, .pb-active::before {
    color:#863D5D;
    font-family: "Font Awesome 5 Free";
    content: "\f0a4 \00a0";
}

.pb-active::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0a4 \00a0";
}

/* Portfolio Section Body */

.narrative-portfolio, .design-portfolio, .visart-portfolio {
    margin-top:64px;
}

.design-portfolio, .visart-portfolio {
    display: none;
}

.portfolios-row {
    width:100%;
    height:fit-content;
    min-height:300px;
    padding: 0 0 0 0;
    margin-bottom:36px;
}

.pf-initial-img-cell {
    margin:0;
    padding:0;
    width:250px;
    height:100%;
    border-right: 3px solid #F27059;
    overflow:hidden;
    background-position:center;
    background-size:cover;
}

.pf-final-img-cell {
    margin:0;
    padding:0;
    width:250px;
    height:100%;
    border-left: 3px solid #F27059;
    overflow:hidden;
    background-position:center;
    background-size:cover;
}

.pf-initial-text-cell {
    padding: 15px;
    border-left: 3px solid #F27059;
    border-top: 3px solid #F27059;
    border-bottom: 3px solid #F27059;
    background-color: #FFC952;
    border-radius: 15px 0 0 15px;
    width:25%;
}

.pf-middle-text-cell {
    padding: 15px;
    border-top: 3px solid #F27059;
    border-bottom: 3px solid #F27059;
    background-color: #FFC952;
}

.pf-final-text-cell {
    padding: 15px;
    border-right: 3px solid #F27059;
    border-top: 3px solid #F27059;
    border-bottom: 3px solid #F27059;
    background-color: #FFC952;
    border-radius: 0 15px 15px 0;
    width:25%;
}

.pf-image {
    overflow:hidden;
    float:left;
}

h3.pf-title-left {
    background-color:#F27059;
    color: black;
    font-weight: 700;
    font-size: 24pt;
    width:fit-content;
    padding: 0px 10px;
    margin: -1.25em 0 0 250px;
    position:absolute;
    border-radius: 5px 5px 5px 5px;
}

h3.pf-title-right {
    background-color:#F27059;
    color: black;
    font-weight: 700;
    font-size: 24pt;
    width:fit-content;
    padding: 0px 10px;
    margin: -1.25em 250px 0 0;
    position:absolute;
    right:0;
    border-radius: 5px 5px 5px 5px;
}

.portfolios-text-container {
    padding: 1.75em 0 0 0;
    margin:0;
    height:275px;
}

.portfolios-text-container p {
    color:black;
    margin: 0.25vw 0 0.25vw 0;
    text-indent:1em;
}

.pf-pullquote {
    color: #863D5D;
    font-family: "Fredoka", sans-serif;
    font-size: 1.5em;
    font-weight:600;
    width:100%;
    float:left;
    height:100%;
    text-align:center;
}

.pf-quotebody {
    width:85%;
    font-family: "Fredoka", sans-serif;
    font-size:1em;
    font-weight:600;
    max-height:100%;
    text-align:center;
    margin:0 0 0 0;
    padding:0;
    z-index:1;
    overflow:scroll;
}

.pf-quotebody h1 {
    margin-top:auto;
    margin-bottom:auto;
    font-family: "Fredoka", sans-serif;
    font-size:1em;
    font-weight:600;
    text-align:center;
    vertical-align: middle;
}

.pf-quotemark {
    font-size:5.5em;
    margin:0;
    padding:0;
    color:#F27059;
    font-family: "Fredoka", sans-serif;
}

.pf-quotemark:nth-of-type(1) {
        line-height:1;
}
.pf-quotemark:nth-of-type(3) {
        line-height:0.5;
}

/* About Section CSS */

.about-row {
    margin-bottom: 15vh;
    height:fit-content;
}

.about-main {
    border: 3px solid #F27059;
    background-color: #FFC952;
    border-radius: 25px 0 0 25px;
    width:60%;
    height:50vh;
    padding:16px;
}   

.about-text-cell {
    width:25vw;
    height:100%;
}

.about-text-cell h1 {
    font-family: "Fredoka", sans-serif;
    font-weight: 900;
    line-height: 95%;
    font-size: 3vw;
    color: #000000;
    margin: 0;
    text-align: right;
}

.about-text-cell h2 {
    font-family: "Fredoka", sans-serif;
    font-weight: 900;
    font-size: 2vw;
    color: #016469;
    margin: -5px 0 0 0;
    text-align: right;
}

.about-text-cell p {
    font-family: "Open Sans", sans-serif;
    color:#000000;
    font-weight:500;
    font-size: 1.2em;
    text-align: justify;
}

.about-text-cell p a {
    text-decoration: none;
    font-weight: bold;
    color:#863D5D;
}

.about-projects {
    width:100%;
    margin:0;
    padding: 0 25px;
}

.about-projects h3 {
    font-family: "Fredoka", sans-serif;
    font-weight:600;
    color:#000;
    text-align: center;
}

.project-item {
    width:100%;
    text-align: center;
}

.about-img-cell {   
    background-image: url('../img/assets/sheev.png');
    background-position: center;
    background-size: cover;
    padding: 15px;
    border-radius: 0 15px 15px 0;
    width:40%;
    height:50vh;
}

.footer {
    margin: auto;
    text-align:center;
}

.about-img-banner {
    display:none;
}

.desktop-buffer {
    display: block;
    height: 10em;
}

.mobile-buffer-initial {
    display: none;
}

.mobile-buffer {
    display: none;
}

.mobile-buffer-footer {
    display: none;
}

@media screen and (max-width:2100px) {
    .job-description ul {

        columns: 1;
    }

}

@media screen and (max-width:1550px) {
    .game-grid {
        grid-template-columns: 100%;
    }
    .tools-grid {
        grid-template-columns: 100%;
    }
    .skills-grid {
        grid-template-columns: 100%;
    }
    .job-description ul {

        columns: 2;
    }
}


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

    .about-img-cell {
        display:none;
    }

    .about-img-banner {
        display:block;
        margin: 0 auto;
        padding:0;
        width:100%;
        height:400px;
        border-radius: 0 0 15px 15px;
        background-image: url('../img/assets/sheev.png');
        background-size: cover;
        background-position:center;
    }

    .about-row {
        width:100%;
        margin:0 auto;
    }

    .about-main {
        width:100%;
        border-radius: 15px 15px 0 0;
    }

    .about-text-cell {
        width:100%;
    }

    .about-text-cell h1 {
        font-size:9vw;
        text-align:left;
        line-height:auto;
        margin-top:10px;
    }

    .about-text-cell h2 {
        font-size:5vw;
        text-align:left;
        line-height:auto;
        margin-top:0.5em;
        margin-top:20px;
    }

    .about-text-cell p {
        font-size: 1em;
    }

    .desktop-buffer {
        display: none;
    }

    .mobile-buffer-initial {
        display: block;
        height:1.5em;
    }

    .mobile-buffer {
        display: block;
        height:2em;
    }

    .mobile-buffer-footer {
        display: block;
        height: 4.5em;
    }


}

@media screen and (max-width:950px) {
    .title-col {display:none;}

    .main-container {
        width:100%;
        overflow:hidden;
    }

    .scroll-container {
        overflow:scroll;
        scroll-behavior: smooth;
        scroll-snap-type: none;
        scroll-snap-stop: normal;
    }

    .site-nav {display:none;}

    .mobile-nav {
        background-color: #FFC952;
        display:inline-table;
        height:fit-content;
        padding: 5px 0 5px 0;
        position: sticky; 
        top: 0;
        z-index: 1;
        width:100%;
    }

    .mobile-header {
        width:26%;
        min-height:0;
        height:fit-content;
        vertical-align: middle;
    }

    .mobile-display-header {
        width:100%;
        height:fit-content;
    }

    img.site-logo {
        width:40px;
        padding: 6px 0 0 0;
        margin:0;
    }

    .mobile-navbar {
        font-size:0.75em;
        font-weight:700;
        width:74%;
        padding: 5px 0 0 10px;
        vertical-align: middle;
    }

    .mobile-navitem {
        display:inline-block;
        padding:0;
    }

    .mobile-navitem .list-head {
        padding-right:5px;
    }

    h1.site-title {
        font-size:1.25em;
        font-weight:700;
        padding: 0 0 0 0;
        margin:0 0 2px 0;
        line-height:1.25em;
        float:right;
    }

    hr.site-rule {
        border:1px solid #016469;
        margin: 0 0 2px 0;
        width:100%;
        float:right;
    }

    .interior-buffer {display:none;}

    .interior-container {width:100%;}

    .section-head {
        text-align: center;
        margin:0 0 1em 0;
        font-size:24px;
        min-height:1.5em;
        width:100%;
    }

    .game-grid {
        grid-template-columns: 100vw;
        gap: 1rem 1rem;
    }

    .game-grid-cell {
        width:90%;
        height:fit-content;
    }

    h3.game-title {
        font-size: 20pt;
        width:90%;
        padding: 0px 15px;
        margin: 0;
        border-radius: 5px 5px 5px 5px;
        display:block;
        float:none;
    }

    .game-img-container {
        display:none;
    }

    .mobile-game-img {
        display:block;
        height:125px;
        width:100%;
        background-position: center;
        background-size:cover;
        border-radius: 0 0 15px 15px;
    }

    .game-callout {
        border-radius: 0 0 0 0;
        padding: 0 15px;
        height:fit-content;
        width:100%;
    }

    .game-text-container {
        padding: 50px 0 0 0;
    }


    h1.section-title {
        z-index: 0.75;
        color:#FFC952;
        background-color:#2B2C62;
        padding: 0 15px 5px 15px;
        margin: 0;
        font-weight: 900;
        font-size: 30pt;
    }

    hr.section-rule {
        border: 8px;
        border-style: solid;
        border-color: #F27059;
        width: 90%;
        margin-top:0;
    }

    hr.split-rule {
        border: 4px;
        border-style: solid;
        border-color: #2B2C62;
        width: 95%;
        z-index: 0.5;
        margin-top:0;
    }
    
    .tools-grid {
        grid-template-columns: 100vw;
        gap: 1rem 1rem;
    }
    
    .tool-grid-cell {
        width:90%;
    }

    .tool-head {
        min-width:0;
        width:90vw;
        float:left;
        border-radius: 15px 15px 0 0;
        padding:0;
        height:auto;
    }

    .toolhead-interior {
        display:flex;
        justify-content: center;
        align-items:center;
    }

    .tool-body {
        width:90vw;
        height: fit-content;
        float:left;
        border-style: none dashed dashed dashed;
        border-radius: 0 0 15px 15px;
    }

    h3.tool-title {
        font-size: 18pt;
    }
    
    h3.skill-title {
        font-size: 18pt;
    }

    .tool-cell {
        width:fit-content;
        text-align:center;
        padding:0;
    }

    .skills-grid {
        grid-template-columns: 100vw;
        gap: 1rem 1rem;
    }
    
    .skills-grid-cell {
        width:90%;
    }

    .skill-head {
        min-width:0;
        width:90vw;
        float:left;
        padding:0;
        border-radius: 15px 15px 0 0;
    }

    .skillhead-interior {
        display:flex;
        justify-content: center;
        align-items:center;
    }

    .skill-body {
        width:90vw;
        height:fit-content;
        float:left;
        border-style: none dashed dashed dashed;
        border-radius: 0 0 15px 15px;
    }

    .skill-cell {
        width:fit-content;
        text-align:left;
        padding:0;
    }

    h3.pf-title-left {
        margin: 0;
    }

    h3.pf-title-right {
        margin: 0;
    }

    .next h2 {
        font-size:1em;
    }

    .about-row {
        width:90%;
    }

    .about-img-banner {
        width: 90%;
    }
}