* {
  box-sizing: border-box;
}

body {
  margin: 0;
font-family: Verdana;
}

{
  font-size: 2vmin;
}

h1 {
  font-size: 3vmin;
}

h2 {
  font-size: 1.875vmin;
}

h3 {
  font-size: 1.55vmin;
}

p {
  text-indent: 0vmin;
  text-align: justify;
  font-size: 2vmin;
  line-height: 1.6vmin;
  letter-spacing: ;
}

.grid-container {
  width: 98vmin;
  aspect-ratio: 1 / 1;
  margin: 1vmin auto; 
   background-color: #F5F5F5;
    border: 0.1vmin solid black;

}

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 8vmin);
  grid-template-rows: repeat(12, 8vmin);
 justify-content: center;
 
 

}

.grid-container > div {
  text-align: center;
  font-size: 2vmin;
 

}


.headerblock {
  grid-area: 1 / 2 / 2 / 12;
     font-size: 1.5vmin;
    padding: 1vmin;
  color: gray;
}

.headerblock2 {
  grid-area: 1 / 4 / 2 / 10;
     font-size: 1.5vmin;
    padding: 1vmin;
  color: gray;
}


.headerblock
 a:hover {
  opacity: 35%;
}


a:link img {
 opacity: 1.0;
}

a:hover img {
 opacity: 0.60;
}


a {
color: #0033cc;
}

a:link {
  text-decoration: none;
   color: #0033cc;
}

a:visited {
  text-decoration: none;
}

a:hover {
  opacity: 0.60;
}

a:active {
  text-decoration: underline;
}


.home {
grid-area:1/1;
}

.home
 a:hover {
  opacity: 35%;
}

.info {
 grid-area: 1/12;
 
}

.info
 a:hover {
  opacity: 35%;
}

.cv {
 grid-area: 12/1;
 
}

.cv
 a:hover {
  opacity: 35%;
}

.post {
 grid-area: 12/12; 
 
 }
 
 .post
  a:hover {
  opacity: 35%;
}

.headnav1 {
grid-area: 1 / 2 / 2 / 4;
 z-index: 4;

}

.headnav2 {
grid-area: 1 / 10 / 2 / 12;
 z-index: 4;
 
}

.pos1 {
grid-area: 2 / 1 / 3 / 3;


}

.pos2 {
grid-area: 2 / 11 / 3 / 13;


}

.pos3 {
grid-area: 11 / 1 / 12 / 3;


}

.pos4 {
grid-area: 11 / 11 / 12 / 13;


}

.posleft {
grid-area: 10 / 1 / 12 / 3;

}

.posright {
grid-area: 10 / 11 / 12 / 13;

}

.posback {
grid-area: 11 / 1 / 12 / 2;

}

.posforw {
grid-area: 11 / 12 / 12 / 13;

}



.arrowleft {
grid-area: 2 / 3 / 3 / 4;

}


.arrowright {
grid-area: 2 / 10 / 3 / 11;

}



.img1{
grid-area:1/1;
}

.img2{
grid-area:1/2;
}

.img13{
grid-area:1/3;
}

.img3{
grid-area:2/1;
}

.img4{
grid-area:2/2;
}

.img23{
grid-area:2/3;
}

.img5{
grid-area:3/1;
}

.img6{
grid-area:3/2;
}

.img33{
grid-area:3/3;
}

.mainblock{
grid-area: 3 / 1 / 9 / 13;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
width:100%;
height: 100%;
row-gap: 0.1vmin;
column-gap: 0.1vmin;
justify-items: center;
align-items: center;
}




.mainimage{
display: grid;
grid-area: 3 / 1 / 9 / 13;
justify-items: center;
align-items: center;
}

.mainimage1{
display: grid;
grid-area: 2 / 1 / 10 / 13;
justify-items: center;
align-items: center;
}


.mainimage2{
display: grid;
grid-area: 9 / 1 / 11 / 13;
justify-items: center;
align-items: center;
}

.mainimage3{
display: grid;
grid-area: 10 / 1 / 12 / 13;
justify-items: center;
align-items: center;
}

.maximage{
display: grid;
grid-area: 2 / 2 / 11 / 11;
justify-items: center;
align-items: center;
}

.maximage2{
display: grid;
grid-area: 2 / 2 / 11 / 12;
justify-items: center;
align-items: center;
}

.maxspace{
display: grid;
grid-area: 2 / 1 / 12 / 13;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;
}

