/* HTML */

* {
    margin: 0px;

}

html {
    background-color: #f4f3f2;
    font-size: 100%;

}

body {
    width: 100vw;
    margin: 0px;
    padding: 0px;
}

a {
    color: #000000;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.menu-tile a:hover {
    text-decoration: none;
}

.name:hover {
    text-decoration: overline;
}

img {
    display: block;
}

/* Colors */

.b {
    color: #000;
}

.w {
    color: #f4f3f2
}

#fp-nav {
    background-color: RGBA(244, 243, 242,1);
    padding: 12px 8px ;
    border-radius: 12px;
    pointer-events: all;
}

#fp-nav ul li .fp-tooltip {
    background-color: #f4f3f2;
     color: #000;
     padding: 12px;
     font-weight: bold;
     border-radius: 12px 0px 0px 12px;
     transform: translateY(-12px);
     
}

#fp-nav ul li a span{
     background: #000;
}

.forza {
    background-color: #Ffb400; 
    color: #000;
}

.forzainvert {
    background-color: #1d1912; 
    color: #Ffb400;
}



.forzabar {
    background-color: #000; 
    border-color: #000;
}

.forzabarinvert {
    background-color: #Ffb400; 
    border-color: #Ffb400;
}

.roguecompany {
    background-color: #8d0303; 
    color: #ebdee0;
}

.roguecompanyinvert {
    background-color: #ebdee0; 
    color: #8d0303;
}

.roguecompanybar {
    background-color: #ebdee0; 
    border-color: #ebdee0;
}

.roguecompanybarinvert {
    background-color: #8d0303; 
    border-color: #8d0303;
}

.roguecompanygray {
    background-color: #0f0f0f;
    color: #ebdee0;
}


.rocoelite {
    background-color: #f0e8e8; 
    color: #c90606;
}

.rocoeliteinvert {
    background-color: #c90606; 
    color: #f0e8e8;
}

.rocoeliteblue {
    background-color: #1a123f; 
    color: #e5e9f1;
}

.rocoelitebar {
    background-color: #c90606; 
    border-color: #c90606;
}

.rocoelitebarinvert {
    background-color: #f1e5e5; 
    border-color: #f1e5e5;
}

.rocoelitebarblue {
    background-color: #e5e9f1; 
    border-color: #e5e9f1;
}

.fps {
    background-color: #043521; 
    color: #91F9df;
}

.fpsinvert {
    background-color: #91F9df; 
    color: #043521;
}

.fpsbar {
    background-color: #91F9df; 
    border-color: #91F9df;
}

.fpsbarinvert {
    background-color: #043521; 
    border-color: #043521;
}

.planetsuikanav {
    background-color: #ffcc24;
    color: #dd1a00;
}

.planetsuika {
    background: url("assets/t_skybox.png") rgba(0, 0, 0, 0.66);
    color: #ffcc24;
    background-blend-mode: multiply;
}

.planetsuikainvert {
    background-color: #dd1a00;
    color: #ffcc24;
}

.planetsuikabar {
    background-color: #dd1a00;;
    border-color: #dd1a00;
}

.planetsuikabarinvert {
    background-color: #ffcc24; 
    border-color: #ffcc24;
}

.webnovel {
    background-color: #ebebeb;
    color: #000;
    
}

.webnovelinvert {
    background-color: #000;
    color: #ebebeb;
}

.webnovelbar {
    background-color: #000;
    border-color: #000;
}

.webnovelbarinvert {
    background-color: #000; 
    border-color: #000;
}

.copysource {
    background-color: #00344e;
    color: #ebeaf7;
}

.copysourceinvert {
    background-color: #ebeaf7;
    color: #00344e;
}

.copysourcebar {
    background-color: #ebeaf7;
    border-color: #ebeaf7;
}

.copysourcebarinvert {
    background-color: #00344e; 
    border-color: #00344e;
}

.boyfriendvillage {
    background-color: #ffcff4;
    color: #000;
}

.boyfriendvillageinvert {
    background-color: #000;
    color: #ffcff4;
}

.boyfriendvillagebar {
    background-color: #000;
    border-color: #000;
}

.boyfriendvillagebarinvert {
    background-color: #ffcff4; 
    border-color: #ffcff4;
}

.motionreel {
    background-color: #061d14;
    color: #9aeb65;
}

.motionreelinvert {
    background-color: #9aeb65;
    color: #061d14;
}

