*, *::before, *::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

  

html {

    scroll-behavior: smooth;

    font-size: 100%;

}

  

/*

$color1 = "#1580aa";

$color2 = "#F1BF00";

$color3 = "#105b79";

$color150 = "#1580aa80";

$backgroundTr = "#1580aa4d";

*/

:root {

    --font: "Baloo Bhaijaan 2", sans-serif;

    --color1: #1580aa;

    --color2: #F1BF00;

    --color3: #105b79;

    --color150: #1580aa80;

    --backgroundTr: #1580aa4d;

    --image-url: url("https://motejzik.eu/images/pozadi.jpg");

}

  

@media screen and (max-width: 1300px) {

    html {

        font-size: 100%;

    }

}



body {

    font-family: var(--font);

    font-size: 16px;

    line-height: 1.5;

    color: var(--color1);

    max-width: 100%;

    overflow-x: hidden;

}

body::before, body::after {

    content: "";

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background-image: none;

    z-index: -1;

}

body::before {

    position: fixed;

    opacity: 0.5;

    background-image: var(--image-url);

    background-size: cover;

    background-position: center;

    z-index: -2;

    filter: blur(3px);

}



img {

    max-width: 100%;

    height: auto;

}



button, .button {

    display: block;

    background-color: var(--color1);

    color: var(--color2);

    border: none;

    padding: 1rem;

    cursor: pointer;

    margin: .75rem auto;

    font-size: 1.5rem;

    transition: 0.3s;

}

button:hover, .button:hover  {

    background-color: var(--color3);

    scale: 1.1;

}

button:disabled {

    background-color: #c7c7c7;

    color: var(--color1);

    cursor: not-allowed;

}

button:disabled:hover {

    background-color: #c7c7c7;

    scale: 1;

}

button:disabled::before {

    display: inline-block;

    font-family: "Font Awesome 5 Free";

    content: "\f110";

    font-weight: 900;

    margin-right: 1rem;

    animation: loadingIcon 1s linear infinite;

}

button.chyby:disabled::before {

    display: none;

}

.button.active {

    background-color: var(--color2);

    color: var(--color1);

    text-decoration: none;

}

hr {

    border: 0;

    border-top: 3px solid var(--color2);

    margin: 4rem 0;

    width: 100%;

    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

}

a:not([class=classic]) {

    display: inline-block;

    color: var(--color2);

    text-decoration: none;

    transition: 0.3s;

    display: flex;

    align-items: center;

    justify-content: center;

}

  

a.classic {

    color: var(--color2);

}

a.classic:hover {

    text-decoration: none;

}