/*----------------------------------*/
/*         GENERAL STYLESHEET       */
/*----------------------------------*/

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body { 
    font-family: 'Open Sans';
    background-color: #f1f5f4;
    color: #171328;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Montserrat;
    font-weight: bold;
}

.nav-link { color: #171328; }
.nav-link:hover { color: #ce4d6b; }

/* colors */
.my-bg-primary { background-color: #f1f5f4; }
.my-bg-secondary { background-color: #FDFDFD; }
.my-bg-accent-one { background-color: #3b6355; }
.my-bg-accent-two { background-color: #4a446e; }
.my-color-light { color: #FDFDFD; }
.my-color-dark { color: #171328; }

* { scrollbar-color: #dc809c #FFFFFF; }

.my-link:link, .my-link:visited { color: #bd3554; }
.my-link:hover, .my-link:active { color: #f16982; }

.my-color-light .my-link:link, .my-color-light .my-link:visited { color: #f790a3; }
.my-color-light .my-link:hover, .my-color-light .my-link:active { color: #e8476f; }


/*----------------------------------*/
/*         GENERAL STYLESHEET       */
/*----------------------------------*/

/*----------------------------------*/
/*              FOOTER              */
/*----------------------------------*/
.my-footer-icons { 
    font-size: 1.3em;
}

.my-footer-icons a:link, .my-footer-icons a:visited {
    color: #171328;
}
.my-footer-icons a:hover, .my-footer-icons a:active {
    color: #ce4d6b;
}

@media (max-width: 576px) {
    .my-footer {
        font-size: 0.85em;
    }
}





.my-floating {
    position: relative;
    animation: float 5s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

.popout {
    transition: transform 0.3s ease-in-out;
}
.popout:hover {
    transform: scale(1.03) rotate(3deg);
}

@media (max-width: 576px) {
    .my-floating {
        animation: none;
    }
    .popout {
        transition: none;
    }
    .popout:hover {
        transform: none;
    }
    
}