.motionreelbar {
    background-color: #9aeb65;
    border-color: #9aeb65;
}

.motionreelbarinvert {
    background-color: #061d14; 
    border-color: #061d14;
}

.bookshelf {
    background-color: #915812;
    color: #ffb941;
}

.bookshelfinvert {
    background-color: #ffb941;
    color: #915812;
}

.bookshelfbar {
    background-color: #ffb941;
    border-color: #ffb941;
}

.bookshelfbarinvert {
    background-color: #915812; 
    border-color: #915812;
}

.about {
    background-color: #201A15;
    color: #BFBFBF;
}

.aboutinvert {
    background-color: #BFBFBF;
    color: #201A15;
}

.aboutbar {
    background-color: #BFBFBF;
    border-color: #BFBFBF;
}

.aboutbarinvert {
    background-color: #201A15; 
    border-color: #201A15;
}



/* Decorations */

.bar {

    border-radius: 50px;
    border-style: solid;
    width: 100%;
    margin: 56px 0 12px 0;
    height: 4px;
}



.name {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: capitalize;
    letter-spacing: -3px;
    font-size: 2rem;
    /* text-wrap: nowrap; */
    overflow: visible;
    font-weight: bold;
    margin: 0px;

    padding: 0px;
}

.asterik {
    font-family: serif;
    text-transform: capitalize;
    letter-spacing: -3px;
    font-size: 60px;
    font-weight: bold;
    width: fit-content;
    -webkit-text-stroke: #000000 1px;
    color: #f4f3f2;
    padding-right: 6px;
}

.asterik:hover {
    color: #000;
    cursor: help;
}

.navigation-container {
    margin: 0 0 -50px 0;
    padding: 0px;

}



/* Content */

.introduction-tile {
    height: 300px;
    width: fit-content;
    display: flex;
    flex-direction: row;
    margin-bottom: 100px;
    width: 100%;
}

.bio-body-container {
    /* background-color: rgba(162, 223, 254, 0.279); */
    display: flex;
    flex-direction: column;
    margin: 8px;
    position: relative;
    width: 60% !important; 
}

.bio-body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    letter-spacing: -1px;
    font-size: 1.25rem;
    text-align: left;
    justify-content: flex-end;
    /* background-color: aqua; */
    position: absolute;
    right: 0;
    bottom: 0;

}

.decorator-container {
    display: flex;
    flex-direction: row;
}

.break {
    margin-bottom: 250px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    letter-spacing: -1px;
    font-size: 3rem;
    text-align: left;
}

@keyframes spinBreak {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.break:hover {
    cursor: help;

    animation-name: spinBreak;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}







.marquee {
    direction: left;
    width: 250px;
    height: 60px;
    font-size: 1.25rem;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    letter-spacing: -1px;
    padding: 12px 10px;
}

.introduction-links {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    padding: 16px;
    width: auto;
}

.introduction-links a {
    margin-left: auto;
    text-wrap: nowrap;
}

.loose-img {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 0;
    display: block;
}

.fp-overflow {
    overflow: clip;
}

.display-img {
    width: 100%;
    margin: -24px auto 0 auto;
    display: block;
    object-fit:cover;
    object-position: top;
    max-height: 950px;

}

.loose-wide {
    width: 100%;
    margin: 0 auto;
    display: block;
}

.logo-img {
    width: 100%;
    max-width: 500px;
    margin: 24px auto;
    padding: 1rem 0;
    display: block;
}

.hero-hud-img {
    width: 100%;
    margin: 1rem 0;
}



@keyframes tileHover {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-20px);
    }
}

.menu-tile {
    width: 100vw;
    margin: -70px 0px 0px 0px;
    padding: 20px 0px 30px 0px;
    border-radius: 15px 15px 0px 0px;
    height: fit-content;
    position: relative;
    filter: invert(0);
    display: flex;
    flex-direction: column;

}

.menu-tile:hover {
    filter: invert(1);
    animation-name: tileHover;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    cursor: pointer;
}

.project-title {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: -2px;
    font-size: 2.25rem;
    line-height: 2rem;
    /* text-wrap: nowrap; */
    overflow: visible;
    font-weight: bold;
    padding: 6px 0 60px 12px;
}

.job-title-tile {
    border-radius: 15px 15px 0px 0px;
    padding: 8px 15px 2px 15px;
    margin-left: 8px;

}

