:root {
    --background-color: #1a1b26;
    --background-transparent: #1a1b26AA;
    --background-alt-color: #1a1c30;
    --surface-color: #2e2f42;

    --text-color: #D5B377;
    --link-color: #EFDE9D;
    --text-secondary: rgba(213, 179, 119, 0.8);
    
    --accent-color: #9b5de5;
    --accent-shade: #5d3789;


    --luffy-hair-color: #fcfdf5;
    --luffy-skin-color: #f3d5c6;
    --luffy-mouth-color: #473b48;
    --luffy-teeth-color: #f4f5f4;
    --luffy-tongue-color: #ee9798;
    --luffy-scar-color: #e6a2a8;
    --luffy-sash-color: #c67dd2;
    --luffy-pants-color: #f4f0ec;
    --luffy-hat-color: #ead4ac;
    --luffy-hat-stripe-color: #b85c6b;
    --luffy-shoe-color: #b59b80;
    --luffy-shoe-strap:#352223;
    --luffy-cloud-color: #f3f4f3;
    
    /* Probably gonna delete these */
    --nav-log-pose-base-color: #694d49;
}

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

a {
    color: var(--link-color);
}

a:hover {
    color: var(--text-secondary);
}

.navbutton {
    position: relative;
    background-color: var(--background-alt-color);
    width: auto;
    height: 60px;
    border-radius: 20px;
    z-index: 10;
}

#button-content{
    background-color: var(--background-transparent);
    color: var(--text-color);
    border: 1px solid var(--text-secondary);
    font-size: 20px;
    padding: 10px;
    border-radius: 10px;
    z-index: 10;
}

#button-content:hover {
    transform: scale(1.05);
}

#textbox {
    position: absolute;
    margin-top: 1%;
    background-color: var(--background-transparent);
    padding: 5px;
    border-radius: 20px;
    border: 1px solid var(--text-secondary);
    color: var(--text-color);
    z-index: 10;
}

.screensize {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    margin: 0 auto;
    width: 100vw;
    height: auto;
}

.luffy {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
    aspect-ratio: 14 / 10;
}

@media (max-width: 768px){
    .luffy{
	margin: 0 auto;
	margin-top: 55%;
	margin-left: 20%;
    }
}

.luffy-head {
    position: absolute;
    width: 80%;
    height: 80%;
    z-index: 6;
    top: 2%;
    left: 43%;
}


.luffy-upperbody {
    position: absolute;
    width: 80%;
    height: 85%;
    left: 29%;
    top: 1%;
}

