body { 


background-image: no-repeat ;

background-position: 0% 0% ;

background-image: url(../Images/Background3.jpg) ;

background-size: 100% 100% ;

background-attachment: fixed ;

background-color: #30ff8e ;

}


#MainImage { 
width: 55% ;
height: 9em ; 
position: relative ; 
top: 0% ; 
left: 20% ; 
background-image: url(../Images/Evilones.png) ; 
background-size: 100% 100% ;
}

#ButtonsPanel a:link { 
color: #A4F1F6 ;
}


#ButtonsPanel a:hover , #ButtonsPanel a:focus { 
color: white ; 
}

#ButtonsPanel a:active { 
color: red ; 
}

#ButtonsPanel a:visited {   
color: #26D7A2 ;
}



#ButtonsPanel { 
height: auto ;
width: auto ; 
border: solid 2px ; 
border-radius: 7px ; 
background-image: url(../Images/TopPanelGreen.jpg) ; 
background-size: 100% 100% ;
border-color: #60F082 ; /* #00ff00 */
background-color: #30ff8e ; 
float: top ;   

-webkit-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ;
-ms-box-shadow: 4px 4px 1em rgba(0 , 70 , 0 , 0.7 ) ; 
-moz-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ; 
-o-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ;
box-shadow: 4px 4px 1em  rgba(0 , 70 , 0 , 0.7 ) ; 
}



#MenuButton0 { 
border: solid 2px #62EB4D ; 
width: 7% ; 
border-radius: 10px ; 
padding: 4px ; 
margin: 1px ; 
margin-top: 4px ;  
margin-left: 32% ;
float: left ;
background-image: url(../Images/LongButtons2.png) ; 
background-size: 100% 100% ;
background-color: #00ffbf ; 

-webkit-box-shadow: 2px 2px 1px rgba( 0 , 70 , 0 , 0.7 ) ;
-ms-box-shadow: 2px 2px 1px rgba(0 , 70 , 0 , 0.7 ) ; 
-moz-box-shadow: 2px 2px 1px rgba( 0 , 70 , 0 , 0.7 ) ; 
-o-box-shadow: 2px 2px 1px rgba( 0 , 70 , 0 , 0.7 ) ;
box-shadow: 2px 2px 1px  rgba(0 , 70 , 0 , 0.7 ) ; 
}

#MenuButton1 {
border: solid 2px #62EB4D ;
width: 7% ;
border-radius: 10px ;
padding: 4px ;
margin: 1px ; 
margin-left: 4px ; 
margin-top: 4px ;
float: left ; 
background-color: #00ffbf ; 
background-image: url(../Images/LongButtons2.png) ; 
background-size: 100% 100% ;

-webkit-box-shadow: 2px 2px 1px rgba( 0 , 70 , 0 , 0.7 ) ;
-ms-box-shadow: 2px 2px 1px rgba(0 , 70 , 0 , 0.7 ) ; 
-moz-box-shadow: 2px 2px 1px rgba( 0 , 70 , 0 , 0.7 ) ; 
-o-box-shadow: 2px 2px 1px rgba( 0 , 70 , 0 , 0.7 ) ;
box-shadow: 2px 2px 1px  rgba(0 , 70 , 0 , 0.7 ) ; 
}

#MenuButton2 {
border: solid 2px #62EB4D ;
width: 7.7% ;
border-radius: 10px ;
padding: 4px;
margin: 1px ; 
margin-top: 4px ; 
margin-left: 4px ; 
float: left ; 
background-color: #00ffbf ; 
background-image: url(../Images/LongButtons2.png) ; 
background-size: 100% 100% ;

-webkit-box-shadow: 2px 2px 1px rgba( 0 , 70 , 0 , 0.7 ) ;
-ms-box-shadow: 2px 2px 1px rgba(0 , 70 , 0 , 0.7 ) ; 
-moz-box-shadow: 2px 2px 1px rgba( 0 , 70 , 0 , 0.7 ) ; 
-o-box-shadow: 2px 2px 1px rgba( 0 , 70 , 0 , 0.7 ) ;
box-shadow: 2px 2px 1px  rgba(0 , 70 , 0 , 0.7 ) ; 
}

