* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Roboto", sans-serif;
        }

        html,
        body {
            position: fixed;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        body {
            background-color: #d4d8d4;
            user-select: none;
            -webkit-user-select: none;
            pointer-events: none;
        }

        button,
        a {
            user-select: none;
        }

        button,
        a,
        div,
        span {
            -webkit-tap-highlight-color: transparent;
        }

        .account,
        .contact,
        .close {
            pointer-events: auto;
            -webkit-tap-highlight-color: transparent;
        }

        .account {
            position: fixed;
            top: 10px;
            right: 10px;
            cursor: pointer;
        }

        .account i {
            font-size: 32px;
            color: #e7e7e7;
            text-shadow:
                0px 0px 5px #afafaf30,
                0px 0px 10px #b1b1b130,
                0px 0px 15px #94949429;
        }

        .account i:hover {
            color: #7dbd2b;
        }

        .contact {
            position: fixed;
            bottom: 10px;
            right: 20px;
            cursor: pointer;
        }

        .contact i {
            font-size: 32px;
            color: #e1e1e1;
            text-shadow:
                0px 0px 5px #afafaf40,
                0px 0px 10px #b1b1b140,
                0px 0px 15px #94949440;
        }

        .contact i:hover {
            color: #7dbd2b;
        }

        .icons-hidden {
            opacity: 0;
            transform: translateY(-10px);
            pointer-events: none;
        }

        .since {
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.7rem;
            color: #50505064;
        }

        @media (hover: hover) and (pointer: fine) {
            .logo-highlight {
                display: block;
            }

            .logo {
                margin-top: -3vw;
            }
        }

        @media (hover: none),
        (pointer: coarse) {
            .logo-highlight {
                display: none;
            }

            .logo {
                margin-top: -15vw;
            }
        }

        .logo {
            position: relative;
            width: 85vw;
            max-width: 450px;
            aspect-ratio: 550 / 115;
        }

        .logo svg {
            filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.2));
        }

        .logo-highlight svg * {
            fill: #7dbd2b !important;
            stroke: #7dbd2b !important;
        }

        .logo-highlight {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            pointer-events: none;
            --mouse-y: 0px;
            --range: 10px;
        }

        .logo-highlight {
            --mouse-x: 10px;
            --range: 15px;
            --fade: 90px;

            mask-image: linear-gradient(to right,
                    transparent calc(var(--mouse-x) - var(--range) - var(--fade)),
                    #7dbd2b30 calc(var(--mouse-x) - var(--range)),
                    black calc(var(--mouse-x)),
                    black calc(var(--mouse-x) + var(--range)),
                    #7dbd2b30 calc(var(--mouse-x) + var(--range)),
                    transparent calc(var(--mouse-x) + var(--range) + var(--fade)));

            -webkit-mask-image: linear-gradient(to right,
                    transparent calc(var(--mouse-x) - var(--range) - var(--fade)),
                    #7dbd2b30 calc(var(--mouse-x) - var(--range)),
                    black calc(var(--mouse-x)),
                    black calc(var(--mouse-x) + var(--range)),
                    #7dbd2b30 calc(var(--mouse-x) + var(--range)),
                    transparent calc(var(--mouse-x) + var(--range) + var(--fade)));
        }

        .logo-highlight {
            transition: mask-position 0.05s linear;
        }

        .logo-highlight,
        .logo-base {
            position: absolute;
            inset: 0;
        }

        .logo-base {
            position: relative;
        }

        .logo-highlight svg * {
            fill: none !important;
            stroke: #7dbd2b !important;
        }

        .viewport {
            display: flex;
            width: 300vw;
            height: 100dvh;
            transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);

            transform: translateX(-100vw);
        }

        .panel {
            width: 100vw;
            height: 100dvh;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .close {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
            color: #666;
        }

        .close:hover {
            color: #7dbd2b;
        }


        .form-box {
            display: flex;
            flex-direction: column;
            gap: 14px;
            width: 80dvw;
            opacity: 0;
            transform: translateY(20px);
            transition:
                opacity 0.2s linear,
                transform 0.2s ease;
            text-align: center;
        }

        #formLogin .form-box {
            max-width: 300px
        }

        #formContato .form-box {
            max-width: 480px
        }

        .form-box input,
        .form-box textarea {
            height: 48px;
            border-radius: 12px;
            border: 1px solid #ffffff90;
            padding: 0 16px;
            font-size: 15px;
            background: transparent;
            transition: 0.2s ease;
        }

        .form-box input:focus,
        .form-box textarea:focus {
            outline: none;
            border-color: #7dbd2b;
            box-shadow: 0 0 0 3px rgba(26, 227, 0, 0.15);
            background-color: white;

            color: #4a6f19;
        }

        .form-box textarea {
            padding-top: 10px;
        }

        .form-box input::placeholder,
        .form-box textarea::placeholder {
            color: #4a6f195f;
        }

        .form-box button {
            height: 48px;
            border-radius: 12px;
            border: none;
            font-size: 15px;
            font-weight: 500;
            background: #7dbd2b;
            color: #fff;
            cursor: pointer;
            transition: 0.2s ease;
        }

        .links a {
            font-size: 13px;
            color: #4a6f19;
            text-decoration: none;
        }

        form button.error {
            background-color: #dc3545;
            border-color: #dc3545;
            color: #fff;
        }

        @keyframes shake {
            0% {
                transform: translateX(0);
            }

            20% {
                transform: translateX(-6px);
            }

            40% {
                transform: translateX(6px);
            }

            60% {
                transform: translateX(-6px);
            }

            80% {
                transform: translateX(6px);
            }

            100% {
                transform: translateX(0);
            }
        }

        form button.shake {
            animation: shake 0.4s ease;
        }

        .fade-collapse {
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transform: translateY(-10px);
            transition: all 0.4s ease;
        }

        .fade-expand {
            opacity: 1;
            max-height: 80px;
            transform: translateY(0);
            transition: all 0.4s ease;
        }