:root {
  --oldPaperClr:#E9E9E0;
  --hdrBgcl:#203a4fbf;
  --navClr:rgba(32, 58, 79, 0.935);
  --brdClr:#e0e9e6;
  --fntColor:rgba(233, 233, 224, 0.885);
  --dimenSocIc: 30px;
  --clrHeader:rgba(45,69,88,0.5);/*#2D4558;*/
  --clrFooter:rgba(32, 58, 79, 0.852);;
  --clrHeadFoot:#536673;
  --BGNDClrBody: rgba(11, 19, 26, 0.729);
  --bgClrHover:#2ded0bc4;/*#2ded0b;/*#f5ab20;*/
}

*{
  margin: 0;padding: 0;
  box-sizing: border-box;
  font-family: 'Cuprum';
  list-style: none;
  text-decoration: none;
}

body{
  height: 100vh;
  background-color:var(--BGNDClrBody);
  justify-content: center;
}

#wrapped{
   width: max(462px,70vw);  
   height: 1280px;
   background: var(--oldPaperClr);
   margin:0 auto;
}

#head1{
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  height: 110px;
  display: flex; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color:var( --navClr);
  border: 1px solid var(--oldPaperClr);
}

h1{
  display: flexbox;
 color:#f5ab20cc;/*var(--bgClrHover);*/
 text-shadow: 0 4px 4px rgba(0, 0, 0, 1), -6px 8px 5.3px rgba(32, 58, 79, 1);
 font-family: 'Play'; /*'Lumberjack''Merriweather';*/
 font-weight: 300;
 font-size: 1.8rem;
 text-align: center;
 top: 10px;
}
h4{
  display: flexbox;
 color:var(--navClr);
 /* text-shadow: 0 4px 4px rgba(0, 0, 0, 1), -6px 8px 5.3px rgba(32, 58, 79, 1); */
 font-family: 'Play'; /*'Lumberjack''Merriweather';*/
 font-weight: 300;
 font-size: 1.1rem;
 text-align: center;
 margin-top: 15px;
}

header{
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8%;
  background-color:var(--navClr);
  border-left: 1px solid var(--oldPaperClr);
  border-right: 1px solid var(--oldPaperClr);
  border-bottom: 1px solid var(--oldPaperClr);
  box-shadow: 0px 2px  4px 0px rgba(0, 0, 0, 1);
}

header nav{
  margin-left: 50px;
}

header nav ul li{
  position: relative;
  float: left;  
}

header nav ul li a{
  padding: 8px;
  font-size: 16px;
  display: block;
  color:  var(--oldPaperClr);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 1), -6px 8px 5.3px rgba(32, 58, 79, 1);
}

header nav ul li a:hover{
  color:var(--bgClrHover);
  background-color:rgba(45, 69, 88, 1);
  transition: 0.25s;
}

nav ul li ul{
  position: absolute;
  left: 0;
  display: none;
}

nav ul li ul li{
  width: 100%;
  border: 1px solid rgba(37, 54, 67, 0.307);
  background-color: var(--navClr);
  width: 165px;
  margin-left: 8px;
}

nav ul li:hover >ul{
  display: initial;
  z-index: 1;
}
/*-------------------------------------------------------------*/
footer{
  background-color: var(--clrFooter);
  height: 140px;
  position: relative;
  /* top:1134px; */
  width: max(462px,70vw);  
  left: 0;
  right: 0;
  border-left: 1px solid var(--oldPaperClr);
  border-right: 1px solid var(--oldPaperClr);
  border-top: 1px solid var(--oldPaperClr);
  box-shadow:  0px -1px  4px 0px rgba(0, 0, 0, 0.5);
  justify-content: space-evenly;
  align-items: center;
  display: flex;
  color: var( --brdClr);
   margin:0 auto;
}

.mainBLOCK{
  position: relative;
  top: 20px;
  left: 0;
  right: 0;
  width: max(462px,70vw);
  height: max(1280,70vw);  
  display: flex;
  justify-content: center;
  /* align-items: center; */
  /* 
  padding: 0 8%;
  border: none; */
  /* display: flex;
  align-items: center;
  justify-content: space-around; */
}
.reklama{
  position: relative;
  display: flexbox;
  top: 20px;
  left: 0;
  right: 0; 
  width: max(30px,10vw); 
  border: none; 
  /* border: 1px solid;  */
}
.midBLOCK{
  position: relative;
  display: flexbox;
   top: 20px;
  justify-content: center;
   align-items: center; 
  left: 0;
  right: 0; 
  width: max(100px,30vw);  
  min-height: 200px; 
 
  padding: 0 8%;
  border: none; 
  flex: 1;
  /* border: 1px solid;  */
}
.novAbzac{
  text-indent: 1rem;
}