:root {
    --background-color: #F1F1EE;
    --background-color-transparent: #f1f1eec5;
    --text-color-light: #81877C;
    --text-color-lighter: #91998F;
    --text-color-heavy: #484C46;
    --border-color: #707070;
    --accent-color: #C8C6BB67;
    --very-light-color: #C8C6BB;
}

html {
    font-size: 1px;
}

/* macOS devices, starting from 12 inch macbook */
@media only screen and (max-device-width: 1800px) and (orientation: landscape) {
    html {
        font-size: 0.75px;
    }
}

/* mobile */
@media only screen and (min-resolution: 2dppx) and (pointer:none), 
       only screen and (min-resolution: 2dppx) and (pointer:coarse) {
    html {
        font-size: 2px;
    }
}

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

img {
    margin: 0;
    padding: 0;
}

.regular-text, .regular-bold-text, .button, .button span {
    margin: 0;
    padding: 0;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    font-size: 18rem;
    line-height: 22rem;
    font-family: "century-gothic";
    letter-spacing: 0rem;
    color: var(--text-color-light);
    font-stretch: normal;
}

.regular-bold-text, .button {
    font-weight: 700;
}

.title-text, .title-text-xxl, .title-text-minor {
    margin: 0;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    font-family: "haboro-contrast-normal", sans-serif;
    color: var(--text-color-heavy);
    font-stretch: normal;
}

.title-text-xxl {
    font-size: 70rem;
}

.title-text {
    font-size: 40rem;
}

.title-text-minor {
    color: var(--text-color-light);
    font-size: 40rem;
}

.button {
    display: inline-block;
    border: 2rem solid var(--text-color-light);
    border-radius: 24rem;
    padding: 11rem 22rem;
    text-transform: uppercase;
    transition: 0.2s ease;
}

a, .arrow-button, .button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
a:focus, .arrow-button:focus, .button:focus {
    outline: none !important;
}

.button span {
    text-transform: uppercase;
    transition: 0.2s ease;
}

.button:hover {
    background-color: var(--text-color-light);
    color: var(--background-color);
    transition: 0.2s ease;
}

.button:hover span {
    color: var(--background-color);
    transition: 0.2s ease;
}

article .button {
    margin-top: 24rem;
}

:target:before {
    content: "";
    display: block;
    height: 168rem;
    margin: -168rem 0 0;
}

.arrow-button {
    border: 2rem solid var(--text-color-heavy);
    border-radius: 25rem;
    display: inline-block;
    width: 46rem;
    height: 46rem;

    transition: 0.2s ease;
}

.arrow-button svg {
    display: block;
    width: 80%;
    height: 80%;
    margin-left: 10%;
    margin-top: 10%;
}

.arrow-button .line {
    fill: var(--text-color-heavy);

    transition: 0.2s ease;
}

.arrow-button:hover {
    fill: var(--background-color);
    background-color: var(--text-color-heavy);

    transition: 0.2s ease;
}

.arrow-button:hover .line {
    fill: var(--background-color);

    transition: 0.2s ease;
}

.arrow-button-light {
    border-color: var(--text-color-light);
}

.arrow-button-light .line {
    fill: var(--text-color-light);
}

.arrow-button-light:hover {
    background-color: var(--text-color-light);
}

@media (max-device-width: 960px) {
    .title-text-xxl {
        font-size: 35rem;
        line-height: 45rem;
    }
}








body {
    margin: 0;
    padding: 0;
    opacity: 1;
    text-align: center;
    background-color: var(--background-color);
}

header, main, footer {
    display: block;
    width: 1920rem;
    margin: 0 auto;
    text-align: center;
    background-color: var(--background-color);
}

main::before {
    content: '';
    display: block;
    height: 168rem;
}

section {
    display: block;
    text-align: left;
}

header {
    z-index: 99;
    position: fixed;
    width: 100%;
    height: 168rem;
    top: 0;
    background-color: var(--background-color);
}

header section {
    display: inline-block;
    position: relative;
    width: 1640rem;
    height: 168rem;
}