.luffy-cloud {
    position: absolute;
    background: var(--luffy-cloud-color);
    width: 50%;
    height: 45%;
    clip-path: polygon(95% 80%, 92% 77%, 89% 77%, 86% 79%, 84% 83%, 82% 84%, 80% 81%, 77% 80%, 75% 82%, 74% 87%, 73% 91%, 71% 94%, 66% 97%, 63% 99%, 60% 99%, 58% 97%, 56% 96%, 53% 94%, 52% 92%, 50% 87%, 50% 81%, 49% 79%, 49% 81%, 47% 80%, 47% 76%, 47% 72%, 48% 67%, 49% 64%, 51% 61%, 52% 57%, 56% 45%, 58% 40%, 65% 36%, 67% 32%, 66% 28%, 68% 28%, 70% 30%, 70% 34%, 70% 36%, 73% 37%, 75% 36%, 76% 33%, 77% 29%, 80% 29%, 81% 27%, 79% 24%, 76% 18%, 73% 19%, 71% 22%, 69% 25%, 66% 25%, 65% 28%, 63% 30%, 61% 32%, 58% 32%, 56% 29%, 54% 28%, 52% 30%, 49% 32%, 24% 47%, 19% 49%, 17% 48%, 17% 45%, 15% 46%, 12% 49%, 9% 53%, 6% 58%, 4% 65%, 4% 71%, 6% 75%, 7% 79%, 9% 82%, 11% 82%, 14% 80%, 16% 80%, 17% 83%, 18% 84%, 18% 87%, 16% 85%, 13% 87%, 11% 88%, 9% 86%, 7% 88%, 4% 87%, 2% 83%, 1% 77%, 0% 64%, 1% 56%, 4% 48%, 7% 44%, 12% 40%, 12% 37%, 14% 35%, 17% 32%, 19% 35%, 20% 37%, 21% 36%, 51% 16%, 54% 13%, 56% 13%, 55% 17%, 57% 17%, 58% 15%, 58% 13%, 57% 10%, 57% 6%, 60% 3%, 60% 6%, 61% 8%, 62% 8%, 62% 4%, 64% 1%, 67% 1%, 71% 1%, 71% 4%, 72% 5%, 74% 5%, 75% 3%, 76% 1%, 83% 1%, 81% 2%, 81% 5%, 81% 7%, 83% 7%, 84% 4%, 85% 2%, 90% 1%, 92% 2%, 90% 5%, 90% 10%, 91% 13%, 92% 14%, 93% 13%, 94% 8%, 96% 7%, 99% 7%, 100% 9%, 98% 10%, 97% 12%, 97% 15%, 99% 17%, 97% 20%, 96% 21%, 94% 22%, 93% 25%, 95% 27%, 96% 30%, 97% 33%, 99% 32%, 100% 31%, 100% 34%, 98% 36%, 97% 37%, 95% 37%, 93% 38%, 92% 42%, 92% 46%, 92% 50%, 89% 52%, 87% 54%, 85% 53%, 84% 53%, 81% 54%, 78% 53%, 76% 52%, 74% 51%, 73% 47%, 70% 45%, 68% 48%, 63% 50%, 60% 52%, 57% 59%, 54% 67%, 53% 75%, 54% 82%, 55% 88%, 58% 91%, 61% 92%, 66% 93%, 71% 89%, 72% 83%, 73% 78%, 76% 76%, 78% 78%, 81% 79%, 83% 77%, 85% 73%, 89% 73%, 93% 74%, 95% 75%);
    z-index:5;
    animation: float 5s ease-in-out infinite;
    left: 33%;
}


.luffy-lowerbody {
    position:absolute;
    width: 86%;
    height: 70%;
    top: 40%;
}

.luffy-eye {
    position: absolute;
    background: black;
    width: 20.7%;
    height: 26%;
    clip-path: polygon(21% 53%, 23% 50%, 25% 50%, 27% 50%, 29% 52%, 30% 54%, 28% 55%, 26% 54%, 24% 53%, 21% 54%);
    z-index: 5;
}

.luffy-facescar {
    position: absolute;
    background: black;
    width: 2%;
    height: .3%;
    transform: rotate(-20deg);
    border-radius: 50%;
    z-index: 5;
    top: 15%;
    left: 5%;
    
}

.luffy-facescar1 {
    position: absolute;
    background: black;
    width: .2%;
    height: 1.2%;
    border-radius: 50%;
    transform: rotate(-15deg);
    z-index: 5;
    top: 14.8%;
    left: 5.5%;
}

.luffy-facescar2 {
    position: absolute;
    background: black;
    width: .2%;
    height: 1.2%;
    border-radius: 50%;
    transform: rotate(-15deg);
    z-index: 5;
    top: 14.4%;
    left: 6.2%;
}


.luffy-mouth {
    position: absolute;
    background: var(--luffy-mouth-color);
    width: 20.7%;
    height: 26%;
    clip-path: polygon(19% 90%, 31% 85%, 37% 73%, 37% 62%, 15% 66%, 15% 73%, 24% 74%, 22% 81%);
    z-index: 3;

}
.luffy-teeth {
    position: absolute;
    background: var(--luffy-teeth-color);
    width: 20.7%;
    height: 26%;
    clip-path: polygon(14% 72%, 13% 67%, 21% 64%, 31% 62%, 35% 58%, 37% 68%, 24% 69%, 34% 71%, 29% 74%, 24% 74%);
    z-index:4;
}

.luffy-tongue {
    position: absolute;
    background: var(--luffy-tongue-color);
    width: 20.7%;
    height: 26%;
    clip-path: polygon(21% 84%, 23% 80%, 27% 77%, 31% 76%, 36% 76%, 33% 81%, 30% 84%);
    z-index: 5
}