#MenuButton3 {
border: solid 2px #62EB4D ;
width: 7% ;
border-radius: 10px ;
padding: 4px ;
margin: 1px ;
margin-top: 4px ; 
margin-left: 4px ; 
float: left ; 
background-color: #00ffbf ; 
background-image: url(../Images/LongButtons2.png) ; 
background-size: 100% 100% ;

-webkit-box-shadow: 2px 2px 1px rgba( 0 , 70 , 0 , 0.7 ) ;
-ms-box-shadow: 2px 2px 1px rgba(0 , 70 , 0 , 0.7 ) ; 
-moz-box-shadow: 2px 2px 1px rgba( 0 , 70 , 0 , 0.7 ) ; 
-o-box-shadow: 2px 2px 1px rgba( 0 , 70 , 0 , 0.7 ) ;
box-shadow: 2px 2px 1px  rgba(0 , 70 , 0 , 0.7 ) ; 
}

#MenuButton4 {
border: solid 2px #62EB4D ;
width: 4.9% ;
border-radius: 10px ;
padding: 4px ;
margin: 1px ;
margin-top: 4px ; 
margin-left: 1% ; 
float: left ; 
background-color: #00ffbf ; 
background-image: url(../Images/LongButtons2.png) ; 
background-size: 100% 100% ;

-webkit-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ; 
-ms-box-shadow: 2px 2px 2px (0 , 40 , 70 , 1 ) ;
-moz-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1) ;  
-o-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ;  
box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ;  
}






#FirstPanel {
width: 17% ; 
height: 40em ;  
margin-bottom: 10% ;
background-image: url(../Images/Key.png) ; 
background-size: 100% 100% ; 
float: left ; 
border: solid 2px #5EDF74 ; 
border-radius: 40px ;

-webkit-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ;
-ms-box-shadow: 4px 4px 1em rgba(0 , 70 , 0 , 0.7 ) ; 
-moz-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ; 
-o-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ;
box-shadow: 4px 4px 1em  rgba(0 , 70 , 0 , 0.7 ) ; 
}

#FirstElement { 
margin-top : 0% ;
height: 100% ;
background-image: url(../Images/Panel3.png) ;
background-size: 100% 100% ; 
border-radius: 40px ;
}




#MainPanel { 
width: 57% ; 
height: 40em ; 
border: solid 2px #66FA66 ; 
border-radius: 4% ; 
margin-left: 1% ;
padding: 7px ; 
padding-left: 20px ; 
background-image: url(../Images/Panel3.png) ; 
background-size: 100% 100% ; 
float: left ; 
color: black ;

-webkit-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ;
-ms-box-shadow: 4px 4px 1em rgba(0 , 70 , 0 , 0.7 ) ; 
-moz-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ; 
-o-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ;
box-shadow: 4px 4px 1em  rgba(0 , 70 , 0 , 0.7 ) ; 
}

#InsidePanel { 
width: 94% ; 
height: 36em ; 
border: solid 2px #66FA66 ; 
border-radius: 4% ; 
margin-top: 1% ;
margin-left: 0% ;
padding: 7px ; 
padding-left: 10px ; 
background-image: url(../Images/Panel2.png) ; 
background-size: 100% 100% ; 
float: left ; 
color: black ; 
overflow: auto ;

-webkit-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ;
-ms-box-shadow: 4px 4px 1em rgba(0 , 70 , 0 , 0.7 ) ; 
-moz-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ; 
-o-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ;
box-shadow: 4px 4px 1em  rgba(0 , 70 , 0 , 0.7 ) ; 
}

#SecondElement { 
border: solid 2px #66FA66 ; 
width: 12% ; 
margin-left: 40% ; 
border-radius: 7px ;  
padding: 2px ; 
padding-left: 1px ; 
background-image: url(../Images/Panel2.png) ; 
background-size: 100% 100% ;

-webkit-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ;
-ms-box-shadow: 4px 4px 1em rgba(0 , 70 , 0 , 0.7 ) ; 
-moz-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ; 
-o-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ;
box-shadow: 4px 4px 1em  rgba(0 , 70 , 0 , 0.7 ) ; 
}


#LastPanel {
width: 20% ;
height: 40em ;
margin-left: 1% ;
background-image: url(../Images/Key2.png) ; 
background-size: 100% 100% ; 
border: solid 2px #5EDF74 ;
border-radius: 40px ;
float: left ;

