@import 'reset.css';
@import 'layout.css';
@import 'typography.css';
@import 'buttons.css';
@import 'tables.css';
@import 'inputs.css';
@import 'tabs.css';
@import 'load-transitions.css';
@import 'pagination.css';

:root {
    font-size: 18px;
    --text-color: #000;
    --primary-color: #CB0084;
    --secondary-color: #F7D9ED;
    --global-transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    --header-height:160px;
}

body {
    font-family: 'AdelleSans', sans-serif;
    background: #fff;
    font-size: 16px;
}

    body:has(div.layout-container.hexagons) {         
        background-image: 
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="113" viewBox="0 0 100 113"><polygon points="50,0 100,32.5 100,80.6 50,113.1 0,80.6 0,32.5" fill="%23F0DCF035"/></svg>'), 
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="113" viewBox="0 0 100 113"><defs><linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:%23FFD700;stop-opacity:0.1"/><stop offset="50%" style="stop-color:%23CB0084;stop-opacity:0.1"/><stop offset="100%" style="stop-color:%23D54328;stop-opacity:0.1"/></linearGradient></defs><polygon points="50,0 100,32.5 100,80.6 50,113.1 0,80.6 0,32.5" fill="url(%23grad2)"/></svg>'),    
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="113" viewBox="0 0 100 113"><polygon points="50,0 100,32.5 100,80.6 50,113.1 0,80.6 0,32.5" fill="%23F0DCF035"/></svg>'),
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="113" viewBox="0 0 100 113"><polygon points="50,0 100,32.5 100,80.6 50,113.1 0,80.6 0,32.5" fill="%23DFF5F935"/></svg>'),
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="113" viewBox="0 0 100 113"><polygon points="50,0 100,32.5 100,80.6 50,113.1 0,80.6 0,32.5" fill="%23F0DCF035"/></svg>');
        background-repeat: no-repeat;
        animation: float 12s ease-in-out infinite;
        background-size: 
            450px, 
            402px, 
            354px,
            480px,
            860px;
    }

@keyframes float { 
    0% { background-position: 
        calc(var(--container-padding) * 2 - 225px) -50px, 
        100% -50px, 
        40% 20%, 
        calc(var(--container-padding)) 50%, 
        100% 80%; 
    }
    50% { background-position: 
        calc(var(--container-padding) * 2 - 210px) -40px, 
        95% -25px, 
        45% 25%, 
        calc(var(--container-padding) + 15px) 55%, 
        95% 75%; 
    }
    100% { background-position: 
        calc(var(--container-padding) * 2 - 225px) -50px, 
        100% -50px, 
        40% 20%, 
        calc(var(--container-padding)) 50%, 
        100% 80%; 
    }
}

@media (max-width: 640px) {
    body {
        background-image:none;
    }
}

.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

i.svg-icon svg {
    width: var(--width);
}