/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 23.10.2024, 15:26:50
    Author     : pbartos
*/

.a_border img {border: 2px solid red;
               padding: 8px;
               background-color: white;
}

.a-section {
    background-image: url('/content/articles/tra_mini_maxx_tun/parallax-1.jpg');
    background-size: 100% auto; /* Šířka je 100 % elementu, výška se přizpůsobí proporcionálně */
    background-repeat: no-repeat; /* Obrázek se nebude opakovat */
    background-position: top center;                       

    background-color: #030303;
}



.a-color-row {
    display: flex;
    justify-content: flex-start; /* Zarovná objekty horizontálně na střed */
    align-items: center; /* Zarovná objekty vertikálně na střed, pokud mají různé výšky */
    flex-wrap: wrap; /* Pokud se objekty nevejdou do řádku, přejdou na další řádek */
}


.a-color-row > * {
    flex: 1 1 70px; /* Zajistí, že všechny objekty mají stejnou šířku, ale maximálně 50px */
    max-width: 70px;
    text-align: center; /* (Volitelné) Zarovná obsah objektu na střed */


}







.a-color-row > p {   
    text-align: center; border: 2px solid white; color: white; font-weight: bold; padding-top: 2px
}



.a-color-row1 {
    display: flex;
    justify-content: center; /* Zarovná objekty horizontálně na střed */
    align-items: center; /* Zarovná objekty vertikálně na střed, pokud mají různé výšky */
    flex-wrap: nowrap; /* Pokud se objekty nevejdou do řádku, přejdou na další řádek */
    width: 100%;
    padding-left: 3px;
    padding-right: 3px;
}



.a-color-row1 > * {
    flex: 1 1 19.5%; /* Zajistí, že všechny objekty mají stejnou šířku, ale maximálně 50px */
    text-align: center; /* (Volitelné) Zarovná obsah objektu na střed */


}

.a-color-row1 > p {   
    text-align: center; 
    border: 1px solid white; 
    color: white; font-weight: bold;
    padding: 0px 1px 0px 1px; 
    font-size: clamp(3px, 1.5vw, 8px);
    max-height: 20px;
}

.black {
    background-color: black;
}
.gray {
    background-color: gray;
}
.green {
    background-color: green;
}
.red {
    background-color: red;
}  
.orange {
    background-color: orange;
}
.blue {
    background-color: blue;
}

.white {
    background-color: lightgray;
}

.pink {
    background-color: darksalmon;
}

.chrome {
    background: linear-gradient(to right, 
    #808080 0%,       /* šedá na levém kraji */
    #d3d3d3 50%,      /* světle šedá ve středu */
    #808080 100%      /* šedá na pravém kraji */
);
}

.chrome_black {
    background: linear-gradient(to right, 
     #333333 0%,       /* tmavě šedá vlevo */
    #999999 50%,      /* světle šedá uprostřed */
    #333333 100%      /* tmavě šedá vpravo */
);
}


.a-section a:visited,
.a-section a:link,
.a-section a:active,
.a-section a:hover {
    color: white !important;

}

.a-section {
    color: white !important;
}


.a-relative {
    position: relative; /* nebo absolute */
}

.a-top {
    position: absolute; /* nebo absolute */
    /* Posune objekt o 20px nahoru */
    top: -28px;
}