body {
    @import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
}

html {
    scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.nav_link_container {
    background-color: #e9e9e9;
    width: 40px;
    height: 40px;
    border-radius: 12px;

    display: flex;
    justify-content: center;
    align-items: center;

    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    transition: all 0.2s ease-in-out;
}

.link_social_icon {
    width: 24px;
    height: 24px;

    /* filter: invert(0%) sepia(2%) saturate(1397%) hue-rotate(14deg) brightness(91%) contrast(100%); */
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    transition: all 0.2s ease-in-out;
}

#svg_icon_tapteek {
    fill: black;
}

#svg_icon_social {
    fill: black;
}

nav a .link_social_icon:is(:hover, :focus) {
    /* filter: invert(100%) sepia(4%) saturate(1155%) hue-rotate(182deg)
        brightness(121%) contrast(100%);
    transition: all 0.2s ease-in-out; */
}

nav a:hover .social_icon {
    //background-color: #0077b5;
    /* filter: invert(100%) sepia(4%) saturate(1155%) hue-rotate(182deg)
        brightness(121%) contrast(100%);
    transition: all 0.2s ease-in-out; */
    background-color: black;
    transition: all 0.2s ease-in-out;

    #svg_icon_social {
        fill: white;
        transition: all 0.2s ease-in-out;
    }
}

.balsamic_font {
    font-family: 'Balsamiq Sans', sans-serif;
    font-weight: 700;
    font-style: normal;
}

.video_container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
    height: 0;
    overflow: hidden;
}

.video_container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}