html {
    scroll-padding-top: 200px;
    scroll-behavior: smooth;
}

body {
font-weight: 100;
font-family: "Open Sans", sans-serif; }

#header {
font-family: arial;
color: white;
background-color: #0d2a3f; }

#header h1 {
font-weight: 600;
transform: scaleY(1.5);
font-family: Arial, sans-serif;
color: white; }

#header a {
color: white;
text-decoration: none; }

h1 {
color: #fe2a00; }

.bg-grey {
background-color: #f9f9fa; }

.heading {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/layout/img/soupiska.jpg');
background-size: cover;
background-position: center 30%;
background-repeat: no-repeat; }

.heading h1 {
color: white; }

.parallax-section {
position: relative;
height: 45vh;
overflow: hidden;
display: flex;
align-items: end;
justify-content: center;
color: white;
text-align: center; }

.parallax-bg {
position: absolute;
inset: -100px 0 -100px 0;
background-image: url('/layout/img/paralax.avif');
background-size: cover;
background-position: center;
transform: translateY(0);
will-change: transform;
z-index: 1; }

.parallax-content {
color: white;
position: relative;
z-index: 3; }

.parallax-content > span {
font-weight: 600;
font-size: 30px;
color: white; }

.parallax-content h1 {
transform: scaleY(1.3);
font-weight: 800;
font-size: 100px;
color: #fe2a00; }

.parallax-content h1 > span {
color: #0d2a3f; }

.nav-item {
font-size: 1.2em;
font-weight: 400; }

.nav-item-active {
color: red; }

.dropdown-item {
color: #0d2a3f !important; }

.article-gallery {
align-items: center;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px; }

.article-gallery img {
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
object-position: top center;
object-fit: cover; }

.article-photo {
aspect-ratio: 1.5/1;
overflow: hidden; }

.article-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block; }

.article-button {
background-color: #f9f9f9;
display: inline-block; }

.article-button a {
color: black;
text-decoration: none; }

.player_photo {
overflow: hidden; }

.player_photo img {
aspect-ratio: 2/3;
max-width: 100%;
height: auto;
object-fit: cover; }

.sponsor-box {
aspect-ratio: 1/1;
border: 1px solid #ddd;
border-radius: 12px;

display: flex;
align-items: center;
justify-content: center;

padding: 20px;
background: #fff; }

.sponsor-logo {
max-width: 100%;
max-height: 100%;
object-fit: contain; }

.button {
text-decoration: none;
padding: 10px 20px;
font-weight: bold;
transition: background-color 0.5s ease;
background-color: #fe2a00;
color: white; }

.button:hover {
color: white;
background-color: #a91c00; }

.footer {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/layout/img/paralax.avif');
background-size: cover;
background-position: center 30%;
background-repeat: no-repeat;
color: white;  }

footer {
font-size: 0.8em;
color: #777; }

.table-custom {
table-layout: fixed; }

.video {
width: 100%;
aspect-ratio: 16/9; }

.carousel-image {
aspect-ratio: 3 / 2;
width: 100%;
overflow: hidden; }

.carousel-image img {
object-position: center top;
width: 100%;
height: 100%;
object-fit: cover;
display: block; }

@media (min-width: 992px) {
    .navbar .dropdown .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: 0.2s;
    }

    .navbar .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
    }

    .article-gallery {
    grid-template-columns: 1fr 1fr 1fr;
}