.job-title {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: capitalize;
    letter-spacing: -0.005rem;
    font-size: 1.25rem;
    font-weight: 100;
    position: absolute;
    left: 0px;
    top: -0.75rem;

}


.project-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 24px 0;
}

.project-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
    padding-bottom: 12px;
}

.project-date {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    letter-spacing: -1px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

.project-role {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    letter-spacing: -1px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

.project-content {
    padding: 0px 12px;
    width: fit-content;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

.project-content-title {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: -3px;
    font-size: 2.25rem;
    overflow: visible;
    font-weight: bold;
    padding: 0.25rem;

}

.project-content-body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    letter-spacing: -1px;
    font-size: 1.5rem;
    margin: 12px 0;
    padding-right: 25px;
    line-height: 2.125rem;
}


.project-content-quote {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    
    font-optical-sizing: auto;
    letter-spacing: -1px;
    font-size: 1.75rem;
    margin: 12px 0;
    padding-right: 25px;
    line-height: 2.125rem;
    font-weight: bold;
    text-transform: capitalize;
}

.project-content-image {
    width: 100%;
    margin: 20px 0;
}



.project-img-grid {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 20px 0px;
    padding: 1% 0;
    align-items: center;
    justify-content: center;
}

.grid-img {
    flex: 1;
    max-width: 30%;
    align-self: start;
    padding: 1%;
}


.grid-img-sofm {
    flex: 1;
    max-width: 47%;
    align-self: start;
    padding: 1%;
}

.grid-img-roco {
    flex: 1;
    max-width: 47%;
    align-self: start;
    padding: 1% 0;
}

.grid-img-ui {
    flex: 3;
    max-width: 94%;
    align-self: start;
    padding: 1%;
}

.grid-text-tile {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0 2rem 0;
}

.grid-text {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    letter-spacing: -1px;
    font-size: 1rem;
    line-height: 1.125rem;
    padding: 0px 12px;
    max-width: 700px;
    text-align: center;
}

a t:hover {
    text-decoration: underline;
}


.emblem-grid {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 1% 0;
    align-items: center;
    justify-content: space-between;

}

.grid-img-achieves {
    flex: 1;
    max-width: 22%;
    align-self: start;
    padding: 1%;
}

.grid-img-webnovel-logos {
    flex: 1;
    max-width: 7%;
    align-self: start;
    padding: 2%;
}



.icon-grid {
    display: flex;
    width: 100%;
    max-width: 1200px;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 20px 0px;
    align-items: center;
    justify-content: center;
}

.grid-icon{
    flex: 1;
    align-self: start;
    padding: 1%;
    height: auto; 
    width: auto; 
    max-width: 384px; 
    max-height: 128px;
    object-fit: scale-down;
}

.about-body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    letter-spacing: -1px;
    font-size: 1.65rem;
    line-height: 2rem;
    padding-right: 25px;
    /* align-self: flex-end; */
}

.about-body-container {
    width: auto;
    display: flex;

}

.about-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    padding-top: 56px;
    
}

.about-img {
    height: 100%;
    max-width: 250px;
    margin: 0px 35px 16px 0px;
    border: solid;
    border-width: 2px;
}

.endcap {
    height: 100px;
    width: 100%;
    margin-top: -30px;
}



@media (min-width: 766px) {

    .introduction-tile {
        height: 200px;
    }
    .about-container {
        flex-direction: row;
    }


    .project-content {
        margin: 0 auto;
    }

    .bar {
        width: 100%;
    }

    .project-info {
        width: 100%;
    }

    .project-title {
        font-size: 3.5rem;
        line-height: 3.25rem;
    }

    .project-content-body {
        margin: 12px 0 36px 0;
        font-size: 2.5rem;
        line-height: 3rem;
    }

    .project-content-quote {
        font-size: 3.5rem;
        line-height: 4rem;
    }

    .project-img-grid {
        align-content: center;
    }

    .grid-text {
        
        font-size: 1.5rem;
        line-height: 2rem;
    }


    .grid-img {
        padding: 1%;
        max-width: 30%;
    }

    .project-content-title {
        font-size: 5rem;
        padding-bottom: 0px;
    }

    .name {
        font-size: 3rem;
    }

    .bio-body-container {
        max-width: 600px;
    }



    .marquee {
        width: 425px;
    }

}

@media (min-width: 1244px) {

    .project-title {
        font-size: 5rem;
        line-height: 4.75rem;
    }

}