:root {

    --dred: #C00707;
    --dorange: #FF4400;
    --dyellow: #FFB33F;
    --dblue: #2D61A6;
    --dh3: chocolate;
    --dh4: darkred;
    --ddsky1: #ACD7F2;
    --dgreen: darkgreen;
}

.clr {
    color: #2D61A6, #85BFF2, #ACD7F2, #F2DABD, #BF463B, chocolate, darkred
}


* {

    font-family: Arial, Helvetica, sans-serif;
    color: #303030;
}

body {
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 0;
}

/* Header */


header {
    width: auto;
}

main {
    flex: 1 0 auto;
    padding: 1rem;
}

/* Footer прижат к низу */
footer {
    flex-shrink: 0;
    padding: 5px;
    margin: 0;
    font-size: 1.1rem;
}

p {
    text-indent: 3rem;
    margin: 6px 0;
}

figcaption {
    font-weight: bold;
}

.acaption {
    display: block;
    font-size: 1.17em;
    font-weight: bold;
    color: black;
    margin: 10px auto 4px auto;
}

.acaption:visited {
    color: black;
}

.acaption:hover {
    color: var(--dorange);
}

h1 {
    margin: 0 4px;
    padding: 4px 0;
    color: white;
}

h2 {
    margin: 6px auto 4px auto;
    color: var(--dblue);
}

h3 {
    color: var(--dh3);
}

h4 {

    color: var(--dh4);
}

h3,
h4 {
    margin: 5px auto 3px auto;
}

.ablack {
    color: black;
}

.ablack:hover {
    color: red;
}

.ablack:visited {
    color: black;
}

main {
    display: block;
    margin: auto;
}



label {
    display: block
}

    nav {
        display: flex;
        gap: 8px;
        padding-bottom: 10px;
        font-size: 120%;

    }

@media (max-width: 767px) {
    body {
        padding: 0;
        margin: 0;
    }

    nav {
        display: flex;
        margin-left: 3em;
        justify-items: start;
        flex-direction: column;
    }

    main {
        width: 94vw;
    }

    figure {
        margin-left: 0;
    }

    img.big {
        width: 94vw;

    }
}

header {
    text-align: left;
}

@media (min-width: 768px) {

    header {
        text-align: center;
    }

    nav {
        display: flex;
        justify-content: center;
        flex-direction: row;
    }

    main {
        max-width: 1000px
    }

    
}