@import url("reset.css");

@font-face {
    font-family: 'Hangyaboly';
    src: url(../fonts/Hangyaboly.woff) format('woff'),
         url(../fonts/Hangyaboly.woff2) format('woff2');
    font-style: normal;
    font-display: swap;
}

.wrapper {
    min-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Hangyaboly';
}

.content {
    max-width: 1180px;
    margin:  0 auto;
    flex: 1 1 auto;
    /* flex-grow: 1; */
}

.header-container {
    display: flex;
    font-size: 18px;
    justify-content: space-between;
    padding: 20px 5px;
}

.header_logo {
    padding: 0 30px;
}

.logo {
    transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
}

.logo:hover {
    transform: scale(1.3);
    opacity: 0.9;
    filter: drop-shadow(0px 4px 6px rgba(29, 19, 217, 0.449));
}

.logo:active {
    transform: scale(0.95);
    opacity: 0.7;
    filter: drop-shadow(0px 2px 4px rgba(29, 19, 217, 0.3));
}

.menu_list {
    display: flex;
}

.menu_list-item {
    line-height: 20px;
    padding: 0 30px;
}

.menu_list-link {
    position: relative;
    color: black;
    transition: color 0.4s ease;
}

.menu_list-link::after  {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: blue;
    transition: width 0.3s ease, transform 0.3s ease;
    transform: translateX(-50%);
}

.menu_list-item:hover .menu_list-link {
    color: blue; 
}

.menu_list-item:hover .menu_list-link::after {
    width: 100%;
    text-shadow: yellow 4px -1px 3px;
}

.menu_list-item:active .menu_list-link::after {
    box-shadow: 0px 2px 5px rgba(246, 254, 2, 0.722); 
}

.menu_list-link:active {
    text-shadow: yellow 4px -1px 3px;
}

.menu_btn {
    display: none;
    background-color: transparent;
    border: none;
    transition: color 0.3s ease;
}

.main-container {
    margin-top: 15vh;
}
.main-animation {
    width: 799px;
}

.front-pic {
    background-image: url('../img/infant_main.png');
    width: 100%;
    height: 336px;
    background-size: cover;
    background-position: center;
}

.front-pic_mobile {
    display: none;
    background-image: url('../img/main-pic-mob.png');
    width: 100%;
    height: 280px;
    background-size: cover;
    background-position: center;
}

.footer-container {
    display: flex;
    justify-content: center;
    height: 18px;
    margin-bottom: 36px;
}

@media (max-width: 1025px) {
    .menu_btn {
        display: flex;
    }
    .menu_btn.active {
        color: white;
    }    
    .menu_btn,
    .header_logo {
        position: relative;
        z-index: 10;
    }
    .menu_list {
        position: absolute;
        z-index: 5;
        background-color: rgba(0, 0, 0, 0.762);
        flex-direction: column;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        align-items: center;
        padding-top: 200px;
        height: 100vh;
        line-height: 10vh ;
        font-size: 48px;
        transform: translateY(-100%);
        transition: transform 120ms ease;
    }
    .menu_list.menu_list--active {
        transform: translateY(0%);

    }
    .menu_list-item {
        line-height: 33px;
        padding: 30px 30px;
    }   
    .menu_list-link {
        color: white;
    }
    .menu.menu_list--active.btn_menu {
        color: white;
        }
    }

@media (max-width: 820px) {
    .front-pic {
        display: none;
    }
    .front-pic_mobile {
        display: block;
    }
    .main-animation {
        width: 387px;
    }
}