*{
margin:0;
padding:0;
box-sizing:border-box;
}

@font-face{
font-family:'Targa';
src:url(targa.ttf) format('truetype');
}

body{
background:#ddd;
}

#page{

width:297mm;
height:210mm;

position:relative;

background-image:url("diploma_podloga.png");
background-size:cover;
background-position:center;

font-family:"Targa";
color:#2a6099;

overflow:hidden;

}

/* TEXT ELEMENTI */

#f1{
position:absolute;
top:134mm;
left:81.5mm;
width:22.2mm;
text-align:center;
font-size:24pt;
text-transform:uppercase;
}

#f2{
position:absolute;
top:134mm;
left:177.5mm;
width:102.9mm;
font-size:24pt;
text-transform:uppercase;
}

#f3{
position:absolute;
top:102mm;
left:18mm;
width:262mm;
text-align:center;
font-size:46pt;
font-weight:bold;
text-transform:uppercase;
}

#f4{
position:absolute;
top:125mm;
left:142.6mm;
width:136mm;
font-size:17pt;
text-transform:uppercase;
}

#f5{
position:absolute;
top:180mm;
left:145.6mm;
width:130mm;
text-align:right;
font-size:24pt;
text-transform:uppercase;
}

#f6{
position:absolute;
top:37mm;
left:99mm;
width:156mm;
text-align:center;
font-size:30pt;
text-transform:uppercase;
}

.controls{
position:fixed;
top:20px;
left:20px;
z-index:999;
}

.controls button{
padding:10px 15px;
font-size:14px;
cursor:pointer;
}

@media print{

.controls{
display:none;
}

body{
background:white;
}

#page{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}


}