body {
    background-color: #FDF8F3;
    color: #3f3f3f ;
    overflow: hidden;
    font-family: "M PLUS 1p", sans-serif;
}

h1 {
    font-size: 4em;
}

h2 {
    font-size: 2em;
    line-height: 2;
}

#splash-screen {
    font-size: 2em;
    height:100%;
    width:100%;
    line-height: 100vh;
    text-align: center;

    animation: glitch 2s forwards;
}

@keyframes glitch {
    0% {
        color: #FDF8F3;
    }
    5% {
        color: #3f3f3f ;
        transform: rotateX(10deg) skewX(90deg);
    }
    7% {
        transform: rotateX(0deg) skewX(0deg);
    }
    9% {
        transform: rotateX(-10deg) skewX(-90deg);
    }
    11% {
        transform: rotateX(0deg) skewX(0deg);
    }
    96% {
        transform: rotateX(0deg) skewX(0deg);
    }
    97% {
        transform: rotateX(10deg) skewX(90deg);
    }
    98% {
        transform: rotateX(0deg) skewX(0deg);
    }
    99% {
        color: #3f3f3f ;
        transform: rotateX(-10deg) skewX(-90deg);
    }
    100% {
        color: #FDF8F3;
    }
}

#outside, #inside {
    position: absolute;
    top:50%;
    left: 50%;
    
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

#inside {
    pointer-events: none;
    width: 15em; 
    height: 15em; 
    z-index: 3;
}

#outside {
    width:300%;
    height:300%;
    z-index: 2;
}

.menu-group {
    overflow: hidden;
}

.corner {
    cursor: pointer;
    color: #FDF8F3;
    width: 50%;
    height: 50%;
    position: fixed;
    z-index: 3;
}

.quadrant-text {
    opacity: 0;
}

.cover {
    width: 100%;
    height: 100%;
    background-color: #FDF8F3;
    position: absolute;
    z-index: 4;
}

/* Top Quadrant (Second to appear)*/
.corner-0 {
    background: linear-gradient(90deg, #FDF8F3 50%, #3f3f3f 50%);
    background-size: auto;
    background-size: 300%;
    animation: corner0-anim 3.2s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes corner0-anim {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 100%;
    }
}

[class*="quadrant-text-content"].active {
    animation: corner-text-anim .3s linear forwards;
}

@keyframes corner-text-anim {
    0% {
        font-size: 1em;
        -webkit-transform: rotateX(0deg) skewX(0deg);
        transform: rotateX(0deg) skewX(0deg);
    }
    10% {
        font-size: 1.2em;
        -webkit-transform: rotateX(10deg) skewX(90deg);
        transform: rotateX(10deg) skewX(90deg);
    }
    20% {
        -webkit-transform: rotateX(0deg) skewX(0deg);
        transform: rotateX(0deg) skewX(0deg);
    }
    30% {
        -webkit-transform: rotateX(-10deg) skewX(-90deg);
        transform: rotateX(-10deg) skewX(-90deg);
    }
    40% {
        font-size: 1.2em;
        -webkit-transform: rotateX(10deg) skewX(90deg);
        transform: rotateX(10deg) skewX(90deg);
    }
    50% {
        -webkit-transform: rotateX(0deg) skewX(0deg);
        transform: rotateX(0deg) skewX(0deg);
    }
    51% {
        -webkit-transform: rotateX(0deg) skewX(0deg);
        transform: rotateX(0deg) skewX(0deg);
    }
    100% {
        font-size: 1.2em;
        -webkit-transform: rotateX(0deg) skewX(0deg);
        transform: rotateX(0deg) skewX(0deg);
    }
}

.quadrant-text-0 {
    animation: quadrant0text-anim 1s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 1.7s;
}

@keyframes quadrant0text-anim {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        left: 50%;
        top: 50%;
    }
}

.cover-0 {
    -webkit-transform: translate(50%, 0%);
    transform: translate(50%, 0%);

    animation: cover-0-anim 1s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 2s
}

@keyframes cover-0-anim {
    0% {
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }
    100% {
        -webkit-transform: translate(-75%, 0%);
        transform: translate(-50%, 0%);
    }
}

.outside-corner-0 > img:hover {
    animation: outsidecorner0-anim-in 0.5s forwards;
}