.luffy-teeth2 {
    position: absolute;
    background: var(--luffy-teeth-color);
    width: 20.7%;
    height: 26%;
    clip-path: polygon(29% 84%, 18% 85%, 19% 90%, 24% 88%);
    z-index: 4;
}

.luffy-hair {
    position: absolute;
    background: var(--luffy-hair-color);
    width: 21.7%;
    height: 27%;
    clip-path: polygon(54% 88%, 48% 75%, 56% 69%, 59% 62%, 55% 57%, 49% 60%, 47% 67%, 45% 60%, 44% 54%, 39% 49%, 35% 43%, 35% 49%, 29% 45%, 27% 38%, 26% 34%, 21% 36%, 17% 42%, 16% 50%, 11% 51%, 7% 48%, 6% 41%, 11% 38%, 7% 35%, 7% 30%, 10% 24%, 15% 23%, 15% 15%, 20% 13%, 26% 16%, 26% 12%, 23% 8%, 27% 1%, 32% 0%, 30% 6%, 36% 5%, 41% 7%, 46% 3%, 54% 0%, 57% 5%, 62% 5%, 66% 1%, 74% 0%, 78% 4%, 72% 5%, 70% 9%, 71% 16%, 76% 14%, 79% 9%, 90% 17%, 84% 17%, 79% 20%, 79% 25%, 83% 28%, 87% 25%, 90% 20%, 95% 21%, 99% 23%, 96% 26%, 93% 31%, 95% 37%, 95% 43%, 92% 48%, 88% 53%, 91% 57%, 86% 60%, 87% 67%, 84% 73%, 78% 72%, 71% 71%, 71% 75%, 74% 78%, 68% 84%, 60% 82%, 56% 84%);
    z-index: 5;
    right: 79%;
}

.luffy-face {
    position: absolute;
    background: var(--luffy-skin-color);
    width: 22%;
    height: 26%;
    clip-path: polygon(3% 56%, 10% 53%, 13% 42%, 20% 35%, 55% 30%, 33% 44%, 40% 56%, 45% 60%, 46% 65%, 55% 57%, 57% 58%, 59% 62%, 56% 70%, 47% 75%, 39% 85%, 26% 93%, 16% 96%, 13% 90%, 23% 87%, 31% 80%, 35% 71%, 33% 58%, 29% 62%, 8% 68%, 6% 63%);
    z-index: 4;

}

.luffy-neck {
    position: absolute;
    background: var(--luffy-skin-color);
    width: 50%;
    height: 60%;
    clip-path: polygon(59% 43%, 57% 41%, 54% 32%, 45% 41%, 47% 44%, 46% 47%);
    z-index: 4;
}

.luffy-hat {
    position: absolute;
    background: var(--luffy-hat-color);
    width: 50%;
    height: 60%;
    clip-path: polygon(65% 44%, 65% 40%, 65% 36%, 66% 34%, 67% 32%, 70% 31%, 72% 34%, 72% 37%, 72% 39%, 74% 39%, 77% 40%, 79% 42%, 81% 43%, 84% 46%, 85% 50%, 84% 53%, 83% 58%, 81% 61%, 77% 63%, 75% 66%, 74% 74%, 71% 71%, 69% 67%, 68% 60%, 66% 56%);
    z-index: 3;
}
.luffy-hat2{
    position: absolute;
    background: var(--luffy-hat-stripe-color);
    width: 50%;
    height: 60%;
    clip-path: polygon(72% 40%, 75% 47%, 72% 46%);
    z-index: 3;
}

.luffy-rightarm {
    position: absolute;
    background: var(--luffy-skin-color);
    width: 50%;
    height: 60%;
    clip-path: polygon(44% 47%, 29% 48%, 19% 48%, 13% 46%, 8% 42%, 6% 35%, 6% 26%, 9% 14%, 14% 12%, 15% 8%, 14% 7%, 15% 3%, 12% 1%, 9% 0%, 6% 2%, 4% 3%, 2% 5%, 2% 7%, 2% 11%, 3% 14%, 0% 26%, 0% 39%, 3% 47%, 8% 52%, 18% 55%, 34% 57%);
    z-index: 3;
}

