:root {
  --primary-color: red;
}
 
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
  padding: 1rem;
}
 #container {
  width: 100%;
  aspect-ratio: 2/3;
  margin: auto;
  border: solid black 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding-bottom: 20px;
}
body {background-color: lightgray;}
h1   {color: blue;}
h2   {color: black; font-size: xx-large;}
h3   {color: black;font-size: x-large;}
h4   {color: blue; font-size: xx-large;}
.tooltip { position: absolute;  display: inline-block;  border-bottom: 1px dotted black;  cursor: pointer;}
.tooltiptext {visibility: hidden;width: 220px;background-color: blue;color: #fff;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;top: 150%;left: 83%;margin-left: -60px;}
.tooltiptext::after {content: "";position: absolute;bottom: 100%;left: 3%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent black transparent;}
.tooltip:hover .tooltiptext {visibility: visible;}
.myDivh1  {  border: 0; position: absolute; height: 20px; top: -10px; left: 120px; }
.myDivh2  {position: absolute; top: 20px; left: 120px; font-size: xx-large;}
.myDivh3  {  position: absolute; top: 60px; left: 120px; }
.myDivh4  { position: absolute; top: -20px; left: 120px; }
.myDivh5  { position: absolute; top: 20px; left: 120px; }
.myDivh6  { position: absolute; top: 80px; left: 10px; height:30px; font-size: x-large;color: blue }
.myDivh6a  { position: absolute; top: 100px; left:10px; font-size: x-large; }
.myDiv3  {  border: 1px outset green;   position: relative;  background-color: lightsteelblue; text-align: left; width: 1070px; height: 280px; top: 10px; left: 10px}
.myDiv4 {  border: 1px outset green;   position: relative;  background-color: lightblue; text-align: center;  width: 1070px;  height: 660px;  top: 10px;  left: 10px }
.myDiv5 {  border: 1px outset green;   position: relative;  background-color: lightgreen; text-align: left; width: 1070px; height: 120px; top: 10px; left: 10px }
.myDiv6 {  position: relative;  top: -50px;  left: 10px; display: grid;  background-color: lightblue;    border: 2px outset gray;  height:105px; width: 950px;}
.myDiv7 {  position: relative; top: -20px; left: 20px; font-size: x-large; width: 900px; height: 20px; text-align: left; display: table-cell; vertical-align: text-top }
.myDiv8 { position: relative; top: 10px; left: 10px; background-color: green; height:90px;  width: 200px;}
.myDiv9 {  position: relative; top: 1px;left: 10px; height:140px; background-color: lightblue; border: 1px outset blue;}
.myDiv9a {  position: absolute; top: 40px;left: 10px; height:40px;} 
.myDivSvitra { position: relative; top: -30px;left: 9px; height:8px; width: 1070px;background-color: blue;}
.Atelef {position: absolute; left: 960px;top: 10px;}
.Atwaze {position: absolute; left: 855px;top: 10px;}
.Geogr { position: absolute;left: 960px;top:170px; }
.mybut { background-color: lightgrey;border: 5px grey solid;position: absolute; width: 122px; height: 100px;top: 170px;text-align: center;font-size: large ;}
.mybutNr {position: absolute;left: 10px; top: 10px;height: 100px;  width:100px;  background-color: #dcd0ff;border: 6px #8B0000 solid;font-size: xx-large;}
.mybut26 {position: absolute;left: 10px; top: 10px;height: 100px;  width:100px;  background-color: lightgray;border: 5px gray solid;font-size: xx-large;}
.mybutIn {position: absolute;left:165px;top: 2px; height: 100px;  width:240px;  background-color: lightgrey;border: 5px grey solid; font-size: large;}

 

.mybutSt {position: absolute;left: 2px;  top: 2px;  height: 100px;  width:122px;  background-color: lightgrey;border: 5px green solid;font-size: x-large;}
.mybutEn1 {position: absolute;left: 852px;top: 2px; height: 100px;  width:96px;  background-color: lightgrey;border: 5px blue solid; font-size: large;}
.mybutStal {position: absolute;left: 2px;top: 170px;height: 100px;  width:122px;  background-color: lightgrey;border: 5px green solid;font-size: large;}
.button7{background: url("atpak1.jpg") no-repeat 0 0; position: absolute;left: 970px; top: 7px; height: 96px; width: 96px; border:0;}
.button7:hover{background: url("atpak1.jpg") no-repeat 0 0 !important;}
.button7:active{background: url("atpak1.jpg") no-repeat -246px 0 !important ;}
 body {background-color: lightgray;}
 
.myDiv3in  {   position: absolute;   text-align: left; width: 1070px; height: 30px; top: 10px; left: 120px}

.mybutpo {position: absolute;height: 80px;  width:100px;  background-color: lightgray;border: 3px #8B0000 solid;font-size: xx-large;}

.button8{background: url("atpak2.jpg") no-repeat 0 0; position: absolute;left: 990px; top: 22px; height: 70px; width: 70px; border:0;}
.button8:hover{background: url("atpak2.jpg") no-repeat 0 0 !important;}
.button8:active{background: url("atpak2.jpg") no-repeat -246px 0 !important ;}

.mybuta {position: absolute;background-color:lightgray;height:70px; width:900px; height:100px;border:4px gray solid;font-size: xx-large}

 

.button9{background: url("ok.jpg") no-repeat 0 0; position: absolute;left: 890px; top: 22px; height: 70px; width: 70px; border:0;}
.button9:hover{background: url("ok.jpg") no-repeat 0 0 !important;}
.button9:active{background: url("ok.jpg") no-repeat -246px 0 !important ;}

 


.butinfo{background: url("info.png") no-repeat 0 0; position: absolute;left: 970px; top: 7px; height: 98px; width: 98px; border:0;}
.butinfo:hover{background: url("info.png") no-repeat 0 0 !important;}
.butinfo:active{background: url("info.png") no-repeat -246px 0 !important ;}