.maincontainer{
grid-area: 2 / 1 / 11 / 13;
display: grid;
  background-color: #F5F5F5;
}

topcontainer{
grid-area: 2 / 1 / 9 / 13;
display: grid;
  background-color: #F5F5F5;
}

.highimage{
grid-area: 2 / 1 / 8 / 13;
display: grid;
width:100%;
height: 100%;
}

.highblock{
grid-area: 2 / 1 / 8 / 13;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
width:100%;
height: 100%;
row-gap: 0.1vmin;
column-gap: 0.1vmin;
justify-items: center;
align-items: center;
}

.twoXtwo{
grid-area: 2 / 2 / 12 / 12;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}

.twoXtwo-w{
grid-area: 2 / 1 / 12 / 13;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}

.twoXtwo-3{
grid-area: 3 / 2 / 10 / 12;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}

 .sixthreetop{
 grid-area: 2 / 1 / 12 / 4;
display: grid;
grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
   padding: 1vmin;
   row-gap: 1vmin;
  column-gap: 1vmin;
 width:100%;
height: 100%;
}

.twoxtree{
 grid-area: 2 / 2 / 12 / 12;
display: grid;
grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
   row-gap: 1vmin;
  column-gap: 1vmin;
 width:100%;
height: 100%;
}

 .six3col{
 grid-area: 3 / 1 / 6 / 13;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
 width:100%;
height: 100%;
}

.ninegrid{
 grid-area: 2 / 1 / 12 / 9;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
   padding: 1vmin;
   row-gap: 1vmin;
  column-gap: 1vmin;
 width:100%;
height: 100%;

}

.threexthreew{
grid-area: 2 / 1 / 12 / 13;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
   padding: 1vmin;
   row-gap: 2vmin;
  column-gap: 2vmin;
   background-color: #F5F5F5;
   width:100%;
height: 100%;

}

.threexthree1{
grid-area: 2 / 1 / 12 / 13;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
   row-gap: 1vmin;
  column-gap: 1vmin;
   width:100%;
height: 100%;

}

.four{
grid-area: 1 / 1 / 13 / 13;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;

   row-gap: 0.3vmin;
  column-gap: 0.3vmin;
   background-color: #F5F5F5;
   width:100%;
height: 100%;

}


.three{
grid-area: 1 / 1 / 13 / 13;
display: grid;
grid-template-columns: 1fr 1fr 1fr;

   row-gap: 0.1vmin;
  column-gap: 0.1vmin;
   background-color: #F5F5F5;
   width:100%;
height: 100%;

}

.three-row{
grid-area: 1 / 1 / 13 / 13;
display: grid;
grid-template-columns: repeat(3, 1fr);

   row-gap: 0.1vmin;
  column-gap: 0.1vmin;
   background-color: #F5F5F5;
   width:100%;
height: 100%;

}


.cvpage{
display: grid;
grid-area: 2 / 1 / 12 / 13;
grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);

   padding: 0.5vmin;
   row-gap: 1vmin;
  column-gap: 1vmin;
   background-color: #F5F5F5;
   width:100%;
height: 100%;
justify-items: center ;
align-items: center;
}

.iconline{
display: grid;
grid-template-columns: repeat(10, 1fr);
 column-gap: 1vmin;
  grid-template-rows: repeat(1, 1fr);
}

.topedition{ 
grid-area: 2 / 1 / 5 / 13;
display: grid;
grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
   padding: 0.5vmin;
   row-gap: 1vmin;
  column-gap: 1vmin;
   width:100%;
height: 100%;
justify-items: center ;
align-items: center;
}


.fotu{
grid-area: 1 / 2 / 13 / 12;
display: grid;
width:100%;
height: 100%;
}

.all{
grid-area: 1 / 1 / 13 / 13;
display: grid;
width:100%;
height: 100%;
}

 .iconminispace{
 grid-area: 9 / 9 / 11 / 13;
 width:100%;
height: 100%;
 position: relative;
}

.iconminispace1{
 grid-area: 8 / 5 / 12 / 13;

}

.iconminispace2{
 grid-area: 9 / 9 / 12 / 13;
 
}

 .iconmini{
display: grid;
 grid-template-columns: 8vmin 8vmin;
  grid-template-rows: 8vmin 8vmin;
   row-gap: 1vmin;
  column-gap: 2.5vmin;
   width:100%;
height: 100%;

}

 .iconmini6{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
   row-gap: 1vmin;
  column-gap: 1vmin;
   width:100%;
height: 100%;

}

 .iconmini6cont{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
   row-gap: vmin;
  column-gap: vmin;
   width:100%;
height: 100%;

}

