/*Шрифты для заголовков*/
:root {
    --font1: "Yanone Kaffeesatz", sans-serif;
    --font2: "Days One", sans-serif;
    --font3: "Montserrat", sans-serif;
    --color1: #1d1e96;
    --color2: #8d8dd4;
    --color3: #c8c8f8;
    --color4: #ffd3a0;
}

h1, h2, h3, h4 {
    font-family: var(--font3);
    font-weight: 500;
}

.header {
    background-color: var(--color1);
    color: white;
    text-align: center;
    height: 60px;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.adres {
    background-color: var(--color2);
    color: #1d1e96;
    text-align: center;
    height: auto;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.anons {
    background-color: var(--color3);
    color: #1d1e96;
    text-align: center;
    height: auto;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.how {
    height: auto;
}

.opisanie {
    height: auto;
    background-color: var(--color4);
}

.more {
    height: auto;
    background-color: #ffd3a0;
}

body {
    margin: 0;
    padding: 0;
}

.osnblock {
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
}

.blockosnastki {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.osnastka {
    height: 200px;
    width: 200px;
    margin: 20px;
    border-radius: 10%;
    border: 3px solid #8d8dd4;
    box-shadow: 3px 3px 10px #808080;
    position: relative;
    transition: 0.3s ease;
}

    .osnastka:hover {
        transform: scale(1.05);
        transition: 0.3s ease;
    }

.osn1::before, .osn2::before, .osn3::before {
    content: "";
    position: absolute;
    top: 75%;
    left: 27%;
    text-align: center;
    margin: 0 auto;
    font-size: 40px;
    color: crimson;
    font-weight: 900;
    text-shadow: 3px 3px 5px white, 3px 3px 5px white, 3px 3px 5px white;
    font-family: var(--font1);
}

.osn1::before {
    content: "850 руб.";
}

.osn2::before {
    content: "950 руб.";
}

.osn3::before {
    content: "750 руб.";
}

.osn1 {
    background-image: url("./image/ideal-46042.jpg");
    background-position: 50% 10%;
    background-repeat: no-repeat;
}

.osn2 {
    background-image: url("./image/colop-mouse.jpg");
    background-position: top;
    background-repeat: no-repeat;
}

.osn3 {
    background-image: url("./image/poluavtomat_s_gerbom.jpg");
    background-position: top;
    background-repeat: no-repeat;
}

.osn1, osn2, osn3 {
}

    .osn1::after, .osn2::after, .osn3::after {
        content: "";
        position: absolute;
        top: 110%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 20px;
        color: #1d1e96;
        font-weight: 900;
        text-align: center;
        font-family: var(--font1);
    }

    .osn1::after {
        content: "Комплект №1 \A Автоматическая печать \A Ideal 46042";
        white-space: pre;
    }

.osn2::after {
    content: "Комплект №2 \A Карманная печать \A Colop Mouse";
    white-space: pre;
}

.osn3::after {
    content: "Комплект №3 \A Карманная печать \A со встроенной подушкой";
    white-space: pre;
}

.blockottisks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 40px;
}

.ottisk {
    height: 200px;
    width: 200px;
    margin: 20px;
    background-size: 100%;
    border-radius: 50%;
    /*    border: 3px solid #8d8dd4;*/
}

.ott1 {
    background-image: url("./image/IP.jpg");
    /*    background-position: 50% 10%;*/
    background-repeat: no-repeat;
}

.ott2 {
    background-image: url("./image/OOO.jpg");
    /*    background-position: 50% 10%;*/
    background-repeat: no-repeat;
}

.more {
    background-color: var(--color1);
    color: white;
}

a {
    color: inherit; /* Наследует цвет родителя */
    text-decoration: none; /* Убирает подчеркивание */
}

.actual_date {
    font-family: var(--font3);
    text-align: center;
    color: crimson;
    font-weight: 500;
}

.button1 {
    background-color: var(--color2);
    padding: 0px 15px;
    border-radius: 5px;
    height: auto;
    margin: 10px;
    /*    box-shadow: 3px 3px 10px #808080;*/
}

.qr-code {
    width: 792px;
    height: 478px;
    background-image: url('image.php');
    background-repeat: no-repeat;
    border: 1px solid #000000;
    margin:10px auto;
}