@keyframes outsidecorner0-anim-in {
    0% {
        filter: grayscale(75%);
        transform: translate(47%, 22%) rotate(-45deg) scale(0.5);
    }
    100% {
        filter: grayscale(0%);
        transform: translate(47%, 22%) rotate(-45deg) scale(0.55);
    }
}

.outside-corner-0 > img {
    animation: outsidecorner0-anim-out 0.5s forwards;
}

@keyframes outsidecorner0-anim-out {
    0% {
        filter: grayscale(0%);
        transform: translate(47%, 22%) rotate(-45deg) scale(0.55);
    }
    100% {
        filter: grayscale(75%);
        transform: translate(47%, 22%) rotate(-45deg) scale(0.5);
    }
}

/* Right Quadrant (First to appear) */
.corner-1 {
    background: linear-gradient(45deg, #FDF8F3 50%, #3f3f3f 50%);
    background-size: auto;
    background-size: 300%;
    animation: corner1-anim 1.5s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes corner1-anim {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 100%;
    }
}

.quadrant-text-1 {
    animation: quadrant1text-anim 1s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 1s;
}

@keyframes quadrant1text-anim {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        left: 50%;
        top: 50%;
    }
}

.cover-1 {
    -webkit-transform: translate(-45%, 20%) rotate(45deg);
    transform: translate(-45%, 20%) rotate(45deg);
    animation: cover-1-anim 2s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 0.5s
}

@keyframes cover-1-anim {
    0% {
        -webkit-transform: translate(-45%, 20%) rotate(45deg);
        transform: translate(-45%, 20%) rotate(45deg);
    }
    100% {
        -webkit-transform: translate(-45%, 135%) rotate(45deg);
        transform: translate(-45%, 135%) rotate(45deg);
    }
}

.outside-corner-1 > img:hover {
    animation: outsidecorner1-anim-in 0.5s forwards;
}

@keyframes outsidecorner1-anim-in {
    0% {
        filter: grayscale(75%);
        transform: translate(-30%, -4%) rotate(-45deg) scale(0.6);
    }
    100% {
        filter: grayscale(0%);
        transform: translate(-30%, -4%) rotate(-45deg) scale(0.65);
    }
}

.outside-corner-1 > img {
    animation: outsidecorner1-anim-out 0.5s forwards;
}

@keyframes outsidecorner1-anim-out {
    0% {
        filter: grayscale(0%);
        transform: translate(-30%, -4%) rotate(-45deg) scale(0.65);
    }
    100% {
        filter: grayscale(75%);
        transform: translate(-30%, -4%) rotate(-45deg) scale(0.6);
    }
}

/* Bottom Quadrant (Last to appear) */
.corner-2 {
    background: linear-gradient(90deg, #3f3f3f 50%, #FDF8F3 50%);
    background-size: auto;
    background-size: 300%;
    animation: corner2-anim 3.2s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 1.6s;
    background-position: 100%;
}

@keyframes corner2-anim {
    0% {
        background-position: 100%;
    }
    100% {
        background-position: 0%;
    }
}

.quadrant-text-2 {
    animation: quadrant2text-anim 1s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 3.3s;
}

@keyframes quadrant2text-anim {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        left: 50%;
        top: 50%;
    }
}

.cover-2 {
    -webkit-transform: translate(0%, 0%);
    transform: translate(0%, 0%);

    animation: cover-2-anim 1s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 3.6s
}

@keyframes cover-2-anim {
    0% {
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }
    100% {
        -webkit-transform: translate(30%, 0%);
        transform: translate(30%, 0%);
    }
}

.outside-corner-2 > img:hover {
    animation: outsidecorner2-anim-in 0.5s forwards;
}

@keyframes outsidecorner2-anim-in {
    0% {
        filter: grayscale(75%);
        transform: translate(-47%, -51%) rotate(-45deg) scale(0.5);
    }
    100% {
        filter: grayscale(0%);
        transform: translate(-47%, -51%) rotate(-45deg) scale(0.55);
    }
}

.outside-corner-2 > img {
    animation: outsidecorner2-anim-out 0.5s forwards;
}

@keyframes outsidecorner2-anim-out {
    0% {
        filter: grayscale(0%);
        transform: translate(-47%, -51%) rotate(-45deg) scale(0.55);
    }
    100% {
        filter: grayscale(75%);
        transform: translate(-47%, -51%) rotate(-45deg) scale(0.5);
    }
}

