:root{
    --feher: rgb(245, 245, 245);
    --narancs: orange;
    --betu: rgb(48, 48, 48);
}

body{
    font-family: 'comic relief', sans-serif;
    color: var(--betu);
    background-color: var(--feher);
}

.fejlec{
    width: 100%;
    height: 100px;
    background-color: var(--narancs);
    position:fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 5px;
    box-sizing:border-box;
    z-index: 100;
}

.tabla{
    max-height: 70%;
    transition: transform 0.4s;
}

.tabla:hover{
    transform: scale(1.1);
    z-index: 100;
}

.cim{
    color: var(--feher);
    font-size: clamp(0.8rem, 2vw, 1.7rem);
    margin: 0;
    text-align: left;
}

.linkek{
    display: flex;
    gap: 14px;
    margin-left: auto;
    background-color: rgb(255, 140, 0);
    border-radius: 12px;
    padding: 8px 12px;
    margin-right: 8px;

}

.link{
    color: var(--feher);
    text-decoration: none;
    font-size: clamp(0.5rem, 1.2vw, 1rem);
    white-space: nowrap;
    background-color: rgb(255, 120, 0);
    border-radius: 8px;
    padding: 10px 10px;
    text-align: left;
}

.link:hover{
    transform: scale(1.03);
    background-color: rgb(255, 100, 0);
}

.blokk{
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    box-sizing: border-box;
}

.kepek{
    width: 60%;
    height: 500px;
    position: relative;
    max-width: 100%;
    z-index: 10;
}

.kep{
    position: absolute;
    border-radius: 10px;
    transition: transform 0.4s;
}

.kep:hover{
    transform: scale(1.03);
}


.szovegdoboz{
    width: 35%;
    padding: 20px;
    background-color: var(--narancs);
    border-radius: 10px;
    z-index: 20;
    box-sizing: border-box;
    max-width: 100%;
    margin-top: 50px;
}

.szoveg{
    color: var(--betu);
    font-size: 1.5rem;
    margin-top: 0;
    text-align: left;
}

.oldalcim{
    margin-top: 100px;
    padding: 10px;
    justify-content: center;
    display: flex;
}

.gomb{
    display: block;
    padding: 12px 20px;
    background-color: var(--feher);
    color: var(--betu);
    text-decoration: none;
    border-radius: 10px;
    text-align: center;
    transition: background-color 0.2s, transform 0.2s;
    text-align: left;
    font-weight: bold;
}

.gomb:hover {
    background-color: rgb(255, 217, 146);
    transform: translateY(-2px);
}

figure{
    margin: 0;
    padding: 0;
    display: block;
    border: none;
}

footer{
    font-family: sans-serif;
}

.kontraszt {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-size: 1.6rem !important;
}

.kontraszt .szoveg
.kontraszt .szoveg2
{
    color: #ffffff !important;
    font-size: 1.6rem !important;

}

.kontraszt .link
{
    color: #000000 !important;
}


.kontraszt input,
.kontraszt textarea,
.kontraszt select{
    background-color: #111111 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}


body.kontraszt .fejlec
{
    background-color: #222222 !important;
}

@media(max-width: 768px){
    .kepek, .szovegdoboz{
        width: 100%;
    }
    
    .kepek{ 
        height: 350px;
        margin-bottom: 25px;
    }
    
    .linkek{
        gap: 10px;
    }
}