body {
    max-width: 100vw;
}

@media screen and (max-width: 500px) {
    main {
        background-image: url('/imgs/background-small.png');
        height: 100vh;
        background-repeat: no-repeat;
        background-size: contain;
        background-position-y: bottom;
    }
}

@media screen and (min-width: 500px) and (max-width: 1300px) {
    main {
        background-image: url('/imgs/background-large-new.png');
        height: 100vh;
        background-repeat: no-repeat;
        background-size: contain;
        background-position-y: bottom;
    }
}


@media screen and (max-width: 1300px) {
    body {
        background-color: #fff;
        font-family: 'Phudu', sans-serif;
    }

    a {
        text-decoration: none;
    }

    footer {
        height: 100vh;
    }

    footer h2 {
        color: #ff6600;
    }

    footer a {
        color: #111;
    }

    footer a:hover {
        color: #ff6600;
        transition: 100ms linear;
    }

    .main-buttons {
        background-color: rgba(167, 167, 167, 0.4);
        border-radius: 10px;
        border: none;
        color: #161616;
        font-weight: bold;
    }

    .main-buttons:hover {
        background-color: rgba(26, 26, 26, 0.9);
        color: #ff6600;
        transition: 200ms linear;
    }

    .bg-orange {
        background-color: #ff6600;
    }

    .sections {
        background-color: black;
    }

    .sections-part {
        min-height: 100vh;
        color: #eee;
    }

    .sections-part h2 {
        color: #ff6600;
        font-size: 3rem;
    }

    .sections-projects {
        background-color: black;
    }

    .sections-projects img {
        max-width: 100%;
        border-radius: 1rem;
    }

    .sections-bio img {
        height: 100vh;
    }

    .sections-part a {
        color: #eee;
    }

    .sections-part a:hover {
        color: #ff6600;
        transition: 200ms linear;
    }

    .sections-part-vinhetas h3 {
        margin-left: 0;
        padding-left: 0;
    }

    .sections-part-vinhetas {
        margin-top: 6rem;
    }

    .dummy-for-rule {
        display: none;
    }

    .bg-black {
        background-color: back;
    }

    .vinhetas {
        order: 2;
    }

    .project-type-vinhetas {
        order: 1;
    }

    .sections-bio {
        background-color: black;
    }
}

@media screen and (min-width: 1300px) {
    main {
        background-image: url('/imgs/background-large-new.png');
        height: 100vh;
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: -50px;
    }

    body {
        background-color: #fff;
        font-family: 'Phudu', sans-serif;
    }

    a {
        text-decoration: none;
    }

    footer {
        height: 100vh;
    }

    footer h2 {
        color: #ff6600;
    }

    footer a {
        color: #111;
    }

    footer a:hover {
        color: #ff6600;
        transition: 100ms linear;
    }

    .main-buttons {
        background-color: rgba(167, 167, 167, 0.4);
        border-radius: 10px;
        border: none;
        color: #161616;
        font-weight: bold;
    }

    .main-buttons:hover {
        background-color: rgba(26, 26, 26, 0.9);
        color: #ff6600;
        transition: 200ms linear;
    }

    .bg-orange {
        background-color: #ff6600;
    }

    .sections {
        background-color: black;
    }

    .sections-part {
        min-height: 100vh;
        color: #eee;
    }

    .sections-part h2 {
        color: #ff6600;
        font-size: 4rem;
    }

    .sections-part-vinhetas img {
        width: 100%;
        border-radius: 1rem;
    }

    .sections-projects {
        background-color: black;
    }

    .sections-projects img {
        max-width: 100%;
        height: 75%;
        border-radius: 1rem;
    }

    .sections-projects .img-vinhetas {
        max-width: auto;
        height: auto;
        background-image: contain;
    }

    .sections-bio {
        background-color: black;
    }

    .sections-bio img {
        height: 100vh;
    }

    .sections-part a {
        color: #eee;
    }

    .sections-part a:hover {
        color: #ff6600;
        transition: 200ms linear;
    }

    .project-type-curtas {
        transform: rotate(180deg);
        /* border-left: #eee 3px solid; */
        writing-mode: vertical-rl;
    }

    .project-type-vinhetas {
        writing-mode: vertical-rl;
    }

    .sections-part-curtas h3 {
        margin-left: 0;
        padding-left: 0;
    }

    .sections-part-vinhetas h3 {
        margin-left: 0;
        padding-left: 0;
    }

    .sections-part-vinhetas {
        margin-top: 6rem;
    }

    .dummy-for-rule {
        width: 3px;
        height: 100%;
        margin-right: 2px;
        background-color: #eee;
    }

    .bg-black {
        background-color: back;
    }
}