/*   
	Theme Name:        Lazar Systems
	Theme URI:         https://lazarsys.com
	Description:       Personal blog
	Author:            Lazarsys
	Author URI:        https://lazarsys.com
	Version:           1.0
	Stable tag:        1.0
	Requires at least: 4.5
	Tested up to:      4.7
	License:           GNU General Public License v3 or later
	License URI:       http://www.gnu.org/licenses/gpl-3.0.html
	Tags:              one-column, two-columns, right-sidebar
	Text Domain:       lazarsys
*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

/* reset */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video
{font-size:16px;padding:0;margin:0;border:0;vertical-align:baseline;font:inherit;}
* {padding:0;margin:0;box-sizing:border-box;}
html, body {scroll-behavior:smooth;-webkit-text-size-adjust:100%;  }

body {font-family: "IBM Plex Mono", serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;font-size:16px;
background-color:#E8E8E8;color:#ffffff; background-color: #121212;
cursor: url('img/cursor1.svg'), auto;
}
body.page-template-homepage {
  overflow: hidden;
}
#menu-desno{float:right;position: absolute;top: 10px;right: 0;z-index:2;height: 100px; display: flex;flex-direction: row;justify-content: end;gap: 10px;align-items: center;padding-right: 50px ;}
#menu-desno li{display:inline-block;margin-left:10px;}
#menu-desno li a{text-transform:uppercase;text-decoration:none; color: #ffffff ;transition: all 0.5s ease; font-size:20px;}
#menu-desno li a:hover, .current-menu-item a{transition: all 0.5s ease; color: #6AC4DC; } 
#menu-desno .current-menu-item > a, .current_page_item > a {color: #6AC4DC !important;}



a{ z-index: 1;text-decoration: none; color: #ffffff;}
a:hover{ color: #6AC4DC; transition: all 0.5s ease;}
.logo{ width: 50px; position: absolute; top: 40px;left: 40px;z-index: 1;}
a .logo rect {stroke: #FFFFFF;transition: all 0.5s ease;}
a .logo path { fill: #FFFFFF;transition: all 0.5s ease;}
a:hover .logo rect { stroke: #6AC4DC; }
a:hover .logo path {fill: #6AC4DC;}
.centar{ position: relative;min-height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.centar1{ position: relative;min-height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.naslovomeni{margin-top: 40px; font-size: 24px;}
.tekstomeni{ line-height: 25px; margin-top: 20px;text-align: center; width: 90%; max-width: 960px;}
.hireme{ position: absolute;right: 50px;bottom: 50px; display: flex; flex-direction: row; gap: 20px;}
.hireme svg path {fill: #FAFAF7;transition: all 0.5s ease;}
.hireme:hover svg path {fill: #6AC4DC; }
.karticared{width: 100%; min-height: 169px;flex-wrap: wrap; display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: 83px; margin-top: 53px;}
.kartica{display: flex;justify-content: center; align-items: center; gap: 26px; flex-direction: column; background-color: #141414; width: 235px; min-height: 169px;}
.kartica1{display: flex;justify-content: center; align-items: center; gap: 13px; flex-direction: column; background-color: #141414; width: 235px; min-height: 169px;}
.naslovkartica{font-size: 20px; text-align: center;}
.tekstkartica{font-size: 20px;}
.linije {background-color: #1C1C1C;  border: 2px solid #6AC4DC; border-radius: 10px;  margin-top: 10px;  overflow: hidden;  width: 185px;  height: 15px;}
.linije2 {  height: 15px;  background-color: #6AC4DC;  border-radius: 4px;  width: 0;  transition: width 2s ease-out;}
#menu-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7);  backdrop-filter: blur(10px); z-index: 1; }
#menu-overlay.active { display: block;}
#hamburger {display: none;font-size: 50px;color: #ffffff; position: absolute; top: 5px; right: 20px; z-index: 999; cursor: pointer;}
#hamburger:hover {color:#6AC4DC;transition: all 0.5s ease;}

.karticaredportfolio {height: 508px;margin: 0;padding: 0;display: flex;justify-content: space-between;flex-wrap: wrap; margin-top: 40px; gap:10px;}
.karticaportfolio { display: flex;flex-direction: column;align-items: start;background-color: #141414;width: 358px;  height: 458px;}
.slikahero {width: 100%;}
.naslovportfolio {  font-size: 36px;  margin-left: 20px;  margin-top: 20px; margin-bottom:20px;}
.tekstportfolio { line-height: 25px;font-size: 16px;  margin-left: 20px;}
.paginationcontainer{ display: flex;justify-content: end;width: 100%;margin-top: 20px;}
.pagination a {color: #fafafa;text-decoration: none;margin: 0 6px;}
.pagination a.active {color: #6AC4DC;}
.pagination a:hover { color: #6AC4DC;transition: all 0.5s ease;}
.tekstportfolio a svg rect {fill: #FAFAF7;transition: all 0.5s ease;}
.tekstportfolio a:hover svg rect {fill: #6AC4DC; transition: all 0.5s ease;}
.strelica{margin-left:7px;}
.naslovomeni{margin-top: 30px; font-size: 30px;}


@media (max-width: 768px) { 
  
  .logoslika{ width: 280px;height: 120px; }
 
  .karticared { flex-direction: column; align-items: center; gap: 20px; min-height: auto; padding: 20px 0; } 
  .kartica, .kartica1 { width: 90%; max-width: 320px; min-height: auto; padding: 20px; } 
  .naslovkartica, .tekstkartica { font-size: 18px; text-align: center; } 
  .linije { width: 100%; } .linije2 { width: 0; } 
  .centar{ position: relative;height: auto; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top:100px;} 
  .centar1{ position: relative;min-height: 80vh; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction:column;}
  .hireme{ position: relative;right: 0px;bottom: 50px; display: flex; flex-direction: row; justify-content:center; gap: 20px; margin-top:100px;} 
  body.page-template-homepage {
    overflow: hidden;
  }

}
@media (max-width: 1200px) { 
  
 
  #hamburger {display: block;}
  #menu-desno { display: none; flex-direction: column; position: absolute;top: 60px; right: 0; padding: 20px; width: 100%; z-index: 998;} 
  #menu-desno.active {display: flex;justify-content:start;} 
  #menu-desno li {margin: 10px 0;} 
  #menu-desno li a {font-size: 24px;} 
  .logo{ width: 50px; position: absolute; top: 20px;left: 20px;z-index: 1;} 
  .centar{ position: relative;height: auto; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top:100px;} 
  .centar1{ position: relative;min-height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
 .karticaredportfolio {height: auto;margin: 0;padding: 0;display: flex;justify-content: center;flex-wrap: wrap; margin-top: 78px; gap:20px;} 
.paginationcontainer{ display: flex;justify-content: center;width: 100%;margin-top: 20px; margin-bottom:50px;}
}