header .logo {
    margin-top: 44rem;
    position: absolute;
    left: 0;
    display: inline-block;
    width: 211rem;
    height: 89rem;
    background-image: url(../assets/logo.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

header .logo span {
    display: none;
}

header nav {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

header nav li {
    display: inline-block;
}

header nav li a {
    vertical-align: middle;
    display: inline-block;
    text-transform: uppercase;
    transition: 0.2s ease;
}

header nav li a:hover {
    opacity: 0.8;
    transition: 0.2s ease;
}

header nav span {
    display: none;
}

header nav #facebook-link a {
    background-image: url(../assets/facebook.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 16rem;
    height: 28rem;
    margin-right: 33rem;
}

header nav #instagram-link a {
    background-image: url(../assets/instagram.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 32rem;
    height: 32rem;
    margin-right: 36rem;
}

header nav #projects-link a {
    margin-right: 44rem;
}

header nav #etsy-link-mobile {
    display: none;
}

@media (max-device-width: 960px) {
    header, main, footer {
        width: 100vw;
        margin: 0;
    }

    header {
        height: 125rem;
    }

    header section {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 125rem;
    }

    header .logo {
        margin-top: 34rem;
        margin-left: 41rem;
        height: 125rem;

        width: 154rem;
        height: 65rem;
    }

    main::before {
        content: '';
        display: block;
        height: 125rem;
    }

    #projects::before {
        height: 152rem;
    }

    header nav {
        position: absolute;
        margin: 0;
        right: 0;
        top: 67rem;
        transform: none;
    }

    header nav #etsy-link {
        display: none;
    }

    header nav #etsy-link-mobile {
        display: inline-block;
    }

    header nav #etsy-link-mobile a {
        background-image: url(../assets/etsy.png);
        background-repeat: no-repeat;
        background-size: 100%;
        width: 24rem;
        height: 24rem;
        margin-right: 15rem;
    }

    header nav #facebook-link a {
        width: 12rem;
        height: 23rem;
        margin-right: 15rem;
    }

    header nav #instagram-link a {
        width: 28rem;
        height: 28rem;
        margin-right: 36rem;
    }

    header nav #projects-link {
        text-align: right;
        position: absolute;
        right: 36rem;
        margin: 0;
        padding: 0;
        top: -34rem;
    }

    header nav #projects-link a {
        margin: 0;
    }

    header nav #projects-link:after {
        content: "";
        display: block;
        position: absolute;
        right: -36rem;
        top: 9rem;
        width: 28rem;
        height: 2rem;
        background-color: var(--border-color);
    }

    header nav .regular-text, 
    header nav .regular-bold-text {
        font-size: 18rem;
        line-height: 21rem;
    }
}








footer {
    width: 1640rem;
    height: 44rem;
    margin-top: 175rem;
    margin-bottom: 38rem;
    position: relative;
    border-top: 2rem solid var(--border-color);
}

footer li {
    margin-top: 20rem;
    position: absolute;
    display: inline-block;
}

footer .left {
    left: 0;
}

footer .right {
    right: 0;
}

@media (max-device-width: 960px) {
    footer {
        width: calc(100vw - 72rem);
        margin-left: 36rem;
        margin-top: 95rem;
    }
}






#landing {
    position: relative;
    text-align: left;
}

#landing article {
    margin-top: 366rem;
    margin-left: 140rem;
    display: inline-block;
    text-align: left;
    width: 717rem;
}

#landing h1 {
    margin-bottom: 41rem;
}

#landing p {
    width: 549rem;
}

#landing-furniture {
    position: absolute;
    top: 0;
    left: 968rem;
    display: block;
    width: 952rem;
}

#landing-stamp {
    position: absolute;
    top: 66rem;
    left: 842rem;
    display: block;
    width: 242rem;
    height: 242rem;
    animation: spin 60s linear infinite;
}

#landing-fantasy {
    position: absolute;
    top: 673rem;
    right: calc(-49.5vw + 960rem);
    width: calc(615rem + 49.5vw - 960rem);
    height: 393rem;
    border: 2rem solid white;
    border-right: none;
    border-top-left-radius: 200rem;
    border-bottom-left-radius: 200rem;
}