-webkit-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ;
-ms-box-shadow: 4px 4px 1em rgba(0 , 70 , 0 , 0.7 ) ; 
-moz-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ; 
-o-box-shadow: 4px 4px 1em rgba( 0 , 70 , 0 , 0.7 ) ;
box-shadow: 4px 4px 1em  rgba(0 , 70 , 0 , 0.7 ) ; 
}

#ThirdElement  { 
margin-top: 0% ; 
height: 100% ;      
background-image: url(../Images/Panel3.png) ; 
background-size: 100% 100% ; 
border-radius: 40px ;
}



#Copyright {
margin: 2% ; 
margin-top: -2px ;
margin-left: 24% ; 
padding-bottom: 20px ;
float: left ; font-size: 20px ;
}

Button { 
margin-left: -70% ;
color: black ; 
border-right: none ; 
border-top: none ; 
border-left: none ; 
border-bottom: -1px ;
border-color: black ; 
border-radius: 20px ; 
background-color: rgba(120 , 250 , 250 , 0.2 ) ; 
padding-top: 7px ; 
padding-bottom: 7px ;
float: left ;
} 



#RandomLinks   { 
margin-top: 1px ;
border-radius: 10px ; 
}

#link0   { 
margin-left: 14% ;
float: left ;   
}

#link1   { 
margin-left: 10% ; 
float: left ; 
}

#link2   { 
margin-left: 10% ; 
float: left ;
}

#link3   { 
margin-left: 10% ; 
float: left ;
}

ul { 
list-style-type: none ; }


#lang0   { 
margin-left: 10% ;
float: left ;   
}


#LangButton0 { 
background-image: url(../Images/Eng.jpg) ; 
background-size: 100% 100% ;
}

#LangButton1 { 
background-image: url(../Images/Est.jpg) ; 
background-size: 100% 100% ;
}

#LangButton2 { 
background-image: url(../Images/Rus.jpg) ; 
background-size: 100% 100% ;
}




@media ( max-width: 1070px )    {

#MainPanel   { 
width: 55% ;
}

Button { 
margin-left: 0% ;
}

}




@media ( max-width: 970px )    {

#MainImage {
margin-left: 4% ; height: 7em ;
}

#MainPanel   { 
width: 74% ; 
}  


#LastPanel { 
width: 2% ; 
height: 2% ; 
margin-top: -140px ; 
display: none ;
}



#Copyright    { 
float: left ;
margin-top: 0.2em ; 
}

}













@media ( max-width: 1020px )   {  

#MenuButton0 { width: 5.4% ;   }
#MenuButton1 { width: 4.2% ;   }
#MenuButton2 { width: 7.7% ;   } 
#MenuButton3 { width: 3.7% ;   }
#MenuButton4 { width: 5.5% ;   }
}




@media (max-width: 900px)   { 
#MenuButton0 { width: 7% ;   }
#MenuButton1 { width: 4.4% ;   }
#MenuButton2 { width: 9% ;   } 
#MenuButton3 { width: 3.7% ;   }
#MenuButton4 { width: 5.7% ;   }  
}



@media ( max-width: 800px )        { 

#MainImage { 
margin-left: 0% ;
width: 400px ;
}

#MenuButton0 { width: 7.7% ; margin-left: 17%  ;  }
#MenuButton1 { width: 5.7% ; margin-left: 4%  ;  }
#MenuButton2 { width: 10.7% ; margin-left: 4%  ;  } 
#MenuButton3 { width: 4.7% ; margin-left: 4%  ;   }
#MenuButton4 { width: 7.2% ; margin-left: 4%  ;   } 

#FirstPanel    { 
width: 2px ; 
height: 2px ; 
margin-left: -20% ; 
display: none ;
}

#MainPanel {
width: 90% ; 
}

#link0 { margin-left: -7% ;  }

#InsidePanel  { 
margin-left: 2% ; 
margin-top: 1em ;
width: 70% ;
}

#SymbolInside { float: left ;
width: 23% ;  
height: 37.7em ;  
border : solid 2px #66FA66 ; 
border-radius: 20px ; 
margin-left: -2% ; 
margin-top: 0.4em ;
background-image: url(../Images/Key.png) ; 
background-size: 100% 100% ;
}