/* Left Quadrant (Third to appear) */
.corner-3 {
    background: linear-gradient(225deg, #FDF8F3 50%, #3f3f3f 50%);
    background-position: 100%;
    background-size: auto;
    background-size: 300%;

    animation: corner3-anim 1.7s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 1.5s
}

@keyframes corner3-anim {
    0% {
        background-position: 100%;
    }
    100% {
        background-position: 0%;
    }
}

.quadrant-text-3 {
    animation: quadrant3text-anim 1s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 2.6s;
}

@keyframes quadrant3text-anim {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        left: 50%;
        top: 50%;
    }
}

.cover-3 {
    -webkit-transform: translate(20%, -55%) rotate(45deg);
    transform: translate(20%, -55%) rotate(45deg);

    animation: cover-3-anim 2.3s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 2s
}

@keyframes cover-3-anim {
    0% {
        -webkit-transform: translate(20%, -55%) rotate(45deg);
        transform: translate(20%, -55%) rotate(45deg);
    }
    100% {
        -webkit-transform: translate(50%, -55%) rotate(45deg);
        transform: translate(50%, -125%) rotate(45deg);
    }
}

.outside-corner-3 > img:hover {
    animation: outsidecorner3-anim-in 0.5s forwards;
}

@keyframes outsidecorner3-anim-in {
    0% {
        filter: grayscale(75%);
        transform: translate(30%, -23%) rotate(-45deg) scale(0.7);
    }
    100% {
        filter: grayscale(0%);
        transform: translate(30%, -23%) rotate(-45deg) scale(0.75);
    }
}

.outside-corner-3 > img {
    animation: outsidecorner3-anim-out 0.5s forwards;
}

@keyframes outsidecorner3-anim-out {
    0% {
        filter: grayscale(0%);
        transform: translate(30%, -23%) rotate(-45deg) scale(0.75);
    }
    100% {
        filter: grayscale(75%);
        transform: translate(30%, -23%) rotate(-45deg) scale(0.7);
    }
}

/* END Quadrant CSS */

.outside-corner {
    cursor: pointer;
    width: 50%;
    height: 50%;
    overflow: hidden;
    z-index: 4;

    animation: unhighlight-corner .5s linear forwards;
}

@keyframes unhighlight-corner {
    0% {
        box-shadow: 0 0 3em #FDF8F3;
    }
    100% {
        box-shadow: 0 0 0px #FDF8F3;
    }
}

.outside-corner:hover {
    z-index: 5;

    animation: highlight-corner .5s linear forwards;
}

@keyframes highlight-corner {
    0% {
        box-shadow: 0 0 0px #FDF8F3;
    }
    100% {
        box-shadow: 0 0 3em #FDF8F3;
    }
}

@keyframes grayscale-in {
    0% {
        filter: grayscale(75%);
    }
    100% {
        filter: grayscale(0%);
    }
}

.outside-corner > img {
    min-height: 100%;
    min-width: 100%;
}

@keyframes grayscale-out {
    0% {
        filter: grayscale(0%);
    }
    100% {
        filter: grayscale(75%);
    }
}

.quadrant-text {
    position: absolute;
    top: 100%;
    left: 100%;
    margin: 0;
    
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}

#transition {
    background-color: #3f3f3f;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 100%;
    z-index: 10;
}

#transition.up {
    animation: transition-up-anim 1s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes transition-up-anim {
    0% {
        top: 100%;
        left: 0%;
    }
    100% {
        top: 0%;
        left: 0%;
    }
}

#transition.down {
    animation: transition-down-anim 1s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes transition-down-anim {
    0% {
        top: -100%;
        left: 0%;
    }
    100% {
        top: 0%;
        left: 0%;
    }
}

#transition.right {
    animation: transition-right-anim 1s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes transition-right-anim {
    0% {
        top: 0%;
        left: -100%;
    }
    100% {
        top: 0%;
        left: 0%;
    }
}

#transition.left {
    animation: transition-left-anim 1s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes transition-left-anim {
    0% {
        top: 0%;
        left: 100%;
    }
    100% {
        top: 0%;
        left: 0%;
    }
}


#transition-clear {
    background-color: #3f3f3f;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    z-index: 10;
}

#transition-clear.home {
    background-color: #FDF8F3 !important;
}

