:root {
    --background: #1F1F1F;
    --plava: #24BBDA;
    --text: #FAFAFA;
    --lightOrange: #F6B23E;
    --darkOrange: #FF8509;
}

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

@font-face {
    font-family: 'MontserratBold';
    src: url("../fonts/Montserrat-ExtraBold.ttf");
}

body {
    width: 100%;
    height: 100%;
    background: var(--background);
}

html {
    width: 100%;
    height: 100%;
}

.navbar-brand{
    transition: opacity 0.2s;
}

#pipi-logo{
    height: 230px;
    max-height: 31vh;
    transition: opacity 0.2s;
}

.hide{
    opacity: 0;
}

.full {
    height: 100%;
}

footer {
    background: var(--plava);
    color: var(--background);
}

.navbar {
    background: var(--background);
}

.nav-link {
    /* Unactive navigation */

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 29px;

    color: var(--text) !important;
}

.nav-link.active {
    /* Active navigation */

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-size: 24px;
    line-height: 29px;

    color: var(--plava) !important;
}

.btn-scroll {
    color: var(--text);
    background: var(--plava);
    border-radius: 30px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    line-height: 32px;
}

.btn-scroll:hover {
    color: var(--text);
    background: var(--darkOrange);
}


#naslovnica {
    background: url('../prijelaz-narancasti.svg') no-repeat bottom right;
    background-size: 100%;
}

#pipi {
    position: absolute;
    bottom: 0;
    right: 0;
    max-height: 85%;
    z-index: 1;
}

#nasl-content {
    position: absolute;
    z-index: 2;
}

h1 {

    font-family: 'MontserratBold';
    font-style: normal;
    font-weight: 800;
    font-size: 7.7vh;
    line-height: 9vh;

    /* Text color */

    color: var(--text);

}

h3 {

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 4.2vh;
    line-height: 5.2vh;

    /* Text color */

    color: var(--text);

}

#proizvod-content {
    position: relative;
    bottom: -6.5vw;
    z-index: 2;
}

#proizvod {
    background: url('../prijelaz-plavi.svg') no-repeat bottom right;
    background-size: 100%;
}

#limenka {
    position: absolute;
    bottom: -100%;
    left: 0;
    max-height: 85%;
    z-index: 1;
}

#tim {
    background-image: url(../tim.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
}

.orange-text{
    color: var(--darkOrange);
}

#tim-content {
    position: relative;
    bottom: -4vw;
    z-index: 2;
}

#ekipa {
    display: block;
    margin: auto;
    height: auto;
    max-height: 52vh;
    width: auto;
    transform: rotate(8deg) scale(0.8);
}

.contact-header {
    display: block;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-size: 40px;
    line-height: 49px;

    color: var(--text) !important;
}

.contact-link {
    display: block;

    text-decoration: none;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 29px;

    color: var(--text) !important;
}

*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #1F1F1F;
}

*::-webkit-scrollbar-thumb {
    height: 56px;
    border-radius: 8px;
    border: 4px solid transparent;
    background-clip: content-box;
    background-color: #888;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}