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;

        box-shadow: 0 0 1em rgba(0,0,0,0.7);
    }
    
    body{
        background-color: var(--bodyBoxColor);
        background-image: url('/style/background.png');
    }

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

        width: var(--defaultBoxWhight);

        text-align: center;

        background-color:  var(--vologdaBoxColor);
        border-radius: 2em;
        overflow: hidden;

        box-shadow: 0 0 1em rgba(0,0,0,0.7);
    }

    .vologdaPlace{
        position:relative;
        margin: auto;

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

        text-align: center;

        background-color:  var(--vologdaBoxColor);
        border-radius: 2em;
        overflow: hidden;

        box-shadow: 0 0 1em rgba(0,0,0,0.7);
    }

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

        width: var(--defaultBoxWhight);
        height: 600px;

        text-align: center;

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

        -moz-border-radius: 2em 2em 2em 2em; /* Firefox */
        -webkit-border-radius: 2em 2em 2em 2em; /* Safari, Chrome */
        -khtml-border-radius: 2em 2em 2em 2em; /* KHTML */
        border-radius: 2em 2em 2em 2em; /* CSS3 */

        box-shadow: 0 0 1em rgba(0,0,0,0.7);
    }

    footer{
        position:relative;
		margin: auto;

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

        background-color: var(--headerBoxColor);
        border-radius: 2em;

        text-align: center;
        overflow: hidden;

        box-shadow: 0 0 1em rgba(0,0,0,0.7);
    }
 
    :root {
        --vologdaBoxMargin: 6vw;
        --boxHeight: 3.1vw;

        --defaultBoxWhight: 750px;
        --headFootBoxWhight: 900px;

        --vologdaBoxColor: rgb(177, 250, 250);

        --headerBoxColor:rgb(177, 250, 250);
        --postHeaderBoxColor:rgb(175, 238, 238);
        /* --headerBoxColor:rgb(177, 250, 250); */
        --headerBoxColor:rgb(227, 38, 54);

        --bodyBoxColor:rgb(255, 255, 255);
        /* --postHeaderBoxColor:rgb(175, 238, 238); */
        --postHeaderBoxColor:rgb(173, 32, 43);

        /* 89, 152, 197 */
        /* --bodyBoxColor:rgb(255, 255, 255); */
        /* --bodyBoxColor:rgb(39, 38, 53); */
        /* --bodyBoxColor:rgb(78, 89, 140); */
        /* --bodyBoxColor:rgb(10, 9, 3); */
        --bodyBoxColor:rgb(89, 152, 197);

        /* --vologdaBoxColor: rgb(177, 250, 250); */
        --vologdaBoxColor: rgb(227, 38, 54);
        
    }

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