@keyframes spin { 
    100% {
        transform: rotate(-360deg); 
    }
}

@media (max-device-width: 960px) {
    #landing {
        margin-top: 12rem;
    }

    #landing-furniture {
        left: 0;
        top: 0;
        width: 100vw;
        height: 104.6vw; /* aspect ratio of that image */
    }

    #landing-stamp {
        width: 200rem;
        height: 200rem;

        top: 80rem;
        left: -100rem;
    }

    #landing-fantasy {
        display: none;
    }

    #landing article {
        margin: 0;
        margin-top: calc(104.6vw + 24rem);
        width: 100vw;
    }

    #landing h1 {
        margin-bottom: 24rem;
        margin-left: 32rem;
    }

    #landing p {
        margin-left: 36rem;
        width: calc(100% - 72rem);
    }

    #landing .button {
        margin-top: 36rem;
        margin-left: 36rem;
    }
}









#introduction {
    position: relative;
    margin-top: 200rem;
}

#introduction article {
    position: relative;
    z-index: 2;
}

#introduction-about, #introduction-portrait {
    display: inline-block;
}

#introduction-portrait {
    margin-left: 278rem;
    width: 536rem;
}

#introduction-about {
    vertical-align: top;
    margin-left: 154rem;
    margin-top: 304rem;
    width: 549rem;
}

#introduction-about h2 {
    margin-bottom: 29rem;
}

#introduction-backdrop {
    display: block;
    position: absolute;
    z-index: 1;
    width: 1088rem;
    height: 510rem;
    left: 554rem;
    top: 192rem;
    background-color: var(--accent-color);
}

#introduction-fantasy {
    position: absolute;
    top: 108rem;
    left: calc(-49.5vw + 960rem);
    width: calc(737rem + 49.5vw - 960rem);
    height: 393rem;
    border: 2rem solid white;
    border-left: none;
    border-top-right-radius: 200rem;
    border-bottom-right-radius: 200rem;
    z-index: 3;
}

@media (max-device-width: 960px) {
    #introduction {
        margin-top: 53rem;
    }

    #introduction-portrait {
        display: block;
        width: calc(100vw - 72rem);
        margin-left: 36rem;
    }

    #introduction-fantasy {
        top: 25rem;
        left: 0;
        width: calc(100vw - 72rem);
        height: 60vw;
    }

    #introduction-backdrop {
        display: none;
    }

    #introduction-about {
        position: relative;
        width: 100vw;
        margin: 0;
        padding: 0;
        padding-top: 36rem;
        background-color: var(--accent-color);
    }

    #introduction-about::after {
        content: 'wazup';
        display: block;
        position: absolute;
        background-color: var(--accent-color);
        width: 100vw;
        height: 95rem;
        left: 0;
        top: -95rem;
        z-index: -1;
    }

    #introduction-about h2, #introduction-about p {
        width: calc(100vw - 72rem);
        margin: 0;
        margin-left: 36rem;
        margin-bottom: 21rem;
    }

    #introduction-about .button {
        margin: 0;
        margin-left: 36rem;
        margin-top: 15rem;
        margin-bottom: 45rem;
    }

    #introduction-about .button {
        margin: 0;
        margin-left: 36rem;
        margin-top: 15rem;
        margin-bottom: 45rem;
        background-color: var(--text-color-light);
        color: var(--background-color)
    }
}







#showcase {
    text-align: left;
    margin-top: 257rem;
    margin-left: 140rem;
}

#showcase-furniture, #showcase-latest-piece, #showcase-furniture-mobile {
    vertical-align: top;
    display: inline-block;
}

#showcase-furniture-mobile {
    display: none;
}

#showcase-furniture, #showcase-furniture-mobile {
    text-align: right;
    width: 572rem;
}

#showcase-furniture img, #showcase-furniture-mobile img {
    width: 100%;
}

