* {
	font-family: Montserrat;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow-x: hidden;
	scroll-behavior: smooth;
	text-align: center;
}

a {
	text-decoration: none;
	color: inherit;
	text-align: center;
}

footer{
    margin-top:150px;
    text-align: center;
}
h1{
    font-size: 1.8rem;
    text-align: center;
}
h2{
    font-size: 1.4rem;
    text-align: center;
}
h3{
    font-size: 1.2rem;
    text-align: center;
}
p{
    font-size: 1rem;
    text-align: center;
}
div{
    font-size: 1rem;
    text-align: center;
}

/* Header */

.logo {
	height: 70px;
}

header {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.izbornik {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 15px;
	padding-top: 15px;

	width: 100%;
}

.izbornik_1_2 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.izbornik_2_2 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding-right: 40px;
}

.izbornik_logo {
	display: flex;
	justify-content: left;
	padding-left: 50px;
}

.izbornik_logo img {
	transition: all 200ms ease;
}

.izbornik_logo img:hover {
	scale: 110%;
}

.izbornik_linkovi {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	font-size: large;
	border-bottom: 1px solid;
}

.izbornik_vanjski {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: large;
}

.izbornik_unutarnji {
	transition: all 200ms ease;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 40px;
}

.izbornik_unutarnji:hover {
	background-color: #f03635;
	border-radius: 10px;
	color: white;
	font-weight: 500;
}
/* /Header */

/* Dobrodošlica */

