@import url('https://fonts.googleapis.com/css2?family=Archivo&family=Jersey+10&display=swap');

:root{
    --jersey: "Jersey 10", system-ui;
    --archivo: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    --gradiente: 360deg, rgba(254, 86, 100, 0.72) 0%, rgba(255, 51, 51, 0.9) 100%;
    --borda-neutra: rgba(255, 255, 255, 0.5);
}

@media (prefers-color-scheme: light){
    :root {
        --fundo: #ffffff;
        --texto: #000000;
        --texto-contraste-menor: #676767;
        --texto-fixo-claro: #ffffff;

        --borda-grid: #0000000d;

        --fundo-nav: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 80.41%, #FFFFFF 100%);
        --borda-nav: #f5f5f580;
        --sombra-nav: 0px 4px 16px rgba(32, 32, 32, 0.05);

        --grade: #0000000d;

        --under-control: #0082df;
        --cavalo-vendado: #9500df;
    }
}

@media (prefers-color-scheme: dark){
    :root {
        --fundo: #202020;
        --texto: #ffffff;
        --texto-contraste-menor: #BEBEBE;
        --texto-fixo-claro: #ffffff;

        --borda-grid: #ffffff0d;

        --fundo-nav: linear-gradient(180deg, rgba(32, 32, 32, 0.92) 80.41%, #202020 100%);
        --borda-nav: #1a1a1a80;
        --sombra-nav: 0px 4px 16px rgba(32, 32, 32, 0.05);

        --grade: #ffffff0d;

        --under-control: #40afff;
        --cavalo-vendado: #ca60ff;
    }
}

* {
    font-family: var(--archivo);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: cubic-bezier(0, 1, 1, 1) 150ms;
    color: var(--texto);
}

body,
html {
    width: 100%;
    background-color: var(--fundo);
}

body{
    background-size: 10vw 10vw;
    background-image:
        linear-gradient(to right, var(--grade) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grade) 1px, transparent 1px );
    background-position: 0 3.625rem;
    border-right: 1px solid var(--grade);
    border-bottom: 1px solid var(--grade);
}

h1, h2, p{
    font-weight: 400;
    font-style: normal;
}

a{
    text-decoration-line: none;

    &:hover{
        text-decoration-line: underline;
        text-decoration-style: dashed;
        cursor: pointer;
    }
}

main {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

nav {
    display: flex;
    flex-direction: row;
    width: auto;
    height: auto;
    position: fixed;
    justify-content: space-between;
    left: 7.5vw;

    gap: 1rem;
    padding: 1rem;

    font-size: 1.25rem;

    border: 2px solid var(--borda-nav);
    border-top: none;
    background: var(--fundo-nav);
    box-shadow: var(--sombra-nav);
    border-radius: 0px 0px 0.375rem 0.375rem;

    backdrop-filter: blur(2px);

    img {
        image-rendering: pixelated;
        filter: saturate(0%);
    }

    abbr {
        font-family: var(--jersey);
        text-decoration: none;
    }

    a, p{
        color: var(--texto-contraste-menor);
    }

    a:hover{
        color: var(--texto);
    }
}

header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100vh;
    width: 100%;
    padding: 0% 10%;

    .logo{
        display: flex;
        flex-direction: row;
        gap: 1rem;
        width: auto;
        height: auto;
        align-items: end;

        img{
            width: auto;
            height: 4.2rem;
            image-rendering: pixelated;
        }

        div{
            display: flex;
            flex-direction: column;
            gap: 1rem;

            h1 {
                font-family: var(--jersey);
                font-size: 10rem;
                line-height: 0.535;
            }

            h2{
                font-family: var(--archivo);
                font-size: 1.23rem;
                line-height: 0.75;
                text-transform:uppercase;
            }

            span{
                display: flex;
                flex-direction: row;
            }
        }
    }
}

section{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
    padding: 8% 10%;

    div{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        height: auto;
        width: 46.875%;

        h1{
            font-size: 6rem;
            font-family: var(--jersey);
            line-height: 100%;
        }

        p{
            font-size: 1.75rem;
            font-family: var(--archivo);
            line-height: 120%;
        }
    }

    img{
        border-radius: 0.375rem;
        /*border: 0.5px solid var(--borda-neutra);*/
    }

    &:nth-child(even){
        flex-direction: row-reverse;
    }

    &:last-of-type{
        margin-bottom: 10vw;
    }
}

.contrato {
    position: relative;
    display: block;
    width: 40%;
    aspect-ratio: 1 / 1;

    img {
        position: absolute;
        border: 2px solid #F5F5F5;
        filter: drop-shadow(0px 12px 16px rgba(32, 32, 32, 0.15));
        border-radius: 8px;
        object-fit: cover;
    }

    img:nth-child(1) {
        width: 51.833%;
        height: 73.324%;
        left: 8.691%;
        top: 11.25%;
        transform: rotate(-10deg);
        z-index: 4;
    }
    img:nth-child(2) {
        width: 49.242%;
        height: 69.657%;
        left: 30.109%;
        top: 13.665%;
        transform: rotate(0deg);
        z-index: 3;
    }
    img:nth-child(3) {
        width: 46.65%;
        height: 65.992%;
        left: 40.176%;
        top: 17.639%;
        transform: rotate(5deg);
        z-index: 2;
    }
    img:nth-child(4) {
        width: 44.058%;
        height: 62.325%;
        left: 48.148%;
        top: 23.056%;
        transform: rotate(10deg);
        z-index: 1;
    }
}

.contato{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 10% 0% 10%;
    font-size: 1.75rem;
    border-top: 3px solid var(--borda-neutra);
    background: linear-gradient(var(--gradiente));

    p{
        color: var(--texto-fixo-claro);
    }

    div{
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    img{
        width: 40%;
        height: auto;
    }
}

@media (orientation: portrait){
    body{
        background-size: 25vw 25vw;
    }

    nav{
        z-index: 5;
        width: 100%;
        left: unset;
    }

    header{
        .logo{
            flex-direction: column;
            align-items: center;
            width: 100%;

            img{
                width: 15rem;
                height: auto;
            }

            div{
                gap: 1rem;
                width: 100%;
                align-items: center;

                text-align: center;

                h2{
                    line-height: 1;
                }

                .associacao{
                    font-size: 0.75rem;
                }

                .robot{
                    font-size: 7.25rem;
                }

                span{
                    flex-direction: column;
                    gap: 1rem;
                    width: 100%;
                    align-items: center;

                    h1{
                        display: inline-block;
                        white-space: nowrap;
                        transform-origin: left center;
                    }
                }
            }
        }
    }

    section{
        flex-direction: column;
        padding: 15% 10%;
        gap: 3.3rem;

        &:nth-child(even){
            flex-direction: column-reverse;
        }

        div{
            width: 100%;
            height: auto;

            h1{
                font-size: 3rem;
            }

            p{
                font-size: 1.125rem;
            }
        }

        img{
            width: 100%;
            height: auto;
        }
    }

    .contrato{
        width: 100%;
    }

    footer{
        flex-direction: column;
        padding: 8% 8% 0 8%;
        gap: 1rem;

        p{
            font-size: 1rem;
        }

        img{
            width: 60%;
        }
    }
}