#showcase-furniture .button, #showcase-furniture-mobile .button {
    margin-top: 29rem;
}



#showcase-latest-piece {
    position: relative;
    width: 690rem;
    margin-left: 240rem;
}

#showcase-latest-piece img {
    width: 100%;
}

#showcase-latest-piece-title {
    position: absolute;
    top: 252rem;
    right: -368rem;
    display: block;
    transform-origin: center;
    transform: rotate(90deg);
    height: 83rem;
    width: 586rem;
}

#showcase-latest-piece-name {
    text-align: right;
    position: absolute;
    bottom: 0;
    width: 337rem;
    left: -380rem;
}

#showcase-latest-piece-name .arrow-button {
    margin-bottom: 18rem;
}

@media (max-device-width: 960px) {
    #showcase {
        width: 100vw;
        margin: 0;
    }

    #showcase-latest-piece {
        width: 100vw;
        margin: 0;
        margin-top: 64rem;
    }

    #showcase-latest-piece img {
        width: 60vw;
        margin-left: 36rem;
    }

    #showcase-latest-piece-title {
        font-size: 35rem;
        font-weight: lighter;
        transform-origin: center;
        display: block;
        height: 83rem;
        line-height: 83rem;
        margin: 0;
        padding: 0;
        text-align: left;
        width: 100vw;
        left: calc(10vw + 78rem);
        top: calc(50vw - 40rem);
    }

    #showcase-latest-piece-name {
        margin-top: 10rem;
        margin-bottom: 0;
        position: initial;
    }

    #showcase-latest-piece-name h3 {
        width: 60vw;
        font-size: 30rem;
        margin-left: 36rem;
    }

    #showcase-latest-piece-name .arrow-button {
        position: absolute;
        right: calc(20vw - 20rem);
        margin-top: 10rem;
    }



    #showcase-furniture-mobile {
        display: inline-block;
        margin: 0;
        margin-top: 51rem;
        width: calc(100vw - 36rem);
        margin-right: 36rem;
    }

    #showcase-furniture {
        display: none;
    }
}





#contact h2 {
    width: 812rem;
    margin-left: 416rem;
    margin-top: 221rem;
    margin-bottom: 29rem;
}

#contact p {
    width: 629rem;
    margin-left: 416rem;
    margin-bottom: 40rem;
}

#contact-social-media-links {
    margin-left: 416rem;
}

#contact .social-media-link {
    display: inline-block;
}

#contact .social-media-link img {
    width: 127rem;
    height: 147rem;
}

#contact .social-media-link:first-child {
    margin-right: 55rem;
}

#contact a {
    transition: 0.2s ease;
}

#contact a:hover {
    opacity: 0.8;

    transition: 0.2s ease;
}

@media (max-device-width: 960px) {
    #contact {
        margin-bottom: 0;
    }

    #contact h2, #contact p {
        width: calc(100vw - 72rem);
        margin: 0;
        margin-left: 36rem;
    }

    #contact p {
        font-size: 18rem;
        line-height: 22rem;
    }

    #contact h2 { 
        margin-top: 90rem;
        margin-bottom: 18rem;
    }

    #contact-social-media-links {
        width: calc(100vw - 72rem);
        text-align: left;
        margin-top: 40rem;
        margin-left: 36rem;
    }

    #contact .social-media-link {
        margin: 0;
    }
}





.projects-item {
    display: block;
    position: relative;
}

#projects .projects-item .title-mobile {
    display: none;
}

.projects-item p, .projects-item img {
    vertical-align: top;
    display: inline-block;
}

.projects-item p {
    position: relative;
}

.projects-item .regular-text {
    text-transform: uppercase;
    word-spacing: initial;
    letter-spacing: 1.5rem;
}

.projects-item p .arrow-button  {
    position: absolute;
    display: block;
}

.projects-item .index-number {
    position: absolute;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    font-family: "quiche-sans", sans-serif;
    font-stretch: normal;
    font-size: 90rem;
    letter-spacing: 8rem;
    color: var(--text-color-heavy);
}

