@import '/button.css';
@import '/tools.css';
:root {
    --dark-1: #1e1e1e;
    --dark-1-rgb: 30, 30, 30;
    --dark-2: #262626;
    --dark-2-rgb: 38, 38, 38;
    --dark-3: #434343;
    --dark-3-rgb: 67, 67, 67;
    --dark-4: #858585;
    --dark-4-rgb: 133, 133, 133;
    --red-1: #c63636;
    --red-1-rgb: 198, 54, 54;
    --red-2: #ac2f2f;
    --red-2-rgb: 172, 47, 47;
    --red-3: #8e2424;
    --red-3-rgb: 142, 36, 36;
    --white-1: #ffffff;
    --white-1-rgb: 255, 255, 255;
    --white-2: #eaeaea;
    --white-2-rgb: 234, 234, 234;
    --white-3: #dbdbdb;
    --white-3-rgb: 219, 219, 219;
    --green-dark-1: #226D2D;
    --green-dark-1-rgb: 34, 109, 45;
    --green-dark-2: #267a33;
    --green-dark-2-rgb: 38, 122, 51;
    --green-dark-3: #2B8C3A;
    --green-dark-3-rgb: 43, 140, 58;
    --green-dark-4: #36B249;
    --green-dark-4-rgb: 54, 178, 73;
    --orange-dark-1: #f06715;
    --orange-dark-1-rgb: 240, 103, 21;
    --yellow-0: #FFD61F;
    --yellow-0-rgb: 255, 214, 31;
    --yellow-1: #ffcf00;
    --yellow-1-rgb: 255, 207, 0;
    --yellow-2: #F5C800;
    --yellow-2-rgb: 245, 200, 0;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');



body {
    min-height: 100vh;
    position: relative;
    margin: 0;
    color: #d9d9d9;
    background-color: var(--dark-1);
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-style: normal;
    overflow-y: auto;
    box-sizing: border-box;
    background-image: url('https://creeper.pl/img/bg.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
body.popup-open {
    overflow: hidden;
}
.logo img {
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45));
}
a.box:hover {
    color: #2f933f;
}
.address {
    margin-top:30%;
    text-align: center;
}
.page {
    width: 1500px;
    margin:0 auto
}

.box-border-dashed-red {
    background: var(--dark-2);
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    border: 1px dashed var(--red-3);
}

.box-green {
    background: var(--dark-2);
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    border: 1px solid rgba(var(--green-dark-2-rgb), 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-hover {
    background: var(--dark-2);
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    width: auto;
    position: relative;
    border: 2px solid rgba(var(--dark-3-rgb), 0.3);
    display: flex;
    -webkit-transition: border 300ms ease-out;
    -moz-transition: border 300ms ease-out;
    -o-transition: border 300ms ease-out;
}
.box-hover:hover,
a.box-hover:hover {
    border: 2px solid rgba(var(--green-dark-2-rgb), 1);
}



.item-row {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.page-title {
    font-size: 48px;
    font-weight: bold;
}
.header-main {
    width: 1200px;
    margin: 0 auto;
}

.product-item {}
.product-item-title {
    font-size: 22px;
    font-weight: bold;
}
.product-item-price {
    font-size: 24px;

}
.heder-ip {
    display: flex;
    grid-gap: 10px;

}
.icon {
    width:48px;
    display:flex;
    justify-content:center;
    align-items:center;

}
.icon i {
    color: #fff;
    font-size: 18px;
}


.postac {
    animation: floatY 4s ease-in-out infinite;
    will-change: transform;
}

@keyframes floatY {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-32px);
    }
}