.box{
display: grid;
grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr;
    row-gap: 1vmin;
  column-gap: 1vmin;
   width:100%;
height: 100%;

}

.boxtight{
display: grid;
grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr;
    row-gap: 0vmin;
  column-gap: 0.5vmin;
   width:100%;
height: 100%;

}

.twimage{
display: grid;
grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr;
  column-gap: 0.5vmin;
   width:100%;
height: 100%;

}

.overbanner{
grid-area: 2 / 1 / 3 / 13;

}

.underbanner{
grid-area: 11 / 1 / 12 / 13;

}


.column1 {
 grid-area: 2 / 1 / 12 / 4;
  
}
 
 .column3 {
 grid-area: 2 / 1 / 12 / 5;
 
}

 .column2 {
  grid-area: 2 / 5 / 12 / 13;
  
}


.column2base {
grid-area:  2 / 8 / 12 / 13;

}


 .column4 {
  grid-area: 2 / 1 / 12 / 9;
  
}


 .column5 {
  grid-area: 2 / 9 / 12 / 13;
  
}


.col1 {
 grid-area: 2 / 1 / 12 / 5;
 
}

.col2 {
 grid-area: 2 / 5 / 12 / 9;
 
}

.col3 {
 grid-area: 2 / 9 / 12 / 13;
 
}


.textcolumn1{
grid-area: 3 / 1 / 11 / 7;
}

.textcolumn2{
grid-area: 3 / 7 / 11 / 13;
}

.topcolumn1{
grid-area: 2 / 1 / 11 / 7;
}

.topcolumn2{
grid-area: 2 / 7 / 11 / 13;
}


.textmax{
grid-area: 2 / 3 / 12 / 11;
}

.textmax2{
grid-area: 5 / 3 / 12 / 11;
background-color: #ccffe5;
 border: 0.1vmin solid black;
}

.textmax3{
grid-area: 6 / 5 / 12 / 13;
}

.text6{
grid-area: 2 / 4 / 12 / 10;
background-color: #99ffcc;
}


.undertext{
grid-area: 9 / 3 / 12 / 10;
}

.middlelongtext{
grid-area: 8 / 1 / 9 / 13;
}

.underlongtext{
grid-area: 10 / 1 / 12 / 13;
}

.line1 {
grid-area: 2 / 4 / 3 / 10;
}

.line1a { 
grid-area: 3 / 1 / 6 / 13;
}

.line1b { 
grid-area: 4 / 1 / 6 / 13;
}

.line1c { 
grid-area: 2 / 1 / 3 / 13;
}

.line1d { 
grid-area: 5 / 1 / 6 / 13;
}

.line1e { 
grid-area: 6 / 1 / 7 / 13;
}

.line2 {
grid-area: 11 / 3 / 12 / 11;
}

.line3 {
grid-area: 8 / 3 / 12 / 11;
}

.line3a {
grid-area: 7 / 1 / 12 / 11;
}

.line3c {
grid-area: 7 / 1 / 12 / 13;

}
.line3b {
grid-area: 8 / 1 / 12 / 13;
}

.line4 {
grid-area: 9 / 3 / 12 / 11;
}

.line4a {
grid-area: 10 / 1 / 12 / 13;
}

.line4b {
grid-area: 9 / 1 / 12 / 13;
}


.line5 {
grid-area: 10 / 3 / 12 / 11;
}

.level5block {
display: grid;
grid-area: 9 / 1 / 12 / 13;
justify-items: center;
align-items: center;
}

.line6 {
grid-area: 11 / 3 / 12 / 11;
}

.line6a {
grid-area: 10 / 2 / 12 / 12;
}


.line7 {
grid-area: 9 / 3 / 10 / 11;
}

.line8 {
grid-area: 11 / 1 / 12 / 13;

}

.unavl{
grid-area: 9 / 1 / 12 / 3;
 background: 
}

.unavr{
grid-area: 9 / 11 / 12 / 13;
 background:
}

.footerblock {
  grid-area: 12 / 2 / 13 / 12;
 color: gray;
 background: #F5F5F5;
 
}

.footerblock
 a:hover {
  opacity: 35%;
}

.text2 {
font-family:verdana; 
font-size:1.5vmin;  
letter-spacing: 0.1vmin;
justify-content: top;
align-items: left;

}