#transition-clear.up {
    animation: transition-clear-up-anim 1s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes transition-clear-up-anim {
    0% {
        top: 0%;
    }
    100% {
        top: -100%;
    }
}

#transition-clear.up.home {
    animation: transition-home-up 0.6s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes transition-home-up {
    0% {
        top: -100%;
    }
    100% {
        top: 0%;
    }
}


#transition-clear.down {
    animation: transition-clear-down-anim 1s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes transition-clear-down-anim {
    0% {
        top: 0%;
    }
    100% {
        top: 100%;
    }
}

#transition-clear.down.home {
    animation: transition-home-down 0.6s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes transition-home-down {
    0% {
        top: 100%;
    }
    100% {
        top: 0%;
    }
}

#transition-clear.right {
    animation: transition-clear-right-anim 1s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes transition-clear-right-anim {
    0% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}

#transition-clear.right.home {
    animation: transition-home-right 0.6s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes transition-home-right {
    0% {
        top: 0%;
        left: 100%;
    }
    100% {
        top: 0%;
        left: 0%;
    }
}

#transition-clear.left {
    animation: transition-clear-left-anim 1s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes transition-clear-left-anim {
    0% {
        top: 0%;
        left: 0%;
    }
    100% {
        top: 0%;
        left: -100%;
    }
}

#transition-clear.left.home {
    animation: transition-home-left 0.6s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes transition-home-left {
    0% {
        top: 0%;
        left: -100%;
    }
    100% {
        top: 0%;
        left: 0%;
    }
}

#home-button {
    background-color: #3f3f3f;
    box-shadow: 0px 0px 5px #4e4e4e;
    cursor: pointer;
    position: absolute;
    height: 10em;
    width: 10em;
    
    animation: box-shadow-reset-anim 0.3s linear forwards;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

#home-button .quadrant-text {
    color: #FDF8F3;
    opacity: 1 !important;
    font-size: 1.2em;
}

@keyframes box-shadow-reset-anim {
    0% {
        box-shadow: 0px 0px 15px #4e4e4e;
    }
    100% {
        box-shadow: 0px 0px 5px #4e4e4e;
    }
}

#home-button:hover {
    animation: box-shadow-anim 0.3s linear forwards;
}

#home-button svg {
    animation: hover-zoom-off 0.3s linear forwards;
}

#home-button:hover svg {
    animation: hover-zoom-on 0.3s linear forwards;
}

@keyframes box-shadow-anim {
    0% {
        box-shadow: 0px 0px 5px #4e4e4e;
    }
    100% {
        box-shadow: 0px 0px 15px #4e4e4e;
    }
}

#home-button.up {
    top: 0%;
    left: 50%;
}

#home-button.up .quadrant-text {
    -webkit-transform: translate(-140%, -128%) rotate(-45deg);
    transform: translate(-140%, -128%) rotate(-45deg);
}

#home-button.down {
    top: 100%;
    left: 50%;
}

#home-button.down .quadrant-text {
    -webkit-transform: translate(-300%, -269%) rotate(-45deg);
    transform: translate(-300%, -269%) rotate(-45deg);
}

#home-button.right {
    top: 50%;
    left: 100%;
}

#home-button.right .quadrant-text {
    -webkit-transform: translate(-285%, -130%) rotate(-45deg);
    transform: translate(-285%, -130%) rotate(-45deg);
}

#home-button.left {
    top: 50%;
    left: 0%;
}

#home-button.left .quadrant-text {
    -webkit-transform: translate(-140%, -260%) rotate(-45deg);
    transform: translate(-140%, -260%) rotate(-45deg);
}


.container {
    height: 100vh;
    overflow-y: auto;

    -ms-overflow-style: none;
    scrollbar-width: none; 
}

.container::-webkit-scrollbar {
    display: none;
}

.text-container {
    margin: 0px 5%;
}

.text-right {
    margin: 5% 0% 5% 50%;
    text-align: right;
}

.text-left {
    margin: 5% 50% 5% 0%;
}

.divider-a {
    width: 100%;
    height: 1em;
    background: linear-gradient(135deg, rgba(85,214,170,1) 20%, rgba(63,63,63,1) 20%);
}

.divider-b {
    width: 100%;
    height: 1em;
    background: linear-gradient(-45deg, rgb(1,131,193,1) 20%, rgba(63,63,63,1) 20%);
}

.divider-r {
    width: 80%;
    height: 8px;
}