.projects-item:before {
    display: none;
    width: 0;
    height: 0;
}



#item-1 {
    margin-top: 142rem;
}

#item-1 p {
    margin-top: 148rem;
    margin-left: 342rem;
    width: 171rem;
    text-align: right;
    word-spacing: 171rem;
}

#item-1 p .arrow-button {
    right: 0;
    margin-top: 14rem;
}

#item-1 img {
    margin-left: 40rem;
    width: 813rem;
}

#item-1 .index-number {
    left: 495rem;
    top: 617rem;

    transform: rotate(-90deg);
}



#item-2 img {
    margin-left: 143rem;
    width: 671rem;
}

#item-2 p {
    position: absolute;
    bottom: 0;
    padding-top: 70rem;
    margin-left: 33rem;
    width: 337rem;
    word-spacing: 337rem;
}

#item-2 p .arrow-button {
    top: 0;
}

#item-2 .index-number {
    left: 190rem;
    top: 410rem;
}



#item-3 {
    margin-top: 131rem;
    height: 630rem;
}

#item-3 p {
    margin-left: 727rem;
    width: 337rem;

    text-align: right;
}

#item-3 p .arrow-button {
    right: 0;
    margin-top: 22rem;
}

#item-3 img {
    margin-left: 44rem;
    width: 632rem;
}

#item-3 .index-number {
    right: 122rem;
    top: 610rem;

    transform: rotate(-90deg);
}



#item-4 {
    margin-top: 84rem;
}

#item-4 p {
    margin-left: 31rem;

    width: 337rem;
    word-spacing: 337rem;
}

#item-4 p .arrow-button {
    margin-top: 19rem;
}

#item-4 img {
    margin-left: 416rem;
    width: 851rem;
    height: 568rem;
}

#item-4 .index-number {
    left: 364rem;
    top: 412rem;

    transform: rotate(-90deg);
}

@media (max-device-width: 960px) {
    #projects .projects-item {
        position: relative;
        margin: 0;
        margin-bottom: 65rem;
        padding: 0;
        left: 0;
        right: 0;
        top: 0;
        width: calc(100vw - 94rem);
        height: auto;
    }

    #projects .projects-item .title-desktop {
        display: none;
    }

    #projects .projects-item .title-mobile {
        display: block;
    }

    #projects .projects-item article {
        margin: 0;
        width: 100%;
        margin-left: 94rem;
    }

    #projects .projects-item img {
        width: 100%;
        margin: 0;
    }

    #projects .projects-item p {
        position: initial;
        text-align: left;
        word-spacing: initial;
        width: 100%;
        margin: 0;
        margin-top: 12rem;
        font-size: 30rem;
        line-height: 40rem;
        padding: 0;
        top: initial;
        bottom: initial;
        left: initial;
        right: initial;
    }

    .projects-item .regular-text {
        margin-top: 10rem;
        display: block;
    }

    #projects .projects-item .arrow-button {
        position: initial;
        margin: 0;
        padding: 0;
        margin-top: 12rem;
    }

    #projects .projects-item .index-number {
        width: 87rem;
        text-align: right;
        margin: 0;
        right: initial;
        left: initial;
        top: -26rem;
        right: -58rem;
    
        transform: none;

        font-size: 45rem;
        line-height: 52rem;
        letter-spacing: 5rem;
    }
}






#nav-projects {
    z-index: 99;
    text-align: left;
    position: sticky;
    left: 75rem;
    bottom: 75rem;
    width: 50rem;
}

#nav-projects div {
    position: absolute;
    bottom: 0;
}

#nav-projects p {
    text-transform: uppercase;
    cursor: default;
    position: relative;
    top: 20rem;
    height: 50rem;
    line-height: 50rem;
    transform-origin: top left;
    transform: rotate(-90deg);
}

#nav-projects-line {
    display: block;
    height: 44rem;
    width: 0;
    border: 1rem solid var(--very-light-color);
    margin-bottom: 40rem;
    margin-left: 24rem;
}

#nav-projects .arrow-button {
    transform-origin: center;
    transform: rotate(180deg);
}

