html { scroll-behavior: smooth; } header{ margin: auto; left: 0; top: 10%; z-index: 2; width: 70%; background-color: var(--headerBoxColor); border-radius: 2vw; overflow: hidden; } body{ background-color: var(--bodyBoxColor); } .vologdaDescription{ position:relative; margin: auto; margin-top: 6vw; width: var(--blockSize); text-align: center; background-color: var(--vologdaBoxColor); border-radius: 1vw; overflow: hidden; } .vologdaPlace{ position:relative; margin: auto; width: var(--blockSize); 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(--blockSize); 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: 70%; } .prevFooter{ height: calc(var(--boxHeight) * 0.4); border-top-right-radius: 1vw; border-top-left-radius: 1vw; background-color: var(--postHeaderBoxColor); } .postFooter{ border-bottom-right-radius: 1vw; border-bottom-left-radius: 1vw; background-color: var(--headerBoxColor); text-align: center; overflow: hidden; } :root { --headerBoxColor:rgb(177, 250, 250); --postHeaderBoxColor:rgb(175, 238, 238); --bodyBoxColor:rgb(255, 255, 255); --vologdaBoxMargin: 6vw; --blockSize: 50vw; --vologdaBoxColor: rgb(177, 250, 250); --boxHeight: 3.1vw; }