/* Move down content because we have a fixed navbar that is 50px tall */


/*body {
  padding-top: 50px;
  padding-bottom: 20px;
}
*/


@font-face {
    font-family: "Bradley Hand ITC";
    src: url("../fonts/bradhitc.ttf");
}

@font-face {
    font-family: "Century Gothic";
    src: url("../fonts/GOTHIC.TTF");
}

@font-face {
    font-family: "nutella";
    src: url("../fonts/nutellaBold.ttf");
}

.imgbox {
    position: absolute;
    /* display: grid; */
    height: 70%;
    left: 40px;
}

.center-fit {
    max-width: 70%;
    max-height: auto;
    margin: auto;
}

.masthead {
    /*margin-bottom: 30px;*/
	padding-top: 30px;
	padding-bottom: 100px;
	background-image: url('../images/nav_pic.png');
	/* Full height */
	height: 100%;

	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.zag1brad {
	font-family: 'Bradley Hand ITC';
	font-weight: bold;
	/* font-style: italic; */
}

.nav1nutela {
	font-family: 'nutella';
}

.standCent {
	font-family: 'Century Gothic'
}

.centrirano {
	margin: auto !important;
}

/* gallery */

div.galerija img {
  margin: 5px;
  border: 1px solid black;
  padding: 10px;
  box-shadow: 0px 3px 3px #888888;
}

.slikaBlok {
	display: block !important;
}

.skills {
	margin-top: 15px;
	margin-bottom: 15px;
}

#ifooter {
    position: absolute;
    top: 0px;
    left: 5px;
    width: 100%;
    text-align: left;
    color: #45403f;
}

.slikaPozadina {
    max-width: 100%;
    /* max-height: auto; */
    /* margin: auto; */
    opacity: 0.3;
}

.topcenter {
    position: absolute;
    top: 8px;
    text-align: center;
    /* font-size: 18px; */
  }

.velikiKontejner {
    position: relative;
}

.slikaCentrirana {
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%, -5%);
    text-align: center;
}

.slikaUmaksVel {
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto;    /* Automatically adjusts the height to maintain aspect ratio */
  display: block;  /* Optional: Helps with alignment and prevents extra space below the image */
}

.naslov-AU {
    font-size: 60px;
}

@media (max-width: 810px) {
    .slikaUmaksVel {
        width: 40%;
    } 

    .zag1brad {
        font-size: 1.5rem;
    }

    .nav1nutela {
	    font-size: 0.8rem;
    }

    .standCent {
	    font-size: 1.0rem;
    }

    .standCent {
	    font-size: 0.8rem;
    }

}

.imgboxCont {
    position: relative;   /* ✅ stays inside grid */
    width: 100%;
    text-align: center;
}

#ifooterCont {
    position: absolute;        /* overlay */
    top: 8px;                  /* inside image */
    left: 20%;
    transform: translateX(-10%);
    width: auto;
    padding: 2px 8px;
    font-size: 0.8rem;
    color: #45403f;
    /* background: rgba(255,255,255,0.6); optional but recommended */
    border-radius: 4px;
}

.center-fit-Cont {
    width: 100%;
    max-width: 250px;
    height: auto;
   margin: 0 auto;
}

.slikaUmaksVelCont {
    width: 100%;
    max-width: 450px;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 576px) {
    .zag1brad {
        font-size: 1.6rem;
    }

    .center-fit {
        max-width: 180px;
    }

    .center-fit-index {
        max-width: 180px;
    }

    .naslov {
        font-size: 40px;
    }

    .standCent {
	    font-size: 0.8rem;
    }

    .nav1nutela {
	    font-size: 0.8rem;
    }
}

.imgbox-index {
    position: relative; /* parent for overlay */
    width: 100%;
    max-width: 250px;  /* adjust for desktop */
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#ifooter-index {
    position: absolute;  /* overlay inside image */
    top: 8px;         /* position at bottom of image */
    left: 25%;           /* center horizontally */
    transform: translateX(-20%);
    font-size: 0.8rem;
    color: #45403f;
    /* background: rgba(255,255,255,0.6); /* optional for readability */
    padding: 2px 6px;
    border-radius: 4px;
}

.center-fit-index {
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
    max-width: 250px;   /* desktop */
}

.eduVelikiKontejner {
    position: relative;
    display: inline-block;
}

.eduSlikaPozadina {
    display: block;
}

.eduSlikaCentrirana {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -5%);
}