@import url('https://fonts.googleapis.com/css2?family=Bonheur+Royale&family=Charm:wght@400;700&family=Exo+2:ital,wght@0,100..900;1,100..900&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Tulpen+One&display=swap');
:root {

    --font-default: Roboto Slab, serif;
    --font-heading: 'Philosopher', Sans-serif;
    --font-highlight: 'Charm', cursive;
    --font-note: 'Poppins', Sans-serif;
    --font-accent: inherit;
    --font-code: monospace;
    --font-fantasy: fantasy;

    --size-tiny: 2px;
    --size-small: 5px;
    --size-smaller: 7px;
    --size-default: 10px;
    --size-larger: 15px;
    --size-large: 20px;
    --rel-size-x-s: 20rem;
    --rel-size-small: 24rem;
    --rel-size-medium: 28rem;
    --rel-size-large: 32rem;
    --rel-size-x-l: 36rem;
    --rel-size2-x-l: 42rem;
    --rel-size3-x-l: 48rem;
    --rel-size4-x-l: 56rem;
    --rel-size5-x-l: 64rem;
    --rel-size6-x-l: 72rem;
    --rel-size7-x-l: 80rem;
    --rel-size-full: 100%;
    --rel-size-prose: 65ch;
    --default-color: canvas;
    --default-text-color: canvastext;
    --border-color: lightgray;
    --header-color: #0571ff30;
    --header-text-color: ;
    --accent-color: blue;
    --accent-text-color: white;
    --note-color: #ffffe0;
    --note-text-color: ;
    --warning-color: #FFC107;
    --warning-text-color: darkgray;
    --selection-color: var(--accent-color, highlight);
    --selection-text-color: var(--accent-text-color, highlightText);
    --hover-color: #A0A0A010;
    --hover-text-color: CanvasText;
    --stop-color: red;
    --stop-text-color: white;
    --go-color: green;
    --go-text-color: white;
    --accept-color: blue;
    --accept-text-color: white;
    --reject-color: red;
    --reject-text-color: white;
    --font-size-small: 0.8125em;
    --command-bg-color: #F0F0F0;
    --menu-bg-color: #808080;
    --menu-color: #F0F0F0;
    --link-color: blue;
    --primary-background: #dddddd23;
    --primary-color: gray;
    --primary-accent: #6145a9c9;
    --primary-accent-text: white;
    --primary-surface: #FFFFFFA0;
    --primary-surface-text: gray;
    --secondary-background: #00808050;
    --secondary-color: gray;
    --secondary-accent: #9ec93ca8;
    --secondary-accent-text: white;
    --secondary-surface: #FFFFFFA0;
    --secondary-surface-text: gray;
    --tertiary-background: #cfa55c87;
    --tertiary-color: gray;
    --tertiary-accent: #e17b42cf;
    --tertiary-accent-text: white;
    --tertiary-surface: #FFFFFFA0;
    --tertiary-surface-text: gray;
}

body > [styler-layout=main] {
    padding: 0 !important;
    margin: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

@media (max-width:700px) {
menu-bar>input:first-of-type~nav {
    background-color:#3e8018;  
    padding: 30px;  
}
}

@media (min-width: 701px) {
    menu-item>nav {
        background-color:#3e8018;  
        padding: 30px;  
    }
}

.floating-icons a {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: white;
  text-align: center;
  font-size: 24px;
  line-height: 50px;
  z-index: 9999; /* Very high to stay on top */
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  transition: 0.3s ease-in-out;
}

.facebook-float {
  bottom: 150px;
  right: 20px;
  background-color: #0866FF;
}

.whatsapp-float {
  bottom: 90px;
  right: 20px;
  background-color: #25D366;
}

.instagram-float {
  bottom: 30px;
  right: 20px;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.floating-icons a:hover {
  transform: scale(1.1);
}

menu-bar>input:first-of-type~*{
  gap:3vw;
}