html {
        scroll-behavior: smooth;
    }
    
    header{
        margin: auto;
        left: 0;
        top: 10%;
 
        z-index: 2;
        width: var(--headFootBoxWhight);
        background-color: var(--headerBoxColor);

        border-radius: 2vw;
        overflow: hidden;
    }
    
    body{
        background-color: var(--bodyBoxColor);
    }

    .vologdaDescription{
        position:relative;
        margin: auto;
        margin-top: 3vw;

        width: var(--defaultBoxWhight);

        text-align: center;

        background-color:  var(--vologdaBoxColor);
        border-radius: 1vw;
        overflow: hidden;
    }

    .vologdaPlace{
        position:relative;
        margin: auto;

        width: var(--defaultBoxWhight);
        margin-top: 6vw;
        height: 25%;

        text-align: center;

        background-color:  var(--vologdaBoxColor);
        border-radius: 1vw;
        overflow: hidden;
    }

    .vologdaMap{
        position:relative;
        margin: auto;
        margin-top: var(--vologdaBoxMargin);

        width: var(--defaultBoxWhight);
        height: 30vw;

        text-align: center;

        background-color:  var(--vologdaBoxColor);
        overflow: hidden;

        -moz-border-radius: 1vw 1vw 1vw 1vw; /* Firefox */
        -webkit-border-radius: 1vw 1vw 1vw 1vw; /* Safari, Chrome */
        -khtml-border-radius: 1vw 1vw 1vw 1vw; /* KHTML */
        border-radius: 1vw 1vw 1vw 1vw; /* CSS3 */
    }

    footer{
        position:relative;
		margin: auto;

        margin-top: calc(var(--boxHeight) * 1.5);
        width: var(--headFootBoxWhight);

        background-color: var(--headerBoxColor);
        border-radius: 1vw;

        text-align: center;
        overflow: hidden;
    }
 
    :root {
        --headerBoxColor:rgb(177, 250, 250);
        --postHeaderBoxColor:rgb(175, 238, 238);

        --bodyBoxColor:rgb(255, 255, 255);

        --vologdaBoxMargin: 6vw;
        --vologdaBoxColor: rgb(177, 250, 250);

        --boxHeight: 3.1vw;

        --defaultBoxWhight: 600px;
        --headFootBoxWhight: 900px;
    }

    @media (max-width: 1100px) {
        :root {
            --defaultBoxWhight: 60%;
            --headFootBoxWhight: 90%;
        }
    }

    @media (max-width: 920px) {
        :root {
            --defaultBoxWhight: 75%;
            --headFootBoxWhight: 90%;
        }
    }