#nav-projects li a {
    display: block;
    cursor: pointer;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    font-family: "quiche-sans", sans-serif;
    font-stretch: normal;
    font-size: 30rem;
    line-height: 50rem;
    width: 50rem;
    text-align: center;
    letter-spacing: 3rem;
    color: var(--very-light-color);

    transition: 0.2s ease;
}

#nav-projects li a.active {
    color: var(--text-color-heavy);
}

#nav-projects li a:hover {
    color: var(--text-color-heavy);

    transition: 0.2s ease;
}

@media (max-device-width: 960px) {
    #nav-projects {
        width: 40rem;
        margin: 0;
        left: 0;
        margin-left: 18rem;
        bottom: 18rem;
    }

    #nav-projects p {
        font-size: 18rem;
        height: 40rem;
        line-height: 40rem;
        top: 10rem;
    }

    #nav-projects-line {
        margin-left: 19rem;
        margin-bottom: 20rem;
    }

    #nav-projects li a {
        width: 40rem;
        font-size: 20rem;
        letter-spacing: 1rem;
    }
}




#item-description #item-description-mobile {
    display: none;
}

#item-description .right {
    display: inline-block;
    width: 812rem;
    margin-left: 65rem;
}

#item-description .left {
    display: inline-block;
    width: 763rem;
    margin-left: 140rem;
}

#item-description article, #item-description div {
    vertical-align: top;
    display: inline-block;
}

#item-description article {
    margin-top: 202rem;
    margin-left: 138rem;
    margin-bottom: 289rem;
}

#item-description h2 {
    margin-bottom: 27rem;
}

#item-description p {
    width: 533rem;
    height: 144rem;
}

#item-description img {
    display: block;
    width: 100%;
    margin-bottom: 65rem;
}

#item-description img:last-child {
    margin-bottom: 0;
}

#item-description .video, #item-description video {
    display: inline-block;
    background-color: var(--very-light-color);
    width: 812rem;
    height: 812rem;
    margin-bottom: 65rem;
}

#item-description .back {
    width: 812rem;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    height: 50rem;
    margin: 0;
    padding: 0;
    margin-top: 65rem;
}

#item-description .back .arrow-button {
    transform-origin: center;
    transform: rotate(180deg);
}

#item-description .back p {
    width: auto;
    margin-left: 16rem;
    vertical-align: top;
    display: inline-block;
    line-height: 50rem;
    height: 50rem;
    color: var(--text-color-heavy);
}

@media (max-device-width: 960px) {
    #item-detail #nav-projects {
        display: none;
    }

    #item-detail .right, #item-detail .left {
        display: none;
    }

    #item-description #item-description-mobile {
        display: block;
    }

    #item-description {
        width: 100vw;
        margin: 0;
        padding: 0;
    }

    #item-description-mobile {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #item-description-mobile .video, #item-description-mobile video {
        width: calc(100% - 72rem);
        height: calc(100vw - 72rem);
        margin: 0;
        margin-left: 36rem;
        margin-bottom: 34rem;
    }

    #item-description-mobile img {
        width: calc(100% - 72rem);
        margin: 0;
        margin-left: 36rem;
        margin-bottom: 30rem;
    }

    #item-description-mobile img:first-child, #item-description-mobile video:first-child {
        width: 100%;
        height: initial;
        margin-left: 0;
        margin-bottom: 34rem;
    }

    #item-description-mobile article {
        width: calc(100% - 72rem);
        margin: 0;
        margin-left: 36rem;
    }

    #item-description-mobile h2 {
        font-size: 35rem;
        line-height: 45rem;
        margin-bottom: 24rem;
    }

    #item-description-mobile p {
        width: 100%;
        height: auto;
        margin: 0;
        margin-bottom: 44rem;
    }

    #item-description-mobile .back {
        width: 100%;
        text-align: center;
        display: inline-block;
        vertical-align: top;
        padding: 0;
        height: 50rem;
        margin: 0;
        padding: 0;
        margin-top: 65rem;
    }
}