@import url(./normalize.css);
@import url(./fonts.css);
@import url(./variables.css);
@import url(./header.css);
@import url(./products.css);

body {
    background: var(--background);
    width: 100%;
    min-height: 101vh;
    font-family: actay-r;
    font-weight: 500;
    font-size: 16px;
    animation: show_page .5s ease forwards; 
    user-select: none;
}

body.active {
    overflow: hidden;
}

.wrapper {
    margin: 0 auto;
    width: 1140px;
}

a {
    color: var(--color-text)
}

.menu_background {
    display: none;
}

@keyframes show_page {
    0% {opacity: 0}
    60% {opacity: 0}
    100% {opacity: 1}
}

@media (max-width: 1199px) {
    .wrapper {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .menu_background {
        display: block;
        background-color: rgba(0, 0, 0, .6);
        width: 100%;
        height: 101vh;
        position: fixed;
        top: 0;
        left: -100%;
        z-index: 5;
        transition: left .3s ease;
    }

    body.active .menu_background {
        left: 0;
    }
}

@media (max-width: 575px) {
    .menu_background {
        display: none;
    }
}

@media (max-width: 319px) {
    body {
        font-size: 14px;
    }
}