#Glass { 
height: 100% ;
background-image: url(../Images/Panel2.png) ;
background-size: 100% 100% ; 
border-radius: 20px ;
}

#Copyright { 
padding-bottom: 30px ;
margin-top: 0.2em ; 
margin-left: 40% ;
}

}




@media (max-width: 600px )   { 

#MenuButton0 { width: 12% ; margin-left: 10% ;  }
#MenuButton1 { width: 9% ;   }
#MenuButton2 { width: 16% ;   } 
#MenuButton3 { width: 7.7% ;   }
#MenuButton4 { width: 9.2% ;   }

#MainImage   {
background-image: url(../Images/Evilones.png) ; 
background-size: 100% 100% ; 
width: 500px ; 
height: 120px ;  
margin-left: -20% ;
}


#LangButton0 { margin-left: -4em ; }
#LangButton1 { margin-left: 0em ; } 
#LangButton2 { margin-left: 0em ; }

#hoveredButton0   { 
margin-left: -2em ; 
}

#hoveredButton1   { 
float: left ; 
margin-top: 0px ;
margin-left: -1.5em ;
}

#hoveredButton2   { 
float: left ; 
margin-top: 0px ;
margin-left: -1.0em ;
}

#hoveredButton3   { 
float: left ; 
margin-top: 0px ;
margin-left: -0.5em ;
}

#mainText { 
margin-top: 2em ;
}


ul {
list-style-type: none ;   
}



#MainPanel   { 
width: 90% ; 
margin-left: 2% ;  
margin-top: 1em ; 
height: 41em ;
}

#SecondElement { width: 20% ; }

#InsidePanel {
height: 37em ;
}

}




@media (max-width: 595.7px)   {
#MainPanel { 
margin-top: 0em ;   } 
}



@media (max-width: 550px)   {

#SymbolInside { 
background-repeat: repeat-y ; 
background-size: 100% 34% ;
width: 70px ;
height: 90% ; 
}

#Copyright { 
margin-left: 30% ;
}


}

@media (max-width: 500px)   {


#MainPanel   { 
margin-top: -40em ; 
}

#hoveredButton0   { 
width: 70px ;
margin-left: -3em ;
}

#hoveredButton1   {
width: 57px ;
float: left ; 
margin-top: 0px ;
margin-left: -1.7em ;
}

#hoveredButton2   { 
width: 70px ;
float: left ; 
margin-top: 2px ;
margin-left: -1.5em ;
}

#hoveredButton3   { 
width: 40px ;
float: left ; 
margin-left: -1.5em ;
}

#Copyright { 
margin-top: 20px ;
}

}


@media (max-width: 500px)    {

#MainImage {
width: 90% ; height: 100px ;
margin-left: -14% ; 
}

#MainPanel   { 
margin-top: -10px ; 
}

}

@media (max-width: 495.7px)    {
#MainPanel   {  
margin-top: 0em ; 
}

}


@media (max-width: 400px)    {

#MenuButton0 { width: 16% ; margin-left: 0.7% ;  }
#MenuButton1 { width: 11% ; margin-left: 0.7% ;  }
#MenuButton2 { width: 22% ; margin-left: 0.7% ;  } 
#MenuButton3 { width: 9% ;  margin-left: 0.7% ;  }
#MenuButton4 { width: 13% ; margin-left: 0.7% ;  }

#MainPanel   { 
width: 90% ; 
margin-top: 0em ; height: 44.7em ;
}

#InsidePanel {
width: 97% ; 
margin-left: -3.4% ;
}

#SymbolInside  { 
width: 90% ; 
height: 40px ; 
background-repeat: repeat-x ;
background-size: 20% 100% ; 
margin-top: 0.7em ; 
margin-left: 4% ; 
}

#SecondElement { width: 30% ; }


#hoveredButton0   { 
width: 55px ;
margin-left: -2.2em ;
}

#hoveredButton1   {
width: 50px ;
float: left ; 
margin-top: 0px ;
margin-left: -0.7em ;
}

#hoveredButton2   { 
width: 55px ;
float: left ; 
margin-top: 2px ;
margin-left: -1em ;
}

#hoveredButton3   { 
width: 55px ;
float: left ; 
margin-top: 2px ;
margin-left: -1em ;
}

}