.luffy-torso {
    position: absolute;
    background: var(--luffy-skin-color);
    width: 50%;
    height: 60%;
    clip-path: polygon(61% 42%, 43% 47%, 32% 48%, 34% 57%, 34% 71%, 29% 83%, 52% 94%, 61% 74%, 66% 55%);
    z-index: 5;
}
.luffy-torsoscar {
    position: absolute;
    background: var(--luffy-scar-color);
    width: 100%;
    height: 100%;
    clip-path: polygon(38% 74%, 36% 76%, 36% 74%, 32% 79%, 33% 74%, 36% 69%, 36% 65%, 36% 57%, 37% 51%, 38% 59%, 38% 59%, 40% 60%, 41% 59%, 41% 60%, 43% 58%, 43% 60%, 46% 56%, 51% 53%, 53% 52%, 49% 57%, 47% 60%, 44% 64%, 46% 66%, 44% 67%, 46% 68%, 44% 70%, 44% 74%, 45% 87%, 42% 77%, 40% 75%);
    z-index: 6;
}


.luffy-leftarm {
    position: absolute;
    background: var(--luffy-skin-color);
    width: 50%;
    height: 60%;
    clip-path: polygon(60% 42%, 90% 52%, 95% 57%, 96% 61%, 98% 67%, 98% 76%, 99% 85%, 100% 92%, 99% 97%, 98% 98%, 96% 99%, 93% 100%, 90% 100%, 88% 98%, 89% 97%, 86% 95%, 87% 89%, 93% 84%, 93% 79%, 92% 73%, 91% 67%, 88% 59%, 78% 55%, 67% 55%, 63% 56%);
    z-index: 3;
}
.luffy-leftlowerarm {
    position: absolute;
    background: var(--luffy-skin-color);
    width: 50%;
    height: 60%;
    clip-path: polygon(98% 67%, 98% 76%, 99% 85%, 100% 92%, 99% 97%, 98% 98%, 96% 99%, 93% 100%, 90% 100%, 88% 98%, 89% 97%, 86% 95%, 87% 89%, 93% 84%, 93% 79%, 92% 73%, 91% 68%);
    z-index: 5;
}

.luffy-sash {
    position: absolute;
    background: var(--luffy-sash-color);
    width: 86%;
    height: 65%;
    clip-path: polygon(54% 7%, 59% 9%, 63% 12%, 65% 13%, 66% 16%, 67% 16%, 69% 18%, 71% 21%, 72% 25%, 73% 30%, 75% 33%, 76% 36%, 78% 38%, 80% 38%, 83% 35%, 85% 34%, 89% 30%, 96% 30%, 97% 32%, 97% 35%, 100% 35%, 98% 41%, 95% 41%, 92% 40%, 89% 47%, 86% 47%, 79% 49%, 76% 48%, 73% 47%, 70% 39%, 67% 30%, 66% 26%, 58% 17%, 57% 16%, 55% 16%, 52% 14%, 50% 13%);
    z-index: 5;
}

.luffy-leftthigh {
    position: absolute;
    background: var(--luffy-pants-color);
    width: 85.7%;
    height: 60%;
    clip-path: polygon(33% 0%, 37% 0%, 52% 15%, 57% 16%, 66% 26%, 67% 32%, 65% 37%, 61% 43%, 57% 46%, 50% 44%, 42% 41%, 36% 36%, 31% 34%, 31% 30%, 30% 26%, 31% 21%, 30% 16%, 32% 3%);
    z-index: 3;
}

