html { scroll-behavior: smooth; } header{ margin: auto; left: 0; 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'); 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); } .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: 950px; --headerBoxColor:rgb(173, 32, 43); --bodyBoxColor:rgb(255, 255, 255); --vologdaBoxColor: rgb(173, 32, 43); } @media (max-width: 1100px) { :root { --defaultBoxWhight: 90%; --headFootBoxWhight: 95%; } }