.sub-text {
    margin-top: -50px;
}

.work-section {
    margin: 3em 10%;
}

.work-section-header {
    cursor: pointer;

    animation: scale-reset .3s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes scale-reset {
    0% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

.work-section-header:hover {
    animation: scale-up .3s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes scale-up {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.03);
    }
}

.work-section-header {
    height: 200px;
    display: flex;
}

.work-section-img {
    width: 20%;
}

.work-img {
    height: 100%;
    max-width: 100%;
}

.work-section-brief {
    width: 80%;
    padding-left: 2em;
    position: relative;
}

.work-section-name {
    font-size: 3em;
}

.work-section-keywords {
    bottom: 0%;
    position: absolute;
    display: flex;
}

.work-section-keyword {
    font-size: 1em;
    margin-right: 4em;
}

.ln-br {
    width: 80%;
    height: 3px;
    background: linear-gradient(135deg, rgba(85,214,170,1) 20%, rgba(63,63,63,1) 20%);
    left: 10%;
    position: relative;
}

.work-section-details {
    overflow: hidden;
    max-height: 0vh;
    animation: collapse-work-section 0.3s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes collapse-work-section {
    0% {
        max-height: 100vh;
    }
    100% {
        max-height: 0vh;
    }
}

.work-section-details.active {
    animation: expand-work-section 0.3s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes expand-work-section {
    0% {
        max-height: 0vh;
    }
    100% {
        max-height: 100vh;
    }
}

.work-section-details h2 {
    font-weight: 500;
}

.work-section-detail {
    width: 70%;
    padding-right: 2em;
}

.work-section-detail p {
    font-size: 1.3em;
}

.work-section-tech {
    border-left: 1px solid #3f3f3f;
    width: 30%;
    text-align: right;
}

.tech {
    border: 1px solid #3f3f3f;
    border-radius: 5px;
    float: left;
    margin: 1em;
    width: fit-content;
    padding: 8px;
}

.link-icon {
    margin-right: 16px;
    height: 36px;
    width: 36px;
}

.work-section-gallery-image {
    width: 300px;
    margin: 1em;
}

.skill-section {
    margin: 5% 0%;
}

.skill-img {
    height: 90px;
    margin: 2em;
}

.contact-background {
    margin: -1% 10%;
    height: 0vh;
    background-color: #3f3f3f;

    animation: slide-up 0.3s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 1s;
}

@keyframes slide-up {
    0% {
        height: 0vh;
    }
    100% {
        height: 101vh;
    }
}

.contact-container {
    color: #FDF8F3 !important;
    padding: 10% 20%;
    text-align: center;
}

.contact-section-1 {
    opacity: 0;
    animation: glitch-appear-once 1s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 1.4s;
}

.contact-section-2 {
    opacity: 0;
    animation: glitch-appear-once 1s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 1.6s;
}

.contact-section-3 {
    opacity: 0;
    animation: glitch-appear-once 1s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 1.8s;
}

.contact-section-4 {
    opacity: 0;
    bottom: 10% !important;
    position: absolute;
    animation: glitch-appear-once 1s cubic-bezier(.86,0,.07,1) forwards;
    animation-delay: 2s;
}

.contact-section-3 img {
    left: -50%;
    position: relative;
}

@keyframes glitch-appear-once {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1 ;
        transform: rotateX(10deg) skewX(90deg);
    }
    7% {
        transform: rotateX(0deg) skewX(0deg);
    }
    9% {
        transform: rotateX(-10deg) skewX(-90deg);
    }
    11% {
        transform: rotateX(0deg) skewX(0deg);
    }
    13% {
        transform: rotateX(10deg) skewX(90deg);
    }
    15% {
        transform: rotateX(0deg) skewX(0deg);
    }
    100% {
        opacity: 1;
    }
}

.contact-hover {
    color: #FDF8F3;
    text-decoration: none;
    background: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(253,248,243,1) 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    animation: text-color-swipe-out 0.3s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes text-color-swipe-out {
    0% {
        background-position: right bottom;
    }
    100% {
        background-position: left bottom;
    }
}

.contact-hover:hover {
    animation: text-color-swipe-in 0.3s cubic-bezier(.86,0,.07,1) forwards;
}

@keyframes text-color-swipe-in {
    0% {
        background-position: left bottom;
    }
    100% {
        background-position: right bottom;
    }
}