@import "reset.less";
@import "functions.less";


#menu-cn {
    .fx();
    .grid(1fr; 2px; stretch);
    position: fixed;
    width: 110px;
    height: 100vh; 
    top: 0;
    left: 0;
    background: ~"@{cor1}88";
    z-index: 90;
    padding-top: 100px;
    padding-bottom: 10px;
    box-shadow: 0 5px 5px #000;
    transform: translateX(-200px);
    &.visible {
        transform: translateX(0px);
    }
    a {
        display: block;
        padding: 0 20px;
        color: #FFF;
        cursor: pointer;
        &:hover {
            background: @cor1;
        }
        &.active {
            color: #FF0;
        }
    }
}

#paralax {
    h3 {
        color: white;
        font-size: 25px;
    }

    .divider {
        background: #1231;
        .container {
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: auto;
            text-align: center;
            padding: 20px 150px;
        }
    }
    .ruler {
        background: #000A;
        height: 100%;
        width: 100%;
        color: white;
        .container {
            display: grid;
            align-items: center;
            justify-content: center;
            min-height: 70vh;
            text-align: center;
            padding: 0 200px;

            .logo-cn {
                margin: 0 auto 30px auto;
                display: block;
                background-color: white;
                padding: 20px;
                max-height: 150px;
                height: 100%;
            }
            p {
                font-size: 1.3rem;
                text-align: justify;
            }
            a.site {
                .botao(#D04);
                margin-top: 20px;
            }
        } 
    }
    .cn {
        background-attachment: fixed;
        background-size: cover; /* Para cobrir toda a área */
        min-height: 70vh;
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
}

@media screen {
    @media ( max-width: 1000px ){
        #paralax {
            .divider {
                .container {
                    padding: 20px 20px 20px 120px;
                    font-size: 1.7rem;
                }
            }
            .ruler {
                .container {
                    padding: 0 20px 0 120px;
                    p {
                        font-size: 1.1rem;
                    }
                }
            }
        }
    }
    @media ( max-width: 650px ){
        #menu-cn {
            font-size: .85em;
            width: 65px;
            a {
                padding: 8px;
                font-family: universe;
            }
        }
        #paralax {
            .divider {
                .container {
                    padding: 20px 20px 20px 75px;
                    font-size: 1.5rem;
                    text-align: left;
                }
            }
            .ruler {
                .container {
                    padding: 0 20px 0 75px;
                    min-height: 100vh;
                    height: 100%;
                    .logo-cn {
                        max-height: 110px;
                    }
                    p {
                        font-size: 1rem;
                        text-align: left;
                    }
                }
            }
        }
    }
}