:root {
    --color-primary: #50786E;
    --color-secondary: #F0FAEF;
    --color-text: #1F4551;
    --color-accent: #B8DA50;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: var(--bs-gray-300);
    --gray-400: var(--bs-gray-400);
    --gray-500: var(--bs-gray-500);
    --gray-600: var(--bs-gray-600);
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --bs-secondary: red;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5 {
    font-family: "Young Serif", Sans-serif;
}

.logo {
    max-height:4rem;
}
.animal-icon {
    cursor: pointer;
}
.animal-icon .animal-icon__border {
    fill: transparent;
    transition: all 0.4s;
}
.animal-icon--selected .animal-icon__border, 
.animal-icon.animal-icon--selected:hover .animal-icon__border {
    fill: var(--color-primary);
}

.animal-icon:hover .animal-icon__border {
    fill: var(--color-secondary);
}



.animal-icon .animal-icon__image {
    fill: var(--color-primary);
}