:root {
    --fszf: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(65,65,65,1) 50%, rgba(0,0,0,1) 100%); /* fekete-szürke-fekete */
    --szfsz: linear-gradient(90deg, rgba(65,65,65,1) 0%, rgba(255,255,255,1) 50%, rgba(65,65,65,1) 100%); /* szürke-fehér-szürke */

    --vilkek: #25b7fa;
    --k: rgba(0,60,60);/*vilz*/
    --k0: rgba(0,60,60,0.3);/*sötz-atl*/
    --k2: rgba(14,40,40,1);/*sötz*/
    --sl: rgb(87, 31, 105);
    --bs_kek: #0d6efd;
}
/*Mindenhol -> Alap*/
*{
    box-sizing: border-box;
}
body {
    background-color: var(--k0);
    color: white;
    min-width: 300px;
    font-family: 'Kanit', sans-serif;
    background:linear-gradient( var(--k0) 100%, var(--k0) 100%),url("../img/background.jpg");
}
main {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
}
.hatternav, footer {
    background-color: var(--k);
}
nav .navbar-brand {
    margin-right: 0 !important;
}
nav .navbar-brand > img {
    width: 125px;
}
nav a.navbar-brand:hover, nav li.nav-item a:hover {
    transition: transform .2s;
    transform: scale(1.05);
    color: var(--vilkek) !important;
}
nav li.nav-item a{
    border: 1px dashed rgba(255, 255, 255, 0);
    border-width: 1px 0 1px 0;
}
nav li.nav-item a:hover{
    border: 1px dashed var(--vilkek);
    border-width: 1px 0 1px 0;
}
a.nav-link {
    color: white !important;
    border-bottom: 2px dashed transparent;
    border-width: 2px 0 2px 0;
}
nav .dropdown-item, .dropdown-menu {
    background-color: var(--sotetlila);
    color: white;
}
nav .dropdown-item:hover {
    color: var(--feherlila);
    background-color: var(--sotetlila) !important;
}
.modal span {
    font-weight: bold;
}
footer {
    line-height: 62px;
}
.navbar-brand {
    font-family: 'Protest Revolution', sans-serif !important;
    letter-spacing: .25rem !important;
}
.navbar-brand:hover {
    text-decoration: none !important;
}

/*Mindelhol -> Linkek*/
a.linkek {
    transition: ease-in-out .2s;
    color: var(--bs_kek);
}
a.linkek:hover {
    transition: ease-in-out .2s;
    /*transform: scale(1.05);*/
    color: gold;
}

/*Mindenhol -> Lapok*/
.lap {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.75));
}
.lap p {
    text-align: justify;
}

/*Mindenhol -> Gombok*/
.gomb {
    background: var(--k);
    color: white;
    font-weight: bold;
    transition: ease-in-out 0.25s;
}
.gomb:hover {
    background: var(--vilkek);
    color: var(--k);
    text-decoration: underline;
    transition: ease-in-out 0.25s;
    box-shadow: #25b7fa 1px 2px 5px 1px;
}

/*Mindehol -> Felugró ablak*/
.modal-body {
    background-color: var(--k);
    text-align: justify;
}
.modal-header, .modal-footer {
    background-color: var(--k);
    color: white;
    border: 0;
}
#felugro_kep {
    width: 60%;
}
#kilepModal input[type="submit"], #kilepModal button {
    cursor: pointer;
}

/*Projektek -> Projekt képek és feliratok*/
.pdoboz {
    border: 1px solid white;
    background-color: var(--k);
    position: relative;
    display: inline-block;
    box-shadow: #25b7fa 1px 2px 5px 1px;
}
.pkep > img {
    aspect-ratio: 3/4;
    object-fit: fill;
    display: block;
    transition: ease-in-out 0.5s;
}
.pkep > i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    font-size: 5em;
    transition: ease-in-out 0.5s;
    opacity: 0;
}
.pkep:hover > img {
    transition: ease-in-out 0.5s;
    transform: scale(1.125);
    filter: grayscale(60%);
}
.pkep:hover > i {
    transition: ease-in-out 0.5s;
    opacity: 1 !important;
    text-shadow: 1px 1px 2px white, 0 0 1em var(--vilkek), 0 0 0.2em var(--vilkek);
}
.pdoboz .pcim, .pdoboz .pleiras {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}
.pleiras h6 {
    font-size: clamp(8px, 3vw, 100%);
}
.pcim h5 {
    font-size: clamp(16px, 6vw, 125%);
}

/*Videók -> Videó, Epizódlista*/
#video {
    position: relative;
    display: inline-block;
    width: 100%;
}

#video > #vid {
    object-fit: cover;
    /*display: block;
    width: 100%;*/
    aspect-ratio: 16/9;
    border: none;
}

/*Videók -> Epizódlista*/
ul#episodes {
    list-style-type: none;
}
ul#episodes li.target {
    cursor: pointer;
    padding: 5px;
    text-decoration: none;
    width: 100px;
    margin: 5px 5px;
}

/*Hírfolyam -> Frissítések*/
table.updates, table.updates tr, table.updates th, table.updates td {
    border-collapse: collapse;
    border: 1px solid white;
    margin: 0 auto;
    text-align: center;
    padding: 10px;
    width: 100%;
}
table.updates th {
    color: var(--k);
    background-color: white;
    border: 1px solid var(--k);
}
table.updates td:first-child{
    text-align: left;
}
table.updates td:last-child{
    text-align: right;
}