html {
        scroll-behavior: smooth;
    }
    
    .buttonTop {
        place-self:end;
        position:sticky;
        bottom:1vw;
        margin-top:100vh;
        margin-left: 85%;

        text-decoration: none;
        padding: 1vw;
        background:  var(--vologdaBoxColor);
        border-radius: 2vw;

        z-index: 2;
    }

    header{
        margin: auto;
        left: 0;
 
        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');
        backdrop-filter: blur(2px);
    }

    .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);
    }

    .vologdaHistoryButton{
        position:relative;
        margin: auto;
        margin-top: 1vw;

        text-align: center;

        width: calc(var(--defaultBoxWhight) / 4);

        background-color:  var(--vologdaBoxColor);
        border-radius: 1em;
        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);
    }

    .button-background{
        position:relative;
        margin: auto;

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

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

        text-align: center;
        overflow: hidden;

        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);
    }
    
    img{
        max-width:100%;
        max-height:100%;
    }

    :root {
        --vologdaBoxMargin: 6vw;
        --boxHeight: 3.1vw;

        --defaultBoxWhight: 750px;
        --headFootBoxWhight: 950px;

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

        --postHeaderBoxColor:rgb(175, 238, 238);
 
        --headerBoxColor:rgb(173, 32, 43);
        --bodyBoxColor:rgb(255, 255, 255);
        --vologdaBoxColor: rgb(173, 32, 43);
    }

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

        .buttonTop {
            Display: none;
        }
    }

    @media (max-width: 800px) {
        .vologdaHistoryButton{
            Display: none;
        }
    }