.luffy-leftcalf {
    position: absolute;
    background: var(--luffy-skin-color);
    width: 85.7%;
    height: 60%;
    clip-path: polygon(34% 2%, 31% 2%, 28% 4%, 25% 7%, 24% 12%, 22% 17%, 20% 24%, 18% 31%, 17% 41%, 16% 50%, 15% 53%, 14% 56%, 10% 55%, 6% 49%, 4% 45%, 3% 44%, 2% 46%, 2% 48%, 2% 51%, 3% 53%, 4% 55%, 5% 57%, 6% 60%, 9% 63%, 14% 68%, 15% 72%, 17% 72%, 18% 68%, 19% 57%, 21% 45%, 23% 35%, 28% 18%, 31% 16%, 35% 17%);
    z-index:4;
}

.luffy-leftshoe {
    position: absolute;
    background: var(--luffy-shoe-color);
    width: 85.7%;
    height: 60%;
    clip-path: polygon(15% 82%, 11% 66%, 2% 48%, 1% 49%, 1% 51%, 2% 54%, 5% 60%, 8% 67%, 10% 74%, 12% 80%, 14% 84%);
    z-index: 3;
}

.luffy-leftshoestrap {
    position: absolute;
    background: var(--luffy-shoe-strap);
    width: 85.7%;
    height: 60%;
    clip-path: polygon(8% 65%, 10% 68%, 12% 61%, 12% 56%, 11% 53%, 7% 49%, 6% 49%, 6% 52%, 8% 53%, 9% 58%, 9% 62%);
    z-index: 5;
}
.luffy-leftfoot2 {
    position: absolute;
    background: var(--luffy-skin-color);
    width: 85.7%;
    height: 60%;
    clip-path: polygon(10% 61%, 11% 55%, 9% 53%, 10% 57%);
    z-index: 6;
}

.luffy-rightthigh {
    position: absolute;
    background: var(--luffy-pants-color);
    width: 85.7%;
    height: 60%;
    clip-path: polygon(64% 38%, 50% 43%, 52% 49%, 54% 59%, 57% 68%, 58% 75%, 58% 79%, 59% 83%, 61% 83%, 63% 84%, 64% 83%, 66% 83%, 66% 81%, 68% 80%, 69% 77%, 72% 73%, 73% 66%, 71% 64%, 69% 62%, 66% 54%, 65% 49%, 64% 43%);
    z-index: 3;
}

.luffy-rightcalf {
    position: absolute;
    background: var(--luffy-skin-color);
    width: 85.7%;
    height: 60%;
    clip-path: polygon(66% 81%, 70% 74%, 72% 78%, 74% 81%, 77% 81%, 79% 79%, 86% 72%, 90% 66%, 92% 62%, 94% 63%, 95% 66%, 95% 70%, 95% 75%, 96% 78%, 98% 84%, 98% 87%, 98% 91%, 98% 96%, 97% 99%, 95% 99%, 94% 97%, 93% 94%, 94% 91%, 94% 87%, 93% 84%, 92% 80%, 91% 76%, 88% 77%, 86% 81%, 82% 86%, 78% 90%, 75% 91%, 72% 91%, 69% 88%);
    z-index: 4;
}

.luffy-rightshoe {
    position: absolute;
    background: var(--luffy-shoe-color);
    width: 85.7%;
    height: 60%;
    clip-path: polygon(96% 78%, 96% 68%, 97% 63%, 99% 63%, 100% 69%, 100% 78%, 99% 89%, 98% 99%, 96% 100%);
    z-index: 3;
}

.luffy-rightshoestrap {
    position: absolute;
    background: var(--luffy-shoe-strap);
    width: 85.7%;
    height: 60%;
    clip-path: polygon(98% 78%, 95% 78%, 93% 80%, 92% 83%, 93% 87%, 94% 90%, 95% 92%, 96% 88%, 97% 85%, 98% 82%, 99% 81%);
    z-index: 5;
}

.luffy-rightfoot2 {
    position: absolute;
    background: var(--luffy-skin-color);
    width: 85.7%;
    height: 60%;
    clip-path: polygon(93% 83%, 94% 88%, 95% 84%, 97% 81%, 96% 80%);

    z-index: 6;
}

@keyframes float {
    0% {transform: translateY(0);}
    25% {transform: translateY(-5px);}
    50% {transform: translateY(-10px);}
    75% {transform: translateY(-5px);}
    100% {transform: translateY(0);}
}