body {
background-image: radial-gradient(circle, #6f275c, #632a61, #552d66, #462f68, #353169, #2c366e, #223b72, #134075, #0f4a7f, #095488, #045e91, #00689a);
text-align:center;
height:100vh;


 }
 
 

#header{
height:200px;
vertical-align:top;
text-align:center;
width:100%;
padding-top:40px;
}


#header_1{
width:20%;
display:inline-block;
}

#header_2{
width:50%;
display:inline-block;
}

#header_3{
width:25%;
display:inline-block;
}

#menu{
height:90px;
}

#header_2N{
width:50%;
display:inline-block;
text-align:left;
margin-left:20px;
}

#header_3N{
width:46%;
display:inline-block;
}




#logo{
height:124px;
}



#okvir{
border-top:rgba(0,0,0,0.6) solid 1px;
height:100px;
vertical-align:top;
text-align:center;
width:100%;
padding-top:40px;

}





#btn1{
border:rgba(255,255,255,1) solid 3px;
width:30%;
height:280px;
vertical-align:top;
text-align:center;
display:inline-block;
padding:20px;
margin:20px; 
border-radius:30px;
background-image: linear-gradient(to right,#A12D9C, #DB70B6);
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
}

#btn2{
border:rgba(255,255,255,1) solid 3px;
width:30%;
height:280px;
vertical-align:top;
text-align:center;
display:inline-block;
padding:20px;
margin:20px; 
border-radius:30px;
background-image: linear-gradient(to left,#88ABC9, #6077AB);
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
}

#btn3{
border:rgba(255,255,255,1) solid 3px;
width:30%;
height:280px;
vertical-align:top;
text-align:center;
display:inline-block;
padding:20px;
margin:20px; 
border-radius:30px;
background-image: linear-gradient(to right,#644AAD, #6A6CD0);
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
}

#btn4{
border:rgba(255,255,255,1) solid 3px;
width:30%;
height:280px;
vertical-align:top;
text-align:center;
display:inline-block;
padding:20px;
margin:20px; 
border-radius:30px;
background-image: linear-gradient(to left,#44D5AA, #529987);
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
}

#btn5{
border:rgba(255,255,255,1) solid 3px;
width:30%;
height:280px;
vertical-align:top;
text-align:center;
display:inline-block;
padding:20px;
margin:20px; 
border-radius:30px;
background-image: linear-gradient(to right,#C87974, #FEBA69);
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
}

#btn6{
border:rgba(255,255,255,1) solid 3px;
width:30%;
height:280px;
vertical-align:top;
text-align:center;
display:inline-block;
padding:20px;
margin:20px; 
border-radius:30px;
background-image: linear-gradient(to right,#530937, #A91271);
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
}


#btn7{
border:rgba(255,255,255,1) solid 3px;
width:30%;
height:280px;
vertical-align:top;
text-align:center;
display:inline-block;
padding:20px;
margin:20px; 
border-radius:30px;
background-image: linear-gradient(to right,#FF3300, #F9AA06);
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
}


#btn8{
border:rgba(255,255,255,1) solid 3px;
width:30%;
height:280px;
vertical-align:top;
text-align:center;
display:inline-block;
padding:20px;
margin:20px; 
border-radius:30px;
background-image: linear-gradient(to right,#71B514, #A4EA44);
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
}

#btn1:hover{border:#C5407F solid 3px;background:#333333;}
#btn2:hover{border:#C5407F solid 3px;background:#333333;}
#btn3:hover{border:#C5407F solid 3px;background:#333333;}
#btn4:hover{border:#C5407F solid 3px;background:#333333;}
#btn5:hover{border:#C5407F solid 3px;background:#333333;}
#btn6:hover{border:#C5407F solid 3px;background:#333333;}
#btn7:hover{border:#C5407F solid 3px;background:#333333;}
#btn8:hover{border:#C5407F solid 3px;background:#333333;}




#btn_icon{
height:120px;
}








#napomena_list{
position:relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
border-bottom:#FFFFFF solid 1px;
padding:5px;
font-size:36px;
min-height:180px;
}


#nap_date{
color:#CCCCCC;
font-size:30px;
line-height:0px;
margin-right:15px;
}

#nap_tekst{
color:#FFFFFF;
margin-left:15px;
line-height:40px;
width:86%;
}




#area{
width:90%;
height:600px;
border:#FFFFFF solid 2px;
border-radius:25px;
font-size:32px;
color:#FFFFFF;
background:rgba(0,0,0,0.2);
padding:10px;
margin:10px;
}


#buton{
width:92%;
height:120px;
border:#FFFFFF solid 2px;
border-radius:15px;
font-size:32px;
color:#FFFFFF;
background-image: linear-gradient(to right,#530937, #A91271);
padding:10px;
margin:10px;
}



#arch{
position:absolute; 
height:76px;
right:20px;
top:80px;
}
#arch_2{
position:absolute; 
height:76px;
right:120px;
top:80px;
}


#del{
position:absolute; 
height:80px;
right:10px;
top:160px;
}


