/* Stil' dlya header h1 */
header h1 {
    border: solid 1px revert; /* Obozhdenie */
    padding: 3%; /* Razryv ot teksta do ogranicheniya */
    margin: 10px;
    border-radius: 60px;
    width: 70%;
    background-color: pink;
    letter-spacing: 0.1cm;
    font-variant: small-caps;
    text-align: left; /* Tekst v header budet nakhodytsya sleva */
}
h3{
    border-radius: 10px;
    margin: 0px;
    border: solid 1px revert;
    padding: 0%;
    background-color: pink;
    width: 20%;
}



/* Menu (ul) */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: saddlebrown;
    text-align: center; /* Otsentriruem menu */
}

/* Stil' dlya kazhdogo elementa v menu (li) */
li {
    float: left;
    display: block;
    text-align: center;
    padding: 10px;
}

/* Stil' dlya ssylok (a) */
li a {
    text-decoration: none;
    color: pink;
    padding: 10px;
    border-radius: 5px; /* Okruglenie uglov knopok */
    transition: background-color 0.3s, color 0.3s; /* Animatsiya pri izmenenii */
}

/* Efekt pri navedenii myshi na ssylku (hover) */
li a:hover {
    background-color: rosybrown;
    color: white; /* Tsvet teksta pri hover */
}

/* Efekt pri nazhatii na ssylku (active) */
li a:active {
    background-color: #d4a6a6; /* Tsvet knopki pri nazhatii */
    color: white; /* Belyy tsvet teksta pri active */
}

/* Stil' dlya footer */
footer {
    text-align: center;
    margin: auto;
    background-color: rosybrown;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    color: white; /* Tsvet teksta v footer */
}

/* Stil' dlya sektsii */
section {
    text-align: left; /* Tekst budet sleva */
    margin: auto;
    background-color: pink;
    position: absolute; /* Sektsiya otvechaet za nastrojku raspolozheniya */
    top: 30%; /* Ustanovka otstupa ot verkhnego kraja */
    left: 0%; /* Sektsiya nachinayetsya s leva */
    width: 40%; /* Sektsiya budet zanyat' 80% ot shiriny */
    border-radius: 10px;
    padding: 20px;
}

/* Stil' dlya zagolovka v sektsii */
section h2 {
    margin: auto;
    padding: 10px;
    text-align: center;
    background-color: rosybrown;
    color: saddlebrown;
}

/* Efekt pri navedenii myshi na sektsiyu (hover) */
section:hover {
    background-color: #f3b9b9; /* Svetlyy tsvet sektsii pri hover */
}

/* Stil' dlya knopok v kontentnykh zonyakh */
button {
    background-color: pink; /* Tsvet knopki */
    color: white; /* Tsvet teksta na knopke */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    display: block; /* Knopka budet nakhodytsya na novoy stroke */
    margin: 20px auto; /* Otsentriruem knopku po otnosheniyu k sektsii */
}

/* Efekt pri navedenii myshi na knopku */
button:hover {
    background-color: rosybrown;
    transform: scale(1.1); /* Uvelichivaem knopku pri hover */
}

/* Efekt pri nazhatii na knopku */
button:active {
    background-color: saddlebrown;
    transform: scale(1); /* Vozvrashchaem knopku v original'nye razmery pri nazhatii */
}

zadania {
    text-align: left; /* Tekst budet sleva */
    margin: auto;
    background-color: pink;
    position: absolute; /* Sektsiya otvechaet za nastrojku raspolozheniya */
    top: 30%; /* Ustanovka otstupa ot verkhnego kraja */
    left: 0%; /* Sektsiya nachinayetsya s leva */
    width: 40%; /* Sektsiya budet zanyat' 80% ot shiriny */
    border-radius: 10px;
    padding: 20px;
}

article{
    text-align: left;
    border: 5px solid saddlebrown;
    border-radius: 20px;
    margin-bottom: 50px;
    width: 50%;
    background-color: pink;


}