.welcome{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.welcome_naslov{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 500;
    padding-top: 40px;
}

.welcome_tekst{
    padding-left: 40px;
    padding-right: 40px;
    display: flex;
    justify-content: center;
    padding-top: 40px;
    text-align: center;
}

/* /Dobrodošlica */

/* Kalkulator */

.kalkulator{
    display: flex;
    justify-content: center;
    align-items: center;
}

.kalkulator_okvir{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: 2px solid #3f3f3f;
    width: 450px;
    padding: 25px;
    font-weight: 600;
    margin-top: 30px;
}

.kalkulator_okvir_tekst{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 16px;
}

.kalkulator_okvir_input{
    width: 350px;
    height: 35px;
    border: black 3px solid;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
}

.kalkulator_razmak{
    margin-top: 30px;
}

/* /Kalkulator */

/* Rezultati */

.rezultati{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.rezultati_okvir{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
}

.rezultat_tekst{
    display: flex;
    justify-items: center;
    align-content: center;
    text-align: justify;
    margin right: 25px;
    margin-left: 25px;
    font-weight: 500;
    font-size: 16px
}

.result-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    margin-left: 10px;
}

.result_spremnik {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dark-green {
    background-color: #006400;
}

.green {
    background-color: #32CD32;
}

.orange {
    background-color: #FFA500;
}

.center_rezultat{
    display: flex;
    flex-direction: column;
    justify-content; center;
    align-items: center;
    text-align: center;
    margin-top: 25px;
    margin-left: 25px;
    margin-right: 25px;
}

.info{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: justify;
    margin-left: 25px;
    margin-right:25px;
}

/* /Rezultati */

/* Registracija-Prijava */

.reg_link{
    font-weight: 700;
}

.login{
    display: flex;
    flex-direction: column;
    padding-left: 20px;
}

.login_okvir{
    display: flex;
    flex-direction: column;
    width: 300px;
}

.login_element{
    display: flex;
    flex-direction: column;
    margin-top: 7px;
}



/* /Registracija-Prijava */

/* Dugme */

.btn_holder{
    display: inline-flex;
}

.generic_btn {
	transition: all 150ms ease;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 155px;
	height: 35px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 7px;
	border: 5px solid #f03635;
	color: white;
	background-color: #f03635;
}

.generic_btn:hover {
	background-color: white;
	color: black;
    border: 5px solid #f03635;
}

.odjava_btn{
    transition: all 150ms ease;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 155px;
	height: 35px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 7px;
	border: 5px solid #f03635;
	color: black;
	background-color: white;
	margin-top: 40px;
}

.odjava_btn:hover{
    background-color: #f03635;
	color: white;
    border: 5px solid #f03635;
}

.login_btn{
    transition: all 150ms ease;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 155px;
	height: 35px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 7px;
	border: 1px solid black;
	color: black;
	background-color: #d3d3d3;
}

.login_btn:hover{
    background-color: #bebebe;
	color: black;
}

/* /Dugme */

/* Ostalo */

.vrijeme{
    text-decoration: underline;
}

/* /Ostalo */
@media (max-width: 1000px) {
    /* Skaliranje za 20% */
    html {
        font-size: 1.20rem;
    }

    h1 {
        font-size: calc(1.8rem * 1.20); /* 1.8rem * 1.20 = 2.07rem */
    }

    h2 {
        font-size: calc(1.4rem * 1.20); /* 1.4rem * 1.20 = 1.61rem */
    }

    h3 {
        font-size: calc(1.2rem * 1.20); /* 1.2rem * 1.20 = 1.38rem */
    }

    p {
        font-size: calc(1rem * 1.20); /* 1rem * 1.20 = 1.15rem */
    }
    div {
            font-size: calc(1rem * 1.20); /* 1rem * 1.20 = 1.15rem */
        }

    footer {
        margin-top: calc(150px * 1.20); /* 150px * 1.20 = 172.5px */
    }

    .logo {
        height: calc(70px * 1.20); /* 70px * 1.20 = 80.5px */
    }

    .izbornik {
        padding-bottom: calc(15px * 1.20); /* 15px * 1.20 = 17.25px */
        padding-top: calc(15px * 1.20); /* 15px * 1.20 = 17.25px */
    }

    .izbornik_2_2 {
        padding-right: calc(40px * 1.20); /* 40px * 1.20 = 46px */
    }

    .izbornik_logo {
        padding-left: calc(50px * 1.20); /* 50px * 1.20 = 57.5px */
    }

    .izbornik_linkovi {
        height: calc(50px * 1.20); /* 50px * 1.20 = 57.5px */
    }

    .izbornik_unutarnji {
        width: calc(200px * 1.20); /* 200px * 1.20 = 230px */
        height: calc(40px * 1.20); /* 40px * 1.20 = 46px */
    }

    .welcome_naslov {
        font-size: calc(1.875rem * 1.20); /* 1.875rem * 1.20 = 2.15625rem */
        padding-top: calc(40px * 1.20); /* 40px * 1.20 = 46px */
    }

    .welcome_tekst {
        padding-left: calc(40px * 1.20); /* 40px * 1.20 = 46px */
        padding-right: calc(40px * 1.20); /* 40px * 1.20 = 46px */
        padding-top: calc(40px * 1.20); /* 40px * 1.20 = 46px */
    }

    .kalkulator_okvir {
        width: calc(450px * 1.20); /* 450px * 1.20 = 517.5px */
        padding: calc(25px * 1.20); /* 25px * 1.20 = 28.75px */
        margin-top: calc(30px * 1.20); /* 30px * 1.20 = 34.5px */
    }

    .kalkulator_okvir_tekst {
        font-size: calc(1rem * 1.20); /* 16px → 1rem */
    }

    .kalkulator_okvir_input {
        width: calc(350px * 1.20); /* 350px * 1.20 = 402.5px */
        height: calc(35px * 1.20); /* 35px * 1.20 = 40.25px */
    }

    .kalkulator_razmak {
        margin-top: calc(30px * 1.20); /* 30px * 1.20 = 34.5px */
    }

    .rezultati_okvir {
        font-size: calc(1.125rem * 1.20); /* 1.125rem * 1.20 = 1.29375rem */
    }

    .rezultat_tekst {
        margin-right: calc(25px * 1.20); /* 25px * 1.20 = 28.75px */
        margin-left: calc(25px * 1.20); /* 25px * 1.20 = 28.75px */
    }

    .result-box {
        width: calc(20px * 1.20); /* 20px * 1.20 = 23px */
        height: calc(20px * 1.20); /* 20px * 1.20 = 23px */
        margin-left: calc(10px * 1.20); /* 10px * 1.20 = 11.5px */
    }

    .result_spremnik {
        gap: calc(10px * 1.20); /* 10px * 1.20 = 11.5px */
    }

    .center_rezultat {
        margin-top: calc(25px * 1.20); /* 25px * 1.20 = 28.75px */
        margin-left: calc(25px * 1.20); /* 25px * 1.20 = 28.75px */
        margin-right: calc(25px * 1.20); /* 25px * 1.20 = 28.75px */
    }

    .info {
        margin-left: calc(25px * 1.20); /* 25px * 1.20 = 28.75px */
        margin-right: calc(25px * 1.20); /* 25px * 1.20 = 28.75px */
    }

    .generic_btn {
        width: calc(155px * 1.20); /* 155px * 1.20 = 178.25px */
        height: calc(35px * 1.20); /* 35px * 1.20 = 40.25px */
        font-size: calc(1rem * 1.20); /* 1rem * 1.20 = 1.15rem */
    }

    .odjava_btn {
        width: calc(155px * 1.20); /* 155px * 1.20 = 178.25px */
        height: calc(35px * 1.20); /* 35px * 1.20 = 40.25px */
        font-size: calc(1rem * 1.20); /* 1rem * 1.20 = 1.15rem */
        margin-top: calc(40px * 1.20); /* 40px * 1.20 = 46px */
    }

    .login_btn {
        width: calc(155px * 1.20); /* 155px * 1.20 = 178.25px */
        height: calc(35px * 1.20); /* 35px * 1.20 = 40.25px */
        font-size: calc(1rem * 1.20); /* 1rem * 1.20 = 1.15rem */
    }
}