#spremi{
width:92%;
height:100px;
border:#FFFFFF solid 2px;
border-radius:15px;
font-size:52px;
color:#FFFFFF;
background-image: linear-gradient(to right,#9ADF08, #78CD00);
padding:10px;
margin:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:100px;
vertical-align:middle;
margin-top:100px;
text-decoration: none;
}


#recordButton{
width:92%;
height:120px;
border:#FFFFFF solid 2px;
border-radius:15px;
font-size:52px;
color:#FFFFFF;
background-image: linear-gradient(to right,#BE103C, #FF0F15);
padding:10px;
margin:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:100px;
vertical-align:middle;
}


#recordButton:hover{
background:#333333;
}

 


#stopButton{
width:92%;
height:120px;
border:#FFFFFF solid 2px;
border-radius:15px;
font-size:52px;
color:#FFFFFF;
background-image: linear-gradient(to right,#BE103C, #FF0F15);
padding:10px;
margin:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:100px;
vertical-align:middle;
}



#stopButton:hover{
background:#333333;

}



#rec{
width:44px;
margin-top:20px;


}

 
 
 a{
text-decoration: none;

}

#rbr{
position:absolute;
top:5px;
left:0px;
background:#FF0000;
color:#FFFFFF;
text-align:center;
width:76px;
height:40px;
 border-radius:6px;
vertical-align:middle;
line-height:36px;

}







@media only screen and (min-width: 1200px) {

#btn_icon{
height:40px;
}



#btn1{
border:rgba(255,255,255,1) solid 1px;
width:130px;
height:90px;
padding:10px;
margin:10px; 
font-size:14px;
}

#btn2{
border:rgba(255,255,255,1) solid 1px;
width:130px;
height:90px;
padding:10px;
margin:10px; 
font-size:14px;
}

#btn3{
border:rgba(255,255,255,1) solid 1px;
width:130px;
height:90px;
padding:10px;
margin:10px; 
font-size:14px;
}

#btn4{
border:rgba(255,255,255,1) solid 1px;
width:130px;
height:90px;
padding:10px;
margin:10px; 
font-size:14px;
}


#btn5{
border:rgba(255,255,255,1) solid 1px;
width:130px;
height:90px;
padding:10px;
margin:10px; 
font-size:14px;
}


#btn6{
border:rgba(255,255,255,1) solid 1px;
width:130px;
height:90px;
padding:10px;
margin:10px; 
font-size:14px;
}


#btn7{
border:rgba(255,255,255,1) solid 1px;
width:130px;
height:90px;
padding:10px;
margin:10px; 
font-size:14px;
}


#btn8{
border:rgba(255,255,255,1) solid 1px;
width:130px;
height:90px;
padding:10px;
margin:10px; 
font-size:14px;
}

#btn1:hover{border:#C5407F solid 1px;background:#333333;}
#btn2:hover{border:#C5407F solid 1px;background:#333333;}
#btn3:hover{border:#C5407F solid 1px;background:#333333;}
#btn4:hover{border:#C5407F solid 1px;background:#333333;}
#btn5:hover{border:#C5407F solid 1px;background:#333333;}
#btn6:hover{border:#C5407F solid 1px;background:#333333;}
#btn7:hover{border:#C5407F solid 1px;background:#333333;}
#btn8:hover{border:#C5407F solid 1px;background:#333333;}






#menu{
height:40px;
}

#logo{
height:70px;
}





#header{
height:100px;
vertical-align:top;
text-align:center;
width:100%;
padding-top:40px;
}




#okvir{
border-top:rgba(0,0,0,0.6) solid 1px;
height:100px;
vertical-align:top;
text-align:center;
width:80%;
padding-top:40px;
margin-left:10%;
}




#napomena_list{
position:relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
border-bottom:#FFFFFF solid 1px;
padding:5px;
font-size:16px;
min-height:80px;
}



#arch{
position:absolute; 
height:46px;
right:20px;
top:40px;
}
#arch_2{
position:absolute; 
height:46px;
right:80px;
top:40px;
}


#del{
position:absolute; 
height:40px;
right:10px;
top:160px;
}



#nap_date{
color:#CCCCCC;
font-size:16px;
line-height:0px;
margin-right:15px;
}




#header_2N{
width:40%;
display:inline-block;
text-align:left;
margin-left:10%;
}


#rbr{
position:absolute;
top:5px;
left:0px;
background:#FF0000;
color:#FFFFFF;
text-align:center;
width:46px;
height:24px;
 border-radius:6px;
vertical-align:middle;
line-height:20px;

}


#area{
width:90%;
height:200px;
border:#FFFFFF solid 2px;
border-radius:25px;
font-size:16px;
color:#FFFFFF;
background:rgba(0,0,0,0.2);
padding:10px;
margin:10px;
}


#buton{
width:92%;
height:60px;
border:#FFFFFF solid 2px;
border-radius:15px;
font-size:16px;
color:#FFFFFF;
background-image: linear-gradient(to right,#530937, #A91271);
padding:10px;
margin:10px;
}





















}