@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

        body, html {
            height: 100%;
            margin: 0;
            font-family: "Lexend", serif;
            overflow: hidden;
            background:#000000;
        }

        .slider {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            animation: fadeSlider 20s infinite;
            z-index: 1;
            background:#000000;
        }

        @keyframes fadeSlider {
            0%, 100% {
                background: url('../images/arborranettr_hosting_img_02.webp') no-repeat center center/cover;
                opacity: 1;
            }
            33% {
                background: url('../images/arborranettr_hosting_img_03.webp') no-repeat center center/cover;
                opacity: 0.9;
            }
            66% {
                background: url('../images/arborranettr_hosting_img_05.webp') no-repeat center center/cover;
                opacity: 1;
            }
        }

        .logo {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 3;
            width:200px;
        }


        .menu {
            position: absolute;
            bottom: 30px;
            left: 20px;
            z-index: 3;
            display: flex;
            gap: 15px;
        }

        .menu a {
            color: white;
            text-decoration: none;
        }

        .menu a:not(:last-child)::after {
            content: '•';
            margin-left: 10px;
            margin-right: 10px;
            color: white;
        }

        .text-area {
            position: absolute;
            right: 20px;
            bottom: 14px;
            color: #ffffff;
            z-index: 3;
        }
        
        @media (max-width: 768px) { 
            .text-area {
                display: none;
            }
            .logo {
                left: 50%;
                transform: translateX(-50%);
            }
            .menu {
                left: 50%;
                transform: translateX(-50%);
                justify-content: center;
                width:100%;
                gap: 10px